rocketacademy · gracethedragon · Jan 16, 2022 · Jan 17, 2022
diff --git a/index.html b/index.html
@@ -1,12 +1,40 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Timer</title>
+    <title>stopwatch</title>
     <link rel="stylesheet" href="styles.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
+      rel="stylesheet"
+    />
   </head>
 
   <body>
-    <h1 id="header">Timer!</h1>
+    <h1 id="header">stopwatch</h1>
+
+    <!-- 
+    <div class="outer">
+      <span class="center">lap time</span>
+    </div>
+
+    <div class="outer">
+      <div id="display">Elapsed Time</div>
+      <div id="buttons">
+        <div>
+        <button class="left">Start</button>
+        <button class="right">Stop</button>
+        </div>
+        <div>
+        <button class="left">Reset</button>
+        <button class="right">Lap</button>
+
+        </div>
+    </div>
+   -->
+
     <!-- Import program logic -->
     <script src="script.js"></script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/script.js b/script.js
@@ -1 +1,104 @@
-// Please implement exercise logic here
+// create stopwatch face
+const stopwatchContainer = document.createElement('div');
+stopwatchContainer.id = 'stopwatchContainer';
+document.body.append(stopwatchContainer);
+
+// create display
+const leftOuter = document.createElement('div');
+leftOuter.classList.add('outer');
+stopwatchContainer.appendChild(leftOuter);
+
+const lapTime = document.createElement('span');
+lapTime.classList.add('center');
+leftOuter.appendChild(lapTime);
+lapTime.innerText = 'lap time';
+
+const rightOuter = document.createElement('div');
+rightOuter.classList.add('outer');
+stopwatchContainer.appendChild(rightOuter);
+
+// timer output
+const display = document.createElement('div');
+display.id = 'display';
+rightOuter.appendChild(display);
+
+// create buttons
+const buttons = document.createElement('div');
+buttons.id = 'buttons';
+rightOuter.appendChild(buttons);
+
+const topButtons = document.createElement('div');
+buttons.appendChild(topButtons);
+
+const startButton = document.createElement('button');
+startButton.innerText = 'start';
+startButton.classList.add('left');
+topButtons.appendChild(startButton);
+
+const stopButton = document.createElement('button');
+stopButton.innerText = 'stop';
+stopButton.classList.add('right');
+topButtons.appendChild(stopButton);
+
+const bottomButtons = document.createElement('div');
+buttons.appendChild(bottomButtons);
+
+const resetButton = document.createElement('button');
+resetButton.innerText = 'reset';
+resetButton.classList.add('left');
+bottomButtons.appendChild(resetButton);
+
+const lapButton = document.createElement('button');
+lapButton.innerText = 'lap';
+lapButton.classList.add('right');
+bottomButtons.appendChild(lapButton);
+
+// //show timer output
+// const output = document.createElement('div');
+// output.classList.add("display")
+// output.id = 'center'
+// document.body.appendChild(output);
+
+// declare variables
+let milliseconds = 1000;
+const delayInMilliseconds = 1000;
+display.innerText = '00:00:00';
+
+let ref = null;
+
+const start = () => {
+  // output.innerText = `00:00:00`;
+  if (ref === null) {
+    ref = setInterval(() => {
+      stopButton.addEventListener('click', () => { clearInterval(ref);
+        ref = null; });
+
+      const totalSeconds = Math.floor(milliseconds / 1000);
+      const totalMinutes = Math.floor((milliseconds / 1000) / 60);
+      let hours = Math.floor(totalMinutes / 60);
+      let minutes = totalMinutes - hours * 60;
+      let seconds = totalSeconds - hours * 60 * 60 - minutes * 60;
+
+      if (seconds < 10) {
+        seconds = `0${seconds}`;
+      }
+      if (minutes < 10) {
+        minutes = `0${minutes}`;
+      }
+      if (hours < 10) {
+        hours = `0${hours}`;
+      }
+      display.innerText = `${hours}:${minutes}:${seconds} `;
+      console.log(milliseconds);
+
+      milliseconds += 1000;
+    }, delayInMilliseconds);
+  }
+};
+
+// add event listeners
+
+startButton.addEventListener('click', start);
+resetButton.addEventListener('click', () => window.location.reload());
+
+// how to make it reset
diff --git a/styles.css b/styles.css
@@ -1,3 +1,51 @@
 body {
-  background-color: pink;
+  background-color: lightsteelblue;
+  box-sizing: border-box;
+  text-align: center;
+  font-size: 30px;
+  font-family: "Orbitron", sans-serif;
+}
+
+#stopwatchContainer {
+  display: block;
+  width: 50%;
+  margin: auto auto;
+}
+
+div {
+  text-align: center;
+  /* position: fixed; */
+}
+.outer {
+  border: 2px solid black;
+  background-color: lightsteelblue;
+  height: 200px;
+  width: 50%;
+  float: left;
+  margin: 0 auto;
+}
+
+.left,
+.right {
+  width: 40%;
+  margin: 5%;
+}
+
+button {
+  margin: 15%;
+  border: 2px solid slategrey;
+  background-color: lightskyblue;
+}
+
+button:hover {
+  background-color: lightseagreen;
+  color: white;
+}
+
+#display {
+  height: 20px;
+  margin-bottom: 20%;
+}
+div > div {
+  box-sizing: border-box;
 }