Fixing this whole thing

Seriously. I'm gonna fix it all today.

Author: nitishdayal

exercises/01 - JavaScript Drum Kit/index.html

@@ -65,29 +65,41 @@
  * the keypress, add a class to the specific element that matches with the keypress,
  * and then remove that class in order to reset the element to it's original state.
  */
- function playSound(e) {
- const soundclip = document.querySelector(`audio[data-key="${e.keyCode}"]`);
- const keyelement = document.querySelector(`.key[data-key="${e.keyCode}"]`);
 
- if (!soundclip) return; // Stop function from running if key pressed doesn't match up with our elements
+ (function () {
+ const playSound = (e) => {
+ const soundclip = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+ const keyelement = document.querySelector(`.key[data-key="${e.keyCode}"]`);
 
- keyelement.classList.add('playing');
+  if (!soundclip) return undefined; // Stop function from running if key pressed doesn't match up with our elements
 
- soundclip.currentTime = 0; // Play sound clip from start every time a corresponding key is pressed
- soundclip.play();
- }
+ keyelement.classList.add('playing');
 
- function removeTransition(e) {
- if (e.propertyName !== 'transform') return; // skip if it's not a transform event
- this.classList.remove('playing');
- }
+ soundclip.currentTime = 0; // Play sou
 
- const keys = document.querySelectorAll('.key'); // Find all elements in the document with a class 'key'
- keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+  soundclip.play();
+  }
 
- window.addEventListener('keydown', playSound);
+ const removeTransition = (e) => {
+ // skip if it's not a transform event
+ if (e.propertyName !== 'transform') return undefined;
+ e.target.classList.remove('playing');
+ }
+
+ // Find all elements in the document with a class 'key'
+ const keys = document.querySelectorAll('.key');
+
+ window.addEventListener('keydown', playSound);
+
+ keys.forEach(key =>
+ key.addEventListener(
+ 'transitionend',
+ (e) => removeTransition.call(key, e)
+ )
+ );
+ })();
  </script>
 
 </body>
 
-</html>
+</html>

exercises/02 - JS + CSS Clock/index.html

@@ -19,49 +19,46 @@
 
  <style>
  html {
- background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
- background-size:cover;
- font-family:'helvetica neue';
+ background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+ background-size: cover;
+ font-family: 'helvetica neue';
  text-align: center;
  font-size: 10px;
  }
-
+ 
  body {
  font-size: 2rem;
- display:flex;
- flex:1;
+ display: flex;
+ flex: 1;
  min-height: 100vh;
  align-items: center;
  }
-
+ 
  .clock {
  width: 30rem;
  height: 30rem;
- border:20px solid white;
- border-radius:50%;
- margin:50px auto;
+ border: 20px solid white;
+ border-radius: 50%;
+ margin: 50px auto;
  position: relative;
- padding:2rem;
- box-shadow:
- 0 0 0px 4px rgba(0,0,0,0.1),
- inset 0 0 0 3px #EFEFEF,
- inset 0 0 10px black,
- 0 0 10px rgba(0,0,0,0.2);
+ padding: 2rem;
+ box-shadow: 0 0 0px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
  }
-
+ 
  .clock-face {
  position: relative;
  width: 100%;
  height: 100%;
- transform: translateY(-3px); /* account for the height of the clock hands */
+ transform: translateY(-3px);
+ /* account for the height of the clock hands */
  }
-
+ 
  .hand {
- width:50%;
- height:6px;
- background:black;
+ width: 50%;
+ height: 6px;
+ background: black;
  position: absolute;
- top:50%;
+ top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
@@ -70,39 +67,38 @@
 
  </style>
 
-<script>
- /* GOAL: Write the JavaScript code necessary to transform the HTML elements
+ <script>
+  /* GOAL: Write the JavaScript code necessary to transform the HTML elements
  * on the page into a functioning clock.
  */
 
- // Create references to the HTML elements that we want to transform
- const secondHand = document.querySelector('.second-hand');
- const minuteHand = document.querySelector('.min-hand');
- const hourHand = document.querySelector('.hour-hand')
+ // Create references to the HTML elements that we want to transform
+ const
+ secondHand = document.querySelector('.second-hand'),
+ minuteHand = document.querySelector('.min-hand'),
+ hourHand = document.querySelector('.hour-hand')
+ const calcDegrees = (int, div) => ((int / div) * 360) + 90;
+ // Call function once every second
+ setInterval(() => {
 
- function setDate() {
- const now = new Date(); // Create new Date object
+  // Create new Date object
+  const now = new Date();
 
- // Get current seconds, calculate the degree shift, and apply the styling
- const seconds = now.getSeconds();
- const secondHandDegrees = ((seconds / 60) * 360) + 90;
- secondHand.style.transform = `rotate(${secondHandDegrees}deg)`;
+ // Get current seconds, minutes, & hours and calculate the degree shift
+ const
+ secondHandDegrees = calcDegrees(now.getSeconds(), 60),
+ minuteHandDegrees = calcDegrees(now.getMinutes(), 60),
+ hourHandDegrees = calcDegrees(now.getHours(), 12);
 
- // Get current minutes, calculate the degree shift, and apply the styling
- const minutes = now.getMinutes();
- const minuteHandDegrees = ((minutes / 60) * 360) + 90;
- minuteHand.style.transform = `rotate(${minuteHandDegrees}deg)`;
 
- // Hour hand transformation can utilize the data gathered for the minute
- // hand, with a minor alteration in how the degree shift is calculated.
- const hourHandDegrees = ((minutes / 12) * 360) + 90;
- hourHand.style.transform = `rotate(${hourHandDegrees}deg)`;
- }
+ // Apply rotation to the clock hands corresponding with current time value
+ secondHand.style.transform = `rotate(${secondHandDegrees}deg)`;
+ minuteHand.style.transform = `rotate(${minuteHandDegrees}deg)`;
+ hourHand.style.transform = `rotate(${hourHandDegrees}deg)`;
 
- // Call function once every second
- setInterval(setDate, 1000);
 
-</script>
+ }, 1000);
+ </script>
 </body>
 
-</html>
+</html>

exercises/04 - Array Cardio Day 1/index.html

@@ -25,11 +25,14 @@
 
  const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
 
- const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
+ const people = ['Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William', 'Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton',];
 
  // Array.prototype.filter()
  // 1. Filter the list of inventors for those who were born in the 1500's
- const inventors_from_1500s = inventors.filter((inventor) => inventor.year >= 1500 && inventor.year < 1600)
+ const inventors_from_1500s = inventors.filter(
+ (inventor) => inventor.year >= 1500 && inventor.year < 1600
+ )
+
  console.table(inventors_from_1500s)
 
  // Array.prototype.map()
@@ -44,10 +47,15 @@
 
  // Array.prototype.reduce()
  // 4. How many years did all the inventors live?
- const total_years_lived = inventors.reduce((currValue, inventor) => currValue += (inventor.passed - inventor.year), 0)
+ const total_years_lived = inventors.reduce(
+ (currValue, inventor) => currValue += (inventor.passed - inventor.year), 0
+ )
  console.log(total_years_lived);
+
  // 5. Sort the inventors by years lived
- const inventors_by_lifespan = inventors.sort((a, b) => (a.passed - a.year) - (b.passed - b.year));
+ const inventors_by_lifespan = inventors.sort(
+ (a, b) => (a.passed - a.year) - (b.passed - b.year)
+ );
  console.table(inventors_by_lifespan);
 
  // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
@@ -63,10 +71,10 @@
 
  // 7. sort Exercise
  // Sort the people alphabetically by last name
- const people_by_last_name = people.sort(
- (a, b) => a.split(', ')[0] > b.split(', ')[0] ? -1 : 1);
 
- console.table(people_by_last_name);
+ const people_by_last_name = people.sort((a, b) => a.split(', ')[0] < b.split(', ')[0] ? -1 : 1);
+
+ console.log(people_by_last_name);
  // 8. Reduce Exercise
  // Sum up the instances of each of these
  const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
@@ -79,9 +87,8 @@
  return tallyObject;
  }, {});
 
- console.table(data_instance_count);
-
+ console.log(data_instance_count);
  </script>
 </body>
 
-</html>
+</html>

readme.md

@@ -14,10 +14,10 @@ This repository contains my written guides for the JavaScript30 course by
  refer back to. Orrr you're in a library and don't have headphones. Who knows! If
  you want some documentation to go along with those sweet Wes Bos vids, here you go.
 
-**DISCLAIMER:** My approach to some of the challenges vary from the provided answers (found in
+**DISCLAIMER:** My approach to some of the challenges will vary from the provided answers (found in
  the files that end with `-FINISHED` on the main repo). Some of the tweaks are just to
  include various 'best practices' and some have huge chunks of differences. I try to provide
- thorough explanations when I do sway from the path and explain why I chose to do so, but
+ thorough explanations when I do stray from the path and explain why I chose to do so, but
  I want to make it clear that some of these guides don't go hand-in-hand with the videos.
 
 ## About