/Javascript30

30 day vanilla JS coding challenge.

Primary LanguageHTML

Javascript30 - 30 day Javascript Challenge

alt text

This repository tracks the progress of 30 projects from the JavaScript30 course by Wes Bos.

About

The challenge is to build 30 different things in 30 days with vanilla JavaScript (no frameworks, libraries, etc.).

Contents

  1. Javascript Drum Kit - Key codes, listening to events and playing sounds.
  2. JS + CSS Clock - Rotation in css and working with time in JS (Contributed by Rémy Beumier and Jasmine Lang).
  3. Playing with CSS Variables and JS - Declaring and using CSS variables and updating their values using JS.
  4. Array Cardio Day 1 - Working with array methods: Filter, Map, Sort and Reduce.
  5. Flex Panels Image Gallery - CSS Flexbox combined with transitions.
  6. Ajax Type Ahead - Ajax promise, fetch, spread operator and regular expressions.
  7. Array Cardio Day 2 - Other array methods: Some, Every, Find and FindIndex.
  8. Fun With HTML5 Canvas - Fundamentals of manipulating a canvas element.
  9. 14 Must Know Dev Tools Tricks - Console tricks: console.error(), console.assert(), console.time() and more.
  10. Hold Shift to Check Multiple Checkboxes
  11. Custom HTML5 Video Player - Getting elements with querySelector and querySelectorAll, setting listeners and building functions that deal with that elements.
  12. Key Sequence Detection(KONAMI CODE) - Detect a key sequence using array and the Array.splice() method.
  13. Slide In on Scroll - Window events and debouncing.
  14. Objects and Arrays - Reference VS Copy - Differences between copy and reference with arrays and objects and how to make them.
  15. LocalStorage and Event Delegation - Persisting data even with page refreshing and listen for an event in a parent element.
  16. CSS Text Shadow Mouse Move Effect - Destructuring and updating the textShadow CSS property.
  17. Sorting Band Names without articles - Using Array.sort() and regular expression to sort a string array without "A", "An" or "The".
  18. Tally String Times with Reduce - Using Array.reduce() to add up times from an HTML unordered List.
  19. Unreal Webcam Fun - Accessing webcam to take pictures, add filters and download them.
  20. Native Speech Recognition - Recognizing speech and transcripting it to the screen creating paragraphs in the DOM by JS.
  21. Geolocation based Speedometer and Compass - Getting heading and speed from Geolocation.
  22. Follow Along Links - Applying a CSS hover effect in a series of links. Using getBoundClientRect().
  23. Speech Synthesis - Doing Text to Voice, using the Speech Synthesis API that comes in most modern browsers.
  24. Sticky Nav - Fixing a navigation bar when scrolling down the page.
  25. Event Capture, Propagation, Bubbling and Once - More about the .addEventListener() function, that has been used throughout almost all codes from this project.
  26. Stripe Follow Along Dropdown - Applying the effect that Stripe has in its navigation bar.
  27. Click and Drag to Scroll - Applying effect to click and drag with the mouse.
  28. Video Speed Controller UI - Combining "mousemove" events with HTML5 video.
  29. Countdown Clock - Creating a countdown clock with button options and a custom form.
  30. Whack A Mole Game - A little bit of fun to end the project.

Observation: To run the codes from days 19, 20 and 21, you need to run npm install and npm start in the respective directory. (Needs Node.js to be installed).