Merge pull request #7 from pouyio/gh-pages

pouyio · web-flow · commit 6ee761327d39 · 2017-06-25T12:59:59.000+02:00
day 18
diff --git a/18-tally-strings/README.md b/18-tally-strings/README.md
@@ -0,0 +1,2 @@
+# Tally String Times with Reduce
+Watch this challenge live in [codepen](https://codepen.io/pouyio/full/awLmLd/).
diff --git a/18-tally-strings/app.js b/18-tally-strings/app.js
@@ -0,0 +1,19 @@
+window.onload = () => {
+
+  const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
+
+  const seconds = timeNodes.reduce((acc, timeNode) => {
+    const [mins, secs] = timeNode.dataset.time.split('.').map(parseFloat);
+    return acc + secs + mins * 60;
+  }, 0);
+
+  let secondsLeft = seconds;
+  const hours = Math.floor(secondsLeft / 3600);
+  secondsLeft = secondsLeft % 3600;
+
+  const minutes = Math.floor(secondsLeft / 60);
+  secondsLeft = (secondsLeft % 60);
+
+  document.querySelector('.total').innerText = `${hours}.${minutes}.${secondsLeft}`;
+
+}
diff --git a/18-tally-strings/index.html b/18-tally-strings/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Tally String Times with Reduce</title>
+    <style media="screen">
+      body{
+        font-family: sans-serif;
+        font-size: 1.8em;
+        color: #383838;
+        min-height: 100vh;
+        margin: 0;
+        padding: 1em;
+        box-sizing: border-box;
+        background-color: #e7e4e4;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+      }
+      h1 {
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <ul>
+      <li data-time="3.40">Video 1: 3.40</li>
+      <li data-time="1.20">Video 2: 1.20</li>
+      <li data-time="2.42">Video 3: 2.42</li>
+      <li data-time="4.53">Video 4: 4.53</li>
+      <li data-time="1.00">Video 5: 1.00</li>
+      <li data-time="2.06">Video 6: 2.06</li>
+    </ul>
+    <p>Total <span class="total"></span></p>
+    <script type="text/javascript" src="./app.js">
+    </script>
+  </body>
+</html>
diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ My goal is simply to learn the basics by doing many simple things rather than st
 15. [x] [LocalStorage](./15-localStorage) - [Codepen](https://codepen.io/pouyio/full/XgRpOd/)
 16. [x] [CSS Text Shadow Mouse Move Effect](./16-text-shadow) - [Codepen](https://codepen.io/pouyio/full/mwweaq/)
 17. [x] [Sort Without Articles](./17-sorting-without-articles) - [Codepen](https://codepen.io/pouyio/full/WOOrOV/)
-18. [ ] Adding Up Times with Reduce
+18. [x] [Tally String Times with Reduce](./18-tally-strings) - [Codepen](https://codepen.io/pouyio/full/awLmLd/)
 19. [ ] Webcam Fun
 20. [ ] Speech Detection
 21. [ ] Geolocation

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Tally String Times with Reduce`
	`2`	`+Watch this challenge live in [codepen](https://codepen.io/pouyio/full/awLmLd/).`