540792740 / jsproject30 Goto Github PK

####1. DrumKit

• This project will provide a simulation drum by click keyboard
• Add Class: key.classList.add('playing');
• document.querySelectorAll('.key').forEach(key => ...)

####2. Clock

• This project is create a clock with hour-hand, min-hand and sec-hand.
• transition-timing-function: cubic-bezier(0.16, 0.24, 0.57, 1.29);
• const now = new Date();
  const second = now.getSeconds();
const min = now.getMinutes();
• document.querySelector('.second-hand').style.transform = rotate(${minDegrees}deg);
• transition: all 0.5s;
• transform-origin: 100%; -> move hand to the end ####3. Update CSS variables with JS
• This project is the way to dynamic change Spacing and blur.
• <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
• Using --space by define in :root{] and using with --spacing
:root{--spacing: 10px;}
img{ padding: var(--spacing);}
• document.querySelectorAll('.controls input')
forEach(input => input.addEventListener('change', handleUpdate))

####4. Array Cardio

• array.filter(inventor => (inventor.year >= 1500))

• console.table(fifteen) -> table console

• const fullNames = inventors.map(inventor => inventor.first + " " + inventor.last)
const fullNames = inventors.map(inventor => ${inventor.first} ${inventor.last})

• const links = Array.from(category.querySelectorAll('a')); const links = [...category.querySelectorAll('a')];

• Hash table

  : `const transportation = data.reduce(function (obj, item) {` `if(!obj[item]){obj[item] = 0;}`
  `obj[item]++;`
  `return obj`
  `},{});`

####5. Flex Panel

• justify-content: center;
align-items: center;
• .panel > *:first-child{transform: translateY(-100%);}
• myDIV:hover { width: 400px;} document.getElementById("myDIV").addEventListener("transitionend", myFunction);

####6. Ajax

• function numberWithCommas(x){ return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');}
• Promise.then(data => arr.push(...data)

####7. Array

• const isAdult = people.some(person => (new Date()).getFullYear() - 19 >= person.year)
• const isAdult = people.every(person => (new Date()).getFullYear() - 19 >= person.year)
• const isAdult = people.find (comment => comment.id === 823423)
• const index = comments.findIndex(comment => comment.id === 823423);
• Delete const newCommand = [
...comments.slice(0, index),
...comments.slice(index + 1)
];

• Make line become round:
  ctx.lineJoin ='round';
ctx.lineCap = 'round';
ctx.lineWidth = 20

• The way to change color:
  ctx.strokeStyle = hsl(${hue}, 100%, 50%);

• console.group()
console.groupEnd()

• console.time('for loop');
for(let i = 0; i < 1000; i++){}
console.timeEnd('for loop');