challenge 1-11

Author: marcoSven

01 - JavaScript Drum Kit/index-START.html

@@ -58,6 +58,49 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  const keys = document.querySelectorAll('.key'),
+    audio = document.querySelectorAll('audio'),
+    soundsMap = ( () => {
+      const map = new Map();
+
+      audio.forEach( sound => map.set( sound.dataset.key, sound ) );
+
+      return map;
+
+    })(),
+    click = function (e) {
+      play( soundsMap.get(this.dataset.key), this );
+    },
+    transition = function (e) {
+      if( e.propertyName === 'transform' ) {
+        this.classList.remove('playing')
+      }
+    },
+    play = (sound, el) => {
+
+      if( ! sound ) {
+        return;
+      }
+
+      el.classList.add('playing');
+      sound.currentTime = 0;
+      sound.play();
+
+    };
+
+
+keys.forEach( function(key) {
+  key.addEventListener( 'click', click )
+  key.addEventListener( 'transitionend', transition )
+});
+
+window.addEventListener('keyup', function(event) {
+  const keyCode = event.keyCode.toString(),
+    el = document.querySelector(`.key[data-key="${keyCode}"]`)
+  play( soundsMap.get( keyCode ), el );
+});
+
+
 
 </script>
 

02 - JS and CSS Clock/index-START.html

@@ -9,9 +9,9 @@
 
     <div class="clock">
       <div class="clock-face">
-        <div class="hand hour-hand"></div>
-        <div class="hand min-hand"></div>
-        <div class="hand second-hand"></div>
+        <div class="hand hour-hand transition"></div>
+        <div class="hand min-hand transition"></div>
+        <div class="hand second-hand transition"></div>
       </div>
     </div>
 
@@ -62,11 +62,51 @@
       background: black;
       position: absolute;
       top: 50%;
+      transform: rotate(90deg);
+      transform-origin: 100%;
+    }
+    .hour-hand {
+      left: 25%;
+      height: 10px;
+      width: 25%
+    }
+    .transition {
+      transition: all 0.5s;
+      transition-timing-function: cubic-bezier(0.15, 3.53, 0.58, 1);
     }
 
+
   </style>
 
   <script>
+    const setTime = (e) => {
+        const date = new Date,
+          secondsDegrees = ( ( date.getSeconds() / 60 ) * 360 ) + 90,
+          minuteDegree = ( ( date.getMinutes() / 60 ) * 360 ) + 90,
+          hourDegree = ( ( date.getHours() / 12 ) * 360 ) + 90,
+          handSec = document.querySelector('.second-hand'),
+          handMin = document.querySelector('.min-hand'),
+          handHour = document.querySelector('.hour-hand');
+        if ( secondsDegrees === 90 ) {
+          handSec.classList.remove('transition');
+        } else if ( secondsDegrees === 96 ) {
+          handSec.classList.add('transition');
+        }
+
+        if ( secondsDegrees >= 444 ) {
+
+        } else if ( secondsDegrees <= 96 ) {
+          console.log( ': ', secondsDegrees );
+        }
+        handSec.style.transform = `rotate(${secondsDegrees}deg)`;
+        handMin.style.transform = `rotate(${minuteDegree}deg)`;
+        handHour.style.transform = `rotate(${hourDegree}deg)`;
+      },
+      setHour = () => {
+
+      },
+      intSec = setInterval(setTime, 1000);
+
 
 
   </script>

03 - CSS Variables/index-START.html

@@ -26,6 +26,18 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       misc styles, nothing to do with CSS variables
     */
 
+    :root {
+      --base: #888888;
+      --spacing: 10px;
+      --blur: 10px;
+    }
+
+    img {
+      padding: var(--spacing);
+      background: var(--base);
+      filter: blur(var(--blur));
+    }
+
     body {
       text-align: center;
       background: #193549;
@@ -45,6 +57,15 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
   </style>
 
   <script>
+    const inputs = document.querySelectorAll('.controls input'),
+      update = function(){
+      const docEl = document.documentElement.style,
+        sizing = this.dataset.sizing || '' ;
+      docEl.setProperty(`--${this.id}`, `${this.value}${sizing}`);
+      console.log(this.value)
+    };
+    inputs.forEach( input => input.addEventListener('change', update));
+    inputs.forEach( input => input.addEventListener('mousemove', update));
   </script>
 
 </body>

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

@@ -31,29 +31,48 @@
 
     // Array.prototype.filter()
     // 1. Filter the list of inventors for those who were born in the 1500's
-
+    const bornIn1500 = inventors.filter( i => i.year >= 1500 && i.year < 1600 )
+    console.log( 'bornIn1500: ', bornIn1500 );
     // Array.prototype.map()
     // 2. Give us an array of the inventors' first and last names
+    const firstLastName = inventors.map( i => ( `${i.first} ${i.last}` ) );
+    console.log( 'firstLastName: ', firstLastName );
 
     // Array.prototype.sort()
     // 3. Sort the inventors by birthdate, oldest to youngest
-
+    const sort = inventors.sort( (a,b)=> a.year - b.year )
+    console.log( 'sort: ', sort );
     // Array.prototype.reduce()
     // 4. How many years did all the inventors live?
+    const reduce = inventors.reduce( (lived, i) => (i.passed - i.year) + lived, 0)
+    console.log( 'reduce: ', reduce );
 
     // 5. Sort the inventors by years lived
+    const sortLived = inventors.sort( (a,b) => (a.passed - a.year) - (b.passed - b.year))
+    console.log( 'sortLived: ', sortLived );
 
     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    // const links = document.querySelectorAll('.mw-category a'),
+    //   de = Array.prototype.map.call(links, a => a.innerText)
+    //   .filter(a => a.indexOf('de') !== -1 )
 
 
     // 7. sort Exercise
     // Sort the people alphabetically by last name
-
+    const peopleSort = people.sort((a,b) => a.split(',')[1] < b.split(',')[1] ? -1 : 1 )
+    console.log( 'peopleSort: ', peopleSort );
     // 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 dataReduce = data.reduce((obj, a) => {
+      obj[a] = ! obj[a] ? 1 : obj[a] += 1;
+      return obj;
+    } , {} )
+
+    console.dir(dataReduce)
+
   </script>
 </body>
 </html>

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;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
     }
 
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
@@ -56,20 +60,33 @@
       margin: 0;
       width: 100%;
       transition: transform 0.5s;
+      display: flex;
+      flex: 1 0 auto;
+      justify-content: center;
+      align-items: center;
+    }
+    .panel p:first-child {
+      transform: translateY(-100%);
+    }
+    .panel p:last-child {
+      transform: translateY(100%);
+    }
+    .panel.open-active p:first-child, .panel.open-active  p: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 {
+      flex: 5;
       font-size: 40px;
     }
 
@@ -105,7 +122,25 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel'),
+      togglePanels = function(){
+        panels.forEach( el => {
+          if( this !== el ) {
+            el.classList.remove('open');
+          }
+        });
+        this.classList.toggle('open');
+      },
+      transition = function (e) {
+      if( e.propertyName.includes('flex') ) {
+        this.classList.toggle('open-active');
+      }
+    };
 
+    panels.forEach(function(el) {
+      el.addEventListener('click', togglePanels )
+      el.addEventListener( 'transitionend', transition )
+    })
   </script>
 
 

06 - Type Ahead/index-START.html

@@ -15,7 +15,37 @@
     </ul>
   </form>
 <script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json',
+  cities = [],
+  search = document.querySelector('.search'),
+  suggestions = document.querySelector('.suggestions'),
+  numberWithCommas = function (x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  },
+  filter = function() {
+    const str = this.value.toLowerCase(),
+      filtered = cities.filter( loc=> loc.city.toLowerCase().indexOf(str) !== -1 || loc.state.toLowerCase().indexOf(str) !== -1 )
+      .map( a => {
+        const reg = new RegExp( str, 'gi' ),
+          city = a.city.replace(reg, `<span class="hl">${this.value}</span>`),
+          state = a.state.replace(reg,`<span class="hl">${this.value}</span>`);
+
+        return  `<li>
+        <span class="name">${city}, ${state}</span>
+        <span class="population"> ${numberWithCommas(a.population)}</span>
+        </li>`;
+      })
+      .join('');
+
+    suggestions.innerHTML = filtered;
+
+  };
+
+  search.addEventListener('keyup', filter )
+
+  fetch(endpoint)
+          .then(a => a.json() )
+          .then(a => cities.push(...a))
 
 </script>
 </body>

07 - Array Cardio Day 2/index-START.html

@@ -26,15 +26,40 @@
 
     // Some and Every Checks
     // Array.prototype.some() // is at least one person 19 or older?
+    const some19 = people.some( p => ( (new Date).getFullYear() ) - p.year >= 19 )
+    console.log( 'some19: ', some19 );
     // Array.prototype.every() // is everyone 19 or older?
+    const every19 = people.every( p => ( (new Date).getFullYear() ) - p.year >= 19 )
+    console.log( 'every19: ', every19 );
+
 
     // Array.prototype.find()
     // Find is like filter, but instead returns just the one you are looking for
     // find the comment with the ID of 823423
+    const find = comments.find(c => c.id === 823423 )
+    console.log( 'find: ', find );
 
     // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
+    const index = comments.findIndex( c => c.id === 823423 ),
+
+    newComments = [
+
+      ...comments.slice(0,index),
+      ...comments.slice(index +1)
+
+
+    ];
+
+    console.log( 'newComments: ', newComments );
+
+
+    //comments.splice( index, 1 );
+
+    console.log( 'comments: ', comments );
+
+
 
   </script>
 </body>