Trying to do stretch. Not finished. Checking in for standup.

ryangclark · Jan 29, 2019 · d5dcb5a · d5dcb5a
1 parent 792ffb4
commit d5dcb5a
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 1 deletion.
diff --git a/stretch-assignment/digital_timer/index.html b/stretch-assignment/digital_timer/index.html
@@ -1,9 +1,15 @@
 <!DOCTYPE html>
+
 <html>
   <head>
-    <title>DOM I</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Timer Time!</title>
     <link rel="stylesheet" href="./styles.css">
+    <script src="index.js" async></script>
   </head>
+
   <body>
     <div class="digits">
       <div class="digit" id="secondTens">-</div>
@@ -12,5 +18,9 @@
       <div class="digit" id="msHundreds">-</div>
       <div class="digit" id="msTens">-</div>
     </div>
+    <div class="buttons">
+      <button id="start" onclick="counter()">Start</button>
+      <button id="reset">Reset</button>
+    </div>
   </body>
 </html>
diff --git a/stretch-assignment/digital_timer/index.js b/stretch-assignment/digital_timer/index.js
@@ -0,0 +1,64 @@
+// get digit elements
+const digits = document.querySelectorAll('digit');
+// function to toggle .redDigit class
+
+const secondTens = document.getElementById('secondTens');
+const secondOnes = document.getElementById('secondOnes');
+const msTens = document.getElementById('msTens');
+const msHundreds = document.getElementById('msHundreds');
+
+// const test = 10000;
+// console.log(test.toString().split('').slice(0,4));
+
+// get buttons
+const startButton = document.getElementById('start');
+const resetButton = document.getElementById('reset');
+// by default, Reset Button is disabled
+// resetButton.disabled = true;
+
+// Start button event
+// startButton.onclick = counter();
+
+function counter() {
+    // digit color to black
+    digits.forEach(digit => digit.classList.remove('redDigit'));
+    // disable start button
+    startButton.disabled = true;
+
+    // begin calling the counter callback
+    let intervalID = window.setInterval(countCB, 100);
+    let startTime = Date.now().toString().split(7,12);
+
+    function countCB() {
+        // new timer
+        time = Date.now().toString().split(7,12);
+        console.log(time - startTime);
+        // while count is less than 10 seconds
+        if ((time - startTime) <= 10000) {
+            let intervalBreakDown = startTime.split('').slice(0,4);
+            console.log(time - startTime);
+            secondTens.textContent = intervalBreakDown[0];
+            secondOnes.textContent = intervalBreakDown[1];
+            msTens.textContent = intervalBreakDown[2];
+            msHundreds.textContent = intervalBreakDown[3];
+        } else {
+            clearInterval(intervalID);
+            console.log('clearInterval');
+            // enable reset button
+            resetButton.disabled = false;
+            // digit color to red
+            digits.forEach(digit => digit.classList.add('redDigit'));
+        }
+    }
+}
+
+// const testInterval = window.setInterval(testCB, 1000);
+
+var d = Date.now();
+// var t = d.toLocaleTimeString();
+console.log(d);
+console.log(d.toString().slice(8,12));
+
+function testCB() {
+    console.log('Test Interval:', testInterval);
+}
diff --git a/stretch-assignment/digital_timer/styles.css b/stretch-assignment/digital_timer/styles.css
@@ -1,14 +1,31 @@
 body {
+  /* display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap; */
+}
+
+.buttons {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 24px 0;
+}
+button {
+  margin: 0 8px;
 }
 
 .digit {
   display: inline-block;
   font-size: 80px;
 }
 
+.digits {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .redDigit {
   color: red;
 }