Javascript30

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

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-numberfunctioncompare(a,b){if(aislessthanbbysomeorderingcriterion){return-1;}if(aisgreaterthanbbytheorderingcriterion){return1;}// a must be equal to breturn0;}// compare numberfunctioncompareNumbers(a,b){//ascending orderreturna-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()

constteam2=players.slice();

Array.concat()

constteam2=[].concat(players);

Spread opearator (ES6)

constteam2=[...players];

Array.from (ES6)

constteam5=Array.from(players);

Object shallow copy:

Object.assign()

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

Object deep copy:
- JSON.parse(), JSON.stringify()
```
constdev2=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

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

Day16 Event Delegation

functionshadow(){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

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

Taking snapshot and display on the screen

functiontakePhoto(){//sound effectsnap.currentTime=0;snap.play();//save snapshot as a link with image on itconstdata=canvas.toDataURL('image/jpeg');constlink=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

functionredEffect(pixels){for(leti=0;i<pixels.data.length;i+=4){pixels.data[i+0]=pixels.data[i+0]+100;// REDpixels.data[i+1]=pixels.data[i+1]-50;// GREENpixels.data[i+2]=pixels.data[i+2]*0.5;// Blue}returnpixels;}letpixels=ctx.getImageData(0,0,canvas.width,canvas.height);pixels=redEffect(pixels);

FilesExpand file tree

README.md

Latest commit

History