2y2son4/js-30-days-challenge

Wes Bos' 30 days Vanilla JS challenge. No frameworks, no compilers, no fuss.

Wes Bos' 30 days Vanilla JS challenge

No frameworks, no compilers, no fuss;

• 01 | 02 | 03 | 04 | 05 | 06 |
• 07 | 08 | 09 | 10 | 11 | 12 |
• 13 | 14 | 15 | 16 | 17 | 18 |
• 19 | 20 | 21 | 22 | 23 | 24 |
• 25 | 26 | 27 | 28 | 29 | 30 |

Day 01: Drum Kit.

HTML

• <kbd>

JS

• Element.addEventLister()
• Element.classList
  • .add()
  • .remove()
• document.querySelector()
• document.querySelectorAll()
• Event.keyCode
• audio
  • .play()
  • .currentTime
• Array.prototype.forEach

Click here to check the layout.

Volver al inicio.

Day 02: Clock.

CSS

• transform:
  • rotate()
• transform-origin
• transition-timing-function:
  • cubic-bezier

JS

• Date()
  • .getSeconds()
  • .getMinutes()
  • .getHours()
• Element.style
• setInterval()

Click here to check the layout.

Volver al inicio.

Day 03: CSS variables.

CSS

• :root
• variables
• grid

JS

• Node list
• forEach
• HTMLElement.dataset
• document.documentElement

Click here to check the layout.

Volver al inicio.

Day 04: Array Cardio day 1.

JS

• console.table()
• .filter()
• .map()
• .reduce()
• .sort()
• Array.from
• Destructuring
• Spread operator
• Ternary conditional

Click here to check the console.

Volver al inicio.

Day 05: Flex panels.

CSS

• flexbox
• :first-child
• :last-child
• :nth-child()

JS

• Element.classList.toggle()
• Document.querySelectorAll()
• .forEach()

Click here to check the layout.

Volver al inicio.

Day 06: Ajax type ahead.

JS

• fetch()
• .then() → promises.
• .match()
• .replace()
• .join()
• Regular expressions

Click here to check the search.

Volver al inicio.

Day 07: Array Cardio day 2.

JS

• .some()
• .every()
• .find()
• .findIndex()
• .slice()
• Date().getFullYear()

Click here to check the console.

Volver al inicio.

Day 08: Fun with HTML canvas.

HTML

-<canvas

JS

• HTMLCanvasElement.getContext()
  • CanvasRenderingContext2d
    • strokeStyle
    • lineJoin
    • lineCap
    • lineWidth
    • .beginPath()
    • .moveTo()
    • .lineTo()
    • .stroke()

Click here to check the result.

Volver al inicio

Day 09: Console treats and tricks.

JS

• console.log()
  • Regular
  • Interpolated
  • Styled
• console.warn()
• console.error()
• console.info()
• console.assert()
• console.dir()
• console.group() | console.groupEnd()
• console.groupCollapsed()
• console.count()
• console.time() | console.timeEnd()
• console.table()

Click here to check the console.

Volver al inicio.

Day 10: Checkboxes task list.

JS

• .forEach()
• for...of
• localStorage.setItem()
• localStorage.getItem()
• JSON.stringify()

Click here to check the layout.

Volver al inicio.

Day 11: Custom HTML Video Player.

HTML

• <video>

JS

• parseFloat()
• video.pause | video.play() | ...

Click here to check the layout.

Volver al inicio.

Day 12: KONAMI Code.

JS

• push()
• splice()
• cornify_add()

Click here to check the layout.

Volver al inicio.

Day 13: Chiquito's slide in on scroll images.

JS

• setTimeout()
• clearTimeout()
• scrollY
• offsetTop

Click here to check the layout.

Volver al inicio.

Day 14: Objects and arrays cardio (copy vs reference).

JS

• .slice()
• .concat()
• ...
• Array.from()
• Object.assign()
• JSON.parse()
• JSON.stringify()

Volver al inicio.

Day 15: Local storage and event delegation.

JS

• localStorage.setItem()
• localStorage.getItem()
• JSON.stringify()
• JSON.parse()
• event.preventDefault()

Click here to check the layout.

Volver al inicio.

Day 16: CSS shadow effect.

JS

• offsetWidth, offsetHeight, offsetX, offsetY, offLeft, offsetTop...

Volver al inicio.

Day 17: Sort list.

JS

• .replace()
• .sort()
• .map()
• .join()

Volver al inicio.

Day 18: Reduce and calculate total time.

JS

• .dataset
• .split()
• parseFloat()
• .reduce()

Volver al inicio.

Day 19: Unreal Webcam.

HTML

• <video>

JS

• canvas.getContext('2d')

• .getUserMedia()

• .catch()

• .play()

• .toDataURL

• .createElement()

• .setAttribute()

• .insertBefore()

• .firstChild

  Volver al inicio.

Day 20: Speech Recognition.

JS

• SpeechRecognition()
  • .interimResults
  • .lang
• .createElement()
• .appendChild()
• .map()
• .join()
• .replace()
• .textContent()

Volver al inicio.

Day 21: Geolocation.

JS

• .geolocation.watchPosition()

Volver al inicio.

Day 22: Follow along links.

JS

• getBoundingClientRect()

Click here to check the layout.

Volver al inicio.

Day 23: The Voicenator.

JS

• SpeechSynthesisUtterance()
• speechSynthesis
  • .cancel()
  • .getVoices()
• .find()
• .bind()

Volver al inicio.

Day 24: Sticky nav.

JS

• Element.classList
  • .add()
  • .remove()
• .offsetTop
• .scrollY

Volver al inicio.

Day 25: capture, propagation and bubbling.

JS

• addEventListener
• ev.stopPropagation()

Volver al inicio.

Day 26: Follow along dropdown.

JS

• Element.classList
• getBoundingClientRect()
• .style.setProperty()

Click here to check the layout.

Volver al inicio.

Day 27: Click and drag.

JS

• .pageX
• .offsetLeft
• mousedown
• mouseleave
• mouseup
• mousemove

Click here to check the layout.

Volver al inicio.

Day 28: Video speed controller.

JS

Volver al inicio.

Day 29: Countdown clock.

JS

Volver al inicio.

Day 30: Whack-a-Ale!.

JS

Volver al inicio.