Shopify · chelseakdwarika · Jan 29, 2024 · Jan 29, 2024 · Jan 29, 2024 · Jan 29, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@babel/preset-env": "^7.23.8",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
     "@types/node": "^16.18.30",
@@ -32,6 +33,7 @@
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.1",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react-test-renderer": "^18.2.0",
     "style-loader": "^3.3.2",
     "ts-jest": "^29.1.1",
@@ -46,6 +48,13 @@
   "jest": {
     "transform": {
       "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
-    }
+    },
+    "moduleNameMapper": {
+      "\\.css$": "<rootDir>/test/jest/stylemock.js"
+    },
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js"
+    ]
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Template Site</title>
-    </head>
-    <body>
-        <section id='root'></section>
-    </body>
-</html>
+  <head>
+    <title>Chelsea's Countdown</title>
+  </head>
+  <body>
+    <section id="root"></section>
+  </body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,10 @@
-import React from 'react'
+import React from 'react';
+import StopWatch from './components/StopWatch';
 
 export default function App() {
-    return(
-        <div></div>
-    )
-}
+  return (
+    <div>
+      <StopWatch />
+    </div>
+  );
+}
diff --git a/src/StopWatch.tsx b/src/StopWatch.tsx
diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx
diff --git a/src/components/StopWatch.css b/src/components/StopWatch.css
@@ -0,0 +1,75 @@
+body {
+  background: rgb(218, 112, 214);
+  background: radial-gradient(
+    circle,
+    rgba(218, 112, 214, 1) 0%,
+    rgba(148, 187, 233, 1) 100%
+  );
+  margin: 0;
+  display: flex;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  color: #f0a7ee;
+  display: flex;
+  letter-spacing: 2px;
+  flex-wrap: wrap;
+  text-align: center;
+}
+
+.container span {
+  position: relative;
+  font-size: 6rem;
+  bottom: 3px;
+}
+
+.text {
+  margin: 0;
+  font-size: 6rem;
+}
+
+.btn {
+  background-color: #d8bfd8;
+  color: black;
+  padding: 10px 20px;
+  font-size: 1.5rem;
+  margin: 2px 13px 10px;
+  cursor: pointer;
+  border: 1px solid purple;
+  border-radius: 4px;
+}
+
+.btn:hover {
+  background-color: #da70d6;
+}
+
+.btn.selected {
+  background-color: #da70d6;
+}
+
+.lap-list {
+  font-size: 2rem;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+/* smaller screens */
+
+@media only screen and (max-width: 600px) {
+  .container span {
+    font-size: 4rem;
+  }
+
+  .text {
+    font-size: 4rem;
+  }
+
+  .btn {
+    padding: 8px 16px;
+    font-size: 1rem;
+    margin: 5px;
+  }
+}
diff --git a/src/components/StopWatch.tsx b/src/components/StopWatch.tsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import StopWatchButton from "./StopWatchButton";
+import "./StopWatch.css";
+
+//StopWatch functional component
+const StopWatch: React.FC = () => {
+  const [time, setTime] = useState(0); // Track elapsed time
+  const [isRunning, setIsRunning] = useState(false); // Track running/paused
+  const [laps, setLaps] = useState<number[]>([]); // Record lap times
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (isRunning) {
+      interval = setInterval(() => {
+        // Update time every 10 milliseconds
+        setTime((prevTime) => prevTime + 10); // Add 10 milliseconds to prevTime
+      }, 10);
+    }
+    return () => clearInterval(interval); // Clear interval when paused/stopped
+  }, [isRunning]); // Run effect when isRunning state changed
+
+  const startTimer = () => {
+    setIsRunning(true); // Set isRunning state to true
+  };
+
+  const stopTimer = () => {
+    setIsRunning(false); // Set isRunning state to false
+  };
+
+  const resetTimer = () => {
+    setTime(0); // Reset time to 0
+    setIsRunning(false); // Set isRunning state to false
+    setLaps([]); // Clear lap times
+  };
+
+  const recordLap = () => {
+    setLaps((prevLaps) => [...prevLaps, time]); // Add time to Laps array
+  };
+
+  return (
+    <div className="stopwatch">
+      <section className="container">
+        {/* hours */}
+        <h1 className="text">
+          {Math.floor(time / 3600000)
+            .toString()
+            .padStart(2, "0")}
+        </h1>
+        <span>:</span>
+        {/* mins */}
+        <h1 className="text">
+          {Math.floor((time % 3600000) / 60000)
+            .toString()
+            .padStart(2, "0")}
+        </h1>
+        <span>:</span>
+        {/* seconds */}
+        <h1 className="text">
+          {Math.floor((time % 60000) / 1000)
+            .toString()
+            .padStart(2, "0")}
+        </h1>
+        <span>.</span>
+        {/*milliseconds */}
+        <h1 className="text">
+          {((time % 1000) / 10).toFixed(0).toString().padStart(2, "0")}
+        </h1>
+      </section>
+
+      {/* StopWatchButton & props */}
+      <StopWatchButton
+        onStart={startTimer}
+        onStop={stopTimer}
+        onReset={resetTimer}
+        onLap={recordLap}
+        isRunning={isRunning}
+      />
+
+      <div className="lap-list">
+        {/* Map thru laps array and render times */}
+        {laps.map((lap, index) => (
+          <div key={index} className="lap">
+            <span>Lap {index + 1}:</span>
+            {/* format and display lap time */}
+            <span>
+              {Math.floor(lap / 3600000)
+                .toString()
+                .padStart(2, "0")}
+              :
+            </span>
+            <span>
+              {Math.floor((lap % 3600000) / 60000)
+                .toString()
+                .padStart(2, "0")}
+              :
+            </span>
+            <span>
+              {Math.floor((lap % 60000) / 1000)
+                .toString()
+                .padStart(2, "0")}
+            </span>
+            <span>.</span>
+            {/* add mlliseconds */}
+            <span>
+              {((lap % 1000) / 10).toFixed(0).toString().padStart(2, "0")}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default StopWatch;
diff --git a/src/components/StopWatchButton.tsx b/src/components/StopWatchButton.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+
+//props for StopWatchButton
+interface StopWatchButtonProps {
+  onStart: () => void;
+  onStop: () => void;
+  onReset: () => void;
+  onLap: () => void;
+  isRunning: boolean;
+}
+
+const StopWatchButton: React.FC<StopWatchButtonProps> = ({
+  onStart,
+  onStop,
+  onReset,
+  onLap,
+  isRunning,
+}) => {
+  // track currently selected button
+  const [selectedButton, setSelectedButton] = useState<string | null>(null);
+
+  // button clicks, set selectedbutton state based on clicked
+  const handleButtonClick = (action: string, callback: () => void) => {
+    setSelectedButton(action);
+    callback();
+  };
+
+  return (
+    <div>
+      <button
+        className={`btn ${selectedButton === "start" ? "selected" : ""}`}
+        onClick={() => handleButtonClick("start", onStart)}
+        disabled={isRunning}
+      >
+        Start
+      </button>
+      <button
+        className={`btn ${selectedButton === "stop" ? "selected" : ""}`}
+        onClick={() => handleButtonClick("stop", onStop)}
+        disabled={!isRunning}
+      >
+        Stop
+      </button>
+      <button
+        className={`btn ${selectedButton === "reset" ? "selected" : ""}`}
+        onClick={() => handleButtonClick("reset", onReset)}
+      >
+        Reset
+      </button>
+      <button
+        className={`btn ${selectedButton === "lap" ? "selected" : ""}`}
+        onClick={() => handleButtonClick("lap", onLap)}
+        disabled={!isRunning}
+      >
+        Lap
+      </button>
+    </div>
+  );
+};
+
+export default StopWatchButton;
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
+import StopWatch from './components/StopWatch';
 
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(<App />);
+root.render(
+<StopWatch/>
+);
diff --git a/src/setupTests.js b/src/setupTests.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';
diff --git a/src/tests/StopWatch.test.tsx b/src/tests/StopWatch.test.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/extend-expect";
+import StopWatch from "../components/StopWatch";
+
+describe("Stopwatch", () => {
+  test("render initial state", () => {
+    render(<StopWatch />);
+
+    expect(screen.getByText("00:00:00")).toBeInTheDocument();
+  });
+
+  it.todo("should render 00:00:00");
+  it.todo("should stop counting when the user clicks the stop button");
+  it.todo("should reset to zero when the user clicks the reset button.");
+  it.todo("should record and display laps when user clicks the lap button.");
+});
diff --git a/src/tests/StopWatchButton.test.tsx b/src/tests/StopWatchButton.test.tsx
diff --git a/test/jest/stylemock.js b/test/jest/stylemock.js
@@ -0,0 +1,3 @@
+module.exports = {
+
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -7,6 +7,7 @@
     "jsx": "react",
     "allowJs": true,
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import '@testing-library/jest-dom/extend-expect';