Project 18 complete

wwags33 · wwags33 · commit c2489d9547a9 · 2020-03-03T10:57:59.000-05:00
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Videos</title>
 </head>
+
 <body>
   <ul class="videos">
     <li data-time="5:43">
@@ -181,7 +183,7 @@
       Video 58
     </li>
   </ul>
-<script>
-</script>
+  <script src="typescripts.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/18 - Adding Up Times with Reduce/typescripts.js b/18 - Adding Up Times with Reduce/typescripts.js
@@ -0,0 +1,25 @@
+const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
+console.time('map and reduce');
+const seconds = timeNodes
+    .map((node) => node.dataset.time)
+    .map(timeCode => {
+    if (!timeCode)
+        return 0;
+    const [mins, secs] = timeCode.split(':').map(Number);
+    return (mins * 60) + secs;
+})
+    .reduce((total, vidSeconds) => total + vidSeconds);
+console.timeEnd('map and reduce');
+let secondsLeft = seconds;
+const hours = Math.floor(secondsLeft / 3600);
+secondsLeft = secondsLeft % 3600;
+const minutes = Math.floor(secondsLeft / 60);
+secondsLeft = secondsLeft % 60;
+console.log(`Map and reduce: ${hours}:${minutes}:${secondsLeft}`);
+console.time('just reduce');
+const redSeconds = timeNodes.reduce((totalSeconds, node) => {
+    const [mins, secs] = node.dataset.time.split(':').map(Number);
+    return totalSeconds + mins * 60 + secs;
+}, 0);
+console.timeEnd('just reduce');
+console.log(`Just reduce: ${Math.floor(redSeconds / 3600)}:${Math.floor((redSeconds % 3600) / 60)}:${redSeconds % 60}`);
diff --git a/18 - Adding Up Times with Reduce/typescripts.ts b/18 - Adding Up Times with Reduce/typescripts.ts
@@ -0,0 +1,39 @@
+/**
+ * JavaScript30 by Wes Bos, https://javascript30.com/
+ * TypeScript implementation by Will Wager
+ * Project: Adding up times with reduce
+ * Concepts: Map, reduce, calculating times
+ * Key takeaways: Mapping step by step can be more readable, but combining
+ *   into a single map or reduce is less expensive.
+ * Sidenotes: Targeted es6 to get Array.from
+ * Compilation command:
+ *   tsc --removeComments --strictNullChecks --noImplicitAny --target es6 typescripts.ts
+ */
+
+const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
+console.time('map and reduce');
+const seconds = timeNodes
+  .map((node: HTMLElement) => node.dataset.time)
+  .map(timeCode => {
+    if (!timeCode) return 0;
+    const [mins, secs] = timeCode.split(':').map(Number);
+    return (mins * 60) + secs;
+  })
+  .reduce((total, vidSeconds) => total + vidSeconds);
+console.timeEnd('map and reduce');
+
+let secondsLeft = seconds;
+const hours = Math.floor(secondsLeft / 3600);
+secondsLeft = secondsLeft % 3600;
+const minutes = Math.floor(secondsLeft / 60);
+secondsLeft = secondsLeft % 60;
+console.log(`Map and reduce: ${hours}:${minutes}:${secondsLeft}`);
+
+
+console.time('just reduce');
+const redSeconds = timeNodes.reduce((totalSeconds: number, node: HTMLElement) => {
+  const [mins, secs] = node.dataset.time!.split(':').map(Number);
+  return totalSeconds + mins * 60 + secs;
+}, 0);
+console.timeEnd('just reduce');
+console.log(`Just reduce: ${Math.floor(redSeconds / 3600)}:${Math.floor((redSeconds % 3600) / 60)}:${redSeconds % 60}`);
