Javascript30

This is a vanilla javascript coding challenge from JavaScript30 created by Wes Bos.

My Demo Site

Day1

• HTML: data attribute, audio
• CSS: calc, flex, vertical/horizontal alignemnt, box-sizing, justify-content
  • JS: document.querySelector

Day2

• CSS: transform-origin, transition-timing-function

Day3

• HTML: dataset is an object that contain all the attributes with "data-" prefix on that element
• CSS: set css variable on the root pseudo-class

:root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
}

use var() to obtain the value

img {
    width: 60%;
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
  }

alter the value of the css variable by setting style properties

document.documentElement.style.setProperty("--base", "#ffffff");

• JS: querySelectorAll return a node list instead of an array

Day4

• Array.prototype.sort

  Syntax

  arr.sort([compareFunction])

  • If compareFunction is not supplied, elements are sorted by converting them to strings and comparing strings in Unicode code point order
  • If compareFunction(a, b) returns < 0, sort a to an index lower than b, i.e. a comes first.
  • If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other
  • If compareFunction(a, b) returns > 0, sort b to a lower index than a.

  Example

  //compare non-number
  function compare(a, b) {
    if (a is less than b by some ordering criterion) {
      return -1;
    }
    if (a is greater than b by the ordering criterion) {
      return 1;
    }
    // a must be equal to b
    return 0;
  }
  
  // compare number
  function compareNumbers(a, b) {
    //ascending order
    return a - b;
  }

• Array.prototype.map

• Array.prototype.filter

• Array.prototype.reduce

Day5

• CSS: Flexbox usage, transition, transform,
• JS: use element.classList.toggle('className')to add/remove class on the element.

Day6

• CSS: use element.inlineHTML to replace dom.
• JS: regExp() usage, spread expression usage, 'keyup' eventlistener

Day7

• Array.prototype.some
• Array.prototype.every
• Array.prototype.find
• Array.prototype.findIndex
• Array.prototype.slice: copy a new array
• Array.prototype.splice: manipulate the original array

Day8

 - html canvas usage

Day14 Object and Array copy

• Array shallow copy:
  • Array.slice()

    const team2 = players.slice();

  • Array.concat()

    const team2 = [].concat(players);

  • Spread opearator (ES6)

    const team2 = [...players];

  • Array.from (ES6)

    const team5 = Array.from(players);

• Object shallow copy:
  • Object.assign()

    const cap2 = Object.assign({}, person, { number: 99, age: 12 });

• Object deep copy:
  • JSON.parse(), JSON.stringify()

    const dev2 = JSON.parse(JSON.stringify(wes));

Day15 Local Storage and Event delegation

• localstorage usage

  localStorage.setItem("item", JSON.stringify(items));
  JSON.parse(localStorage.getItem('item')

• Event Delegation: listen to parent dom and react using e.target to distinguish which child is triggered

    function toggleDone(e){
      //skip this unless its a input 
      if(!e.target.matches('input')) return;
      // do something
    }  
    itemsList.addEventListener('click', toggleDone);

Day16 Event Delegation

    function shadow(){   
      if(this !== e.target){
        //'this' will always be hero, but 'e.target' will change depends on which element(child) is being hoverd
      }
    }
    hero.addEventListener('mousemove', shadow);

Day19 Filter Cam

• How to get video stream from the Webcam and display on video element

  function getVideo(){
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(localMediaStream => {
      video.src = window.URL.createObjectURL(localMediaStream);
      video.play();
    })
  }

• Taking snapshot and display on the screen

  function takePhoto(){
    //sound effect
    snap.currentTime = 0;
    snap.play();
    //save snapshot as a link with image on it
    const data = canvas.toDataURL('image/jpeg');
    const link = document.createElement('a');
    link.href = data;
    link.setAttribute('download', 'handsome');
    link.innerHTML = `<image src=${data} ></image>`;
    strip.insertBefore(link, strip.firstChild);
  }

• Filter is to manipulate pixels of the snapshot

    function redEffect(pixels) {
      for(let i = 0; i < pixels.data.length; i+=4) {
        pixels.data[i + 0] = pixels.data[i + 0] + 100; // RED
        pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
        pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
      }
      return pixels;
    }
    
    let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    pixels = redEffect(pixels);