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

---

20+ Web Projects With Vanilla JavaScript

This is the main repository for all of the projects in the course.

• Course Link
• Course Info Website

#	Project	Live Demo
01	Form Validator	Live Demo
02	Movie Seat Booking	Live Demo
03	Custom Video Player	Live Demo
04	Exchange Rate Calculator	Live Demo
05	DOM Array Methods Project	Live Demo
06	Menu Slider & Modal	Live Demo
07	Hangman Game	Live Demo
08	Mealfinder App	Live Demo
09	Expense Tracker	Live Demo
10	Music Player	Live Demo
11	Infinite Scrolling	Live Demo
12	Typing Game	Live Demo
13	Speech Text Reader	Live Demo
14	Memory Cards	Live Demo
15	LyricsSearch App	Live Demo
16	Relaxer App	Live Demo
17	Breakout Game	Live Demo
18	New Year Countdown	Live Demo
19	Sortable List	Live Demo
20	Speak Number Guessing Game	Live Demo

NOTE ON PULL REQUESTS: All of these projects are part of the course. While I do appreciate people trying to make some things prettier or adding new features, we are only accepting pull requests and looking at issues for bug fixes so that the code stays inline with the course