wesbos · Falafelqueen · Dec 6, 2021 · Dec 6, 2021 · Dec 7, 2021 · Dec 7, 2021
diff --git a/01 - JavaScript Drum Kit/app.js b/01 - JavaScript Drum Kit/app.js
@@ -0,0 +1,22 @@
+const removeTransition = (e) => {
+  if (e.propertyName == "transform") {
+    e.target.classList.remove("playing");
+  }
+};
+
+const playSound = (e) => {
+  const audioSoundBtn = document.querySelector(
+    `audio[data-key="${e.key.toUpperCase()}"]`
+  );
+  const key = document.querySelector(`div[data-key="${e.key.toUpperCase()}"]`);
+  if (audioSoundBtn) {
+    key.classList.add("playing");
+    audioSoundBtn.currentTime = 0;
+    audioSoundBtn.play();
+  }
+};
+const keys = document.querySelectorAll(".key");
+keys.forEach((key) => {
+  key.addEventListener("transitionend", removeTransition);
+});
+window.addEventListener("keydown", playSound);
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
@@ -7,60 +7,56 @@
 </head>
 <body>
 
-
   <div class="keys">
-    <div data-key="65" class="key">
+    <div data-key="A" class="key">
       <kbd>A</kbd>
       <span class="sound">clap</span>
     </div>
-    <div data-key="83" class="key">
+    <div data-key="S" class="key">
       <kbd>S</kbd>
       <span class="sound">hihat</span>
     </div>
-    <div data-key="68" class="key">
+    <div data-key="D" class="key">
       <kbd>D</kbd>
       <span class="sound">kick</span>
     </div>
-    <div data-key="70" class="key">
+    <div data-key="F" class="key">
       <kbd>F</kbd>
       <span class="sound">openhat</span>
     </div>
-    <div data-key="71" class="key">
+    <div data-key="G" class="key">
       <kbd>G</kbd>
       <span class="sound">boom</span>
     </div>
-    <div data-key="72" class="key">
+    <div data-key="H" class="key">
       <kbd>H</kbd>
       <span class="sound">ride</span>
     </div>
-    <div data-key="74" class="key">
+    <div data-key="J" class="key">
       <kbd>J</kbd>
       <span class="sound">snare</span>
     </div>
-    <div data-key="75" class="key">
+    <div data-key="K" class="key">
       <kbd>K</kbd>
       <span class="sound">tom</span>
     </div>
-    <div data-key="76" class="key">
+    <div data-key="L" class="key">
       <kbd>L</kbd>
       <span class="sound">tink</span>
     </div>
   </div>
 
-  <audio data-key="65" src="sounds/clap.wav"></audio>
-  <audio data-key="83" src="sounds/hihat.wav"></audio>
-  <audio data-key="68" src="sounds/kick.wav"></audio>
-  <audio data-key="70" src="sounds/openhat.wav"></audio>
-  <audio data-key="71" src="sounds/boom.wav"></audio>
-  <audio data-key="72" src="sounds/ride.wav"></audio>
-  <audio data-key="74" src="sounds/snare.wav"></audio>
-  <audio data-key="75" src="sounds/tom.wav"></audio>
-  <audio data-key="76" src="sounds/tink.wav"></audio>
-
-<script>
-
-</script>
+  <audio data-key="A" src="sounds/clap.wav"></audio>
+  <audio data-key="S" src="sounds/hihat.wav"></audio>
+  <audio data-key="D" src="sounds/kick.wav"></audio>
+  <audio data-key="F" src="sounds/openhat.wav"></audio>
+  <audio data-key="G" src="sounds/boom.wav"></audio>
+  <audio data-key="H" src="sounds/ride.wav"></audio>
+  <audio data-key="J" src="sounds/snare.wav"></audio>
+  <audio data-key="K" src="sounds/tom.wav"></audio>
+  <audio data-key="L" src="sounds/tink.wav"></audio>
 
+<script src="app.js"></script>
 
 </body>
 </html>
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
@@ -30,6 +30,7 @@ body,html {
   color: white;
   background: rgba(0,0,0,0.4);
   text-shadow: 0 0 .5rem black;
+  z-index:10;
 }
 
 .playing {

diff --git a/02 - JS and CSS Clock/app.js b/02 - JS and CSS Clock/app.js
@@ -0,0 +1,30 @@
+const secondHand = document.querySelector(".second-hand");
+const minuteHand = document.querySelector(".min-hand");
+const hourHand = document.querySelector(".hour-hand");
+
+console.log(secondHand);
+const moveClocks = () => {
+  const now = new Date();
+  const seconds = now.getSeconds();
+  const secondsDegrees = (seconds / 60) * 360 + 90;
+  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
+  if (seconds === 0) {
+    secondHand.style.transition = "all 0s";
+  }
+
+  const minute = now.getMinutes();
+  const minutesDegrees = (minute / 60) * 360 + 90;
+  minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
+  if (minutes === 0) {
+    minuteHand.style.transition = "all 0s";
+  }
+
+  const hour = now.getHours();
+  const hoursDegrees = (hour / 60) * 360 + 90;
+  hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
+  if (hours === 0) {
+    hourHand.style.transition = "all 0s";
+  }
+};
+
+setInterval(moveClocks, 1000);
diff --git a/02 - JS and CSS Clock/index-START.html → 02 - JS and CSS Clock/index.html b/02 - JS and CSS Clock/index-START.html → 02 - JS and CSS Clock/index.html
@@ -5,8 +5,6 @@
   <title>JS + CSS Clock</title>
 </head>
 <body>
-
-
     <div class="clock">
       <div class="clock-face">
         <div class="hand hour-hand"></div>
@@ -43,9 +41,9 @@
       position: relative;
       padding: 2rem;
       box-shadow:
-        0 0 0 4px rgba(0,0,0,0.1),
-        inset 0 0 0 3px #EFEFEF,
-        inset 0 0 10px black,
+      0 0 0 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);
     }
 
@@ -61,14 +59,16 @@
       height: 6px;
       background: black;
       position: absolute;
+      transition: all 0.1s;
+      transition-timing-function:cubic-bezier(0.5, 2.7, 0.58, 1);
+      transform: rotate(90deg);
+      transform-origin: 100%;
       top: 50%;
     }
 
-  </style>
-
-  <script>
-
+    </style>
 
-  </script>
+    <script src="app.js">
+    </script>
 </body>
 </html>
diff --git a/03 - CSS Variables/app.js b/03 - CSS Variables/app.js
@@ -0,0 +1,14 @@
+const inputs = document.querySelectorAll(".controls input");
+
+console.log(inputs);
+const updateValues = (e) => {
+  console.log(e.target);
+  const suffix = e.target.dataset.sizing || "";
+  document.documentElement.style.setProperty(
+    `--${e.target.name}`,
+    e.target.value + suffix
+  );
+};
+
+inputs.forEach((input) => input.addEventListener("change", updateValues));
+inputs.forEach((input) => input.addEventListener("mousemove", updateValues));
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -21,7 +21,17 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
+    :root {
+      --base: blue;
+      --blur: 10px;
+      --spacing: 10px;
+    }
 
+    img{
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur))
+    }
     /*
       misc styles, nothing to do with CSS variables
     */
@@ -44,8 +54,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     }
   </style>
 
-  <script>
-  </script>
+  <script src="app.js"></script>
 
 </body>
 </html>
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
@@ -34,32 +34,64 @@
       'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
       'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
     ];
-    
+
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
 
+    const oldInventors = inventors.filter(inventor => inventor.year >= 1500 && inventor.year <= 1600)
+
+    console.table(oldInventors)
+
     // Array.prototype.map()
     // 2. Give us an array of the inventors first and last names
 
+    const firstLast = inventors.map(inventor => {
+      return `${inventor.first} ${inventor.last}`
+    })
+    console.log(firstLast)
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
+    const inventorSorted = inventors.sort((a,b) => a.year < b.year ? -1 : 1)
 
+    console.table(inventorSorted)
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live all together?
-
+    const inventorsLifes = inventors.reduce((total,inventor)=>{
+      return total + (inventor.passed - inventor.year)
+    },0)
+    console.log(inventorsLifes)
     // 5. Sort the inventors by years lived
-
+    const inventorsSortedByYears = inventors.sort((a,b)=>{
+      const aYears = a.passed - a.year;
+      const bYears = b.passed - b.year;
+      return aYears > bYears ? -1 : 1;
+    })
+    console.table(inventorsSortedByYears)
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
+     const peopleName = people.sort((a,b) => {
+      const Aname =  a.slice(", ");
+      const Bname = b.slice(", ");
+      return Aname > Bname ? 1 : -1;
+     })
 
+     console.log(peopleName)
     // 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' ];
+    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'walk', 'skateboard' ];
 
+    const dataSummedUp = data.reduce((obj,item)=>{
+      if(!obj[item]){
+        obj[item] = 0;
+      }
+      obj[item]++;
+      return obj
+    },{})
+    console.log(dataSummedUp)
   </script>
 </body>
 </html>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
@@ -14,18 +14,19 @@
       font-size: 20px;
       font-weight: 200;
     }
-    
+
     body {
       margin: 0;
     }
-    
+
     *, *:before, *:after {
       box-sizing: inherit;
     }
 
     .panels {
       min-height: 100vh;
       overflow: hidden;
+      display:flex;
     }
 
     .panel {
@@ -43,6 +44,9 @@
       font-size: 20px;
       background-size: cover;
       background-position: center;
+      flex:1;
+      display:flex;
+      flex-direction: column;
     }
 
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
@@ -56,21 +60,31 @@
       margin: 0;
       width: 100%;
       transition: transform 0.5s;
+      display:flex;
+      justify-content: center;
+      align-items: center;
+      flex: 1 0 auto;
+
     }
+    .panel > *:first-child {transform: translateY(-100%);}
+    .panel > *:last-child {transform: translateY(100%);}
+    .panel.open-active > *:first-child {transform: translateY(0);}
+    .panel.open-active > *:last-child {transform: translateY(0);}
 
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
       text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
     }
-    
+
     .panel p:nth-child(2) {
       font-size: 4em;
     }
 
     .panel.open {
       font-size: 40px;
+      flex:5;
     }
 
   </style>
@@ -105,6 +119,22 @@
   </div>
 
   <script>
+const panels = document.querySelectorAll(".panel");
+ const toggleOpenPanels = (e) => {
+  e.target.classList.toggle("open");
+ }
+ const toggleBringText = (e) => {
+   if(e.propertyName.includes("flex")){
+     e.target.classList.toggle("open-active");
+
+   }
+ }
+
+
+panels.forEach(panel => {
+  panel.addEventListener("click",toggleOpenPanels);
+  panel.addEventListener("transitionend", toggleBringText)
+})
 
   </script>