Skip to content

vanntile/JavaScript30

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JavaScript30

Wes Bos' (@wesbos) JavaScript 30 Day Challenge. This is a plain vanilla JavaScript exercise, without any libraries, transpilers or frameworks. I have a README for each day when I have added custom functionality, that you can check below.

My own implementations can be found here.

Check the course at https://JavaScript30.com

I have beautified the HTML and CSS using atom-beautify and linted the JavaScript using JavaScript Standard Style.

Some Concepts learned

  • Using methods and properties from the following Web APIs and interfaces
    • MouseEvent, HTMLMediaElement, Fullscreen, WebStorage, Navigator, Geolocation, Canvas, Web Speech
  • Document Object Model Node List
  • ES6 Promises, template literals, array spreading, destructuring parameters, typed arrays, arrow function
  • transitioned event
  • use of the data attribute for custom element data
  • RegEx string filter
  • parent-children event delegation
  • JSON.stringify()
  • local servers (through npm packages)
  • and others

Table of contents

  1. JavaScript Drum Kit and my notes
  2. JS + CSS Clock
  3. CSS Variables
  4. Array Cardio, Day 1
  5. Flex Panel Gallery and my notes
  6. Type Ahead and my notes
  7. Array Cardio, Day 2
  8. Fun with HTML5 Canvas
  9. Dev Tools Domination
  10. Hold Shift and Check Checkboxes and my notes
  11. Custom Video Player and my notes
  12. Key Sequence Detection
  13. Slide in on Scroll
  14. JavaScript References vs. Copying
  15. LocalStorage and my notes
  16. Mouse Move Shadow
  17. Sort Without Articles
  18. Adding Up Times with Reduce
  19. Webcam Fun and my notes
  20. Speech Detection (not working in browsers for now)
  21. Geolocation and my notes
  22. Follow Along Link Highlighter
  23. Speech Synthesis and my notes
  24. Sticky Nav
  25. Event Capture, Propagation, Bubbling, and Once
  26. Stripe Follow Along Nav and my notes
  27. Click and Drag
  28. Video Speed Controller
  29. Countdown Timer
  30. Whack A Mole

Releases

No releases published

Packages

No packages published

Languages

  • HTML 52.5%
  • JavaScript 24.5%
  • CSS 23.0%