https://github.com/shovanch/js30

🔥 Projects for Javascript30
https://github.com/shovanch/js30

javascript30

Last synced: 6 months ago
JSON representation

🔥 Projects for Javascript30

• Host: GitHub
• URL: https://github.com/shovanch/js30
• Owner: shovanch
• Created: 2018-02-01T15:50:45.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-20T09:15:39.000Z (almost 8 years ago)
• Last Synced: 2025-03-31T09:44:56.721Z (10 months ago)
• Topics: javascript30
• Language: HTML
• Homepage:
• Size: 990 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Javascript30

### Projects for Javascript30 by [Wes Bos](https://twitter.com/wesbos)

* **[1. JS Drum kit](https://shovanch.com/JS30/01%20-%20JS%20Drum%20Kit/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/01%20-%20JS%20Drum%20Kit/README.md)_**

  **_Lessons:_** Data-attributes, how to select elements with data-attributes, using audio element and manipulating it with various methods in JS, transition end event, how to add eventlistener to a nodelist of elements.

* **[2. JS and CSS clock](https://shovanch.com/JS30/02%20-%20JS%20and%20CSS%20Clock/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/02%20-%20JS%20and%20CSS%20Clock/README.md)_**

  **_Lessons:_** Manipulating the CSS transform properties based on calculated JS variables, executing a function continuosly after a set period of time using `setInterval()` method, Using the `Date()` object, transform-origin property.

* **[3. CSS Variables with JS](https://shovanch.com/JS30/03%20-%20CSS%20Variables/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/03%20-CSS%20Variables/README.md)_**

  **_Lessons:_** Using CSS variales, updating the variables using JS, mousemove event, accessing the CSS variables using documentElement property and setProperty method, dataset property

* **[4. Working with Array methods 1](https://shovanch.com/JS30/04%20-%20Array%20Cardio%20Day%201/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/04%20-%20Array%20Cardio%20Day%201/README.md)_**

  **_Lessons:_** Using array.prototype methods => filter, sort, map, reduce. Changing a nodelist of items into an array using i) `Array.from()` ii) [..nodelist] spread operator

* **[5. Flex Panel Gallery](https://shovanch.com/JS30/05%20-%20Flex%20Panel%20Gallery/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md)_**

  **_Lessons:_** Moving element in and out view with translate property. Triggering an event after a transition event has finished its work.

* **[6. Fetch API type ahead](https://shovanch.com/JS30/06%20-%20Type%20Ahead/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/06%20-%20Type%20Ahead/README.md)_**

  **_Lessons:_** How to use Fetch API, Using RegExp to filter user input value from an array of data and inserting the result into the DOM.

* **[7. Working with Array methods 2](https://shovanch.com/JS30/07%20-%20Array%20Cardio%20Day%202/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/07%20-%20Array%20Cardio%20Day%202/README.md)_**

  **_Lessons:_** Using array methods : `.some()` , `.every()`, `.find()`, `.findIndex()`

* **[8. Fun with HTML5 Canvas](https://shovanch.com/JS30/08%20-%20Fun%20with%20HTML5%20Canvas/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/08%20-%20Fun%20with%20HTML5%20Canvas/README.md)_**

  **_Lessons:_** How to use HTML5 canvas, context and various methods related to it (`strokeStyle, lineTo, moveTo` etc...), How to draw on the canvas on mousedown, changing the color hue and linewidth with strokes

* **[9. Useful Devtools tricks](https://shovanch.com/JS30/09%20-%20Dev%20Tools%20Domination/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/09%20-%20Dev%20Tools%20Domination/README.md)_**

  **_Lessons:_** Cool devtools commands like `console.assert()` to perform basic tests, `console.dir()` to get detailed info about an element, `console.time()` to view runtime of a task, `console.group()` to group similar infos

* **[10. Hold shift and check multiple checkboxes](https://shovanch.com/JS30/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md)_**

  **_Lessons:_** How to fire events only a certain key is pressed, using flag variables to set flip checkboxes

* **[11. Custom Video Player](https://shovanch.com/JS30/11%20-%20Custom%20Video%20Player/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/11%20-%20Custom%20Video%20Player/README.md)_**

  **_Lessons:_** Using HTML5 video element and its various methods and properties, using mousedown flag variable to implement drag and update functionality, updating progress bar with JS and `flex-basis` property,

* **[12. Key Sequence Detection](https://shovanch.com/JS30/12%20-%20Key%20Sequence%20Detection/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/12%20-%20Key%20Sequence%20Detection/README.md)_**

  **_Lessons:_** Getting key from keyup event and storing in an array, maintaining an array length using `.splice()`.

* **[13. Slide in on scroll](https://shovanch.com/JS30/13%20-%20Slide%20in%20on%20Scroll/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md)_**

  **_Lessons:_**

* **[14. JS Reference VS Copying](https://shovanch.com/JS30/14%20-%20JavaScript%20References%20VS%20Copying/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/14%20-%20JavaScript%20References%20VS%20Copying/README.md)_**

  **_Lessons:_**

* **[15. Using LocalStorage](https://shovanch.com/JS30/15%20-%20LocalStorage/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/15%20-%20LocalStorage/README.md)_**

  **_Lessons:_**

* **[16. Mouse move shadow](https://shovanch.com/JS30/16%20-%20Mouse%20Move%20Shadow/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/16%20-%20Mouse%20Move%20Shadow/README.md)_**

  **_Lessons:_**

* **[17. Sort without articles](https://shovanch.com/JS30/17%20-%20Sort%20Without%20Articles/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/17%20-%20Sort%20Without%20Articles/README.md)_**

  **_Lessons:_**

* **[18. Adding up times with Reduce](https://shovanch.com/JS30/18%20-%20Adding%20Up%20Times%20with%20Reduce/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/18%20-%20Adding%20Up%20Times%20with%20Reduce/README.md)_**

  **_Lessons:_**

* **[19. Webcam Fun](https://shovanch.com/JS30/19%20-%20Webcam%20Fun/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/19%20-%20Webcam%20Fun/README.md)_**

  **_Lessons:_**

* **[20. Speech Detection](https://shovanch.com/JS30/20%20-%20Speech%20Detection/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/20%20-%20Speech%20Detection/README.md)_**

  **_Lessons:_**

* **[21. Geo Location](https://shovanch.com/JS30/21%20-%20Geolocation/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/21%20-%20Geolocation/README.md)_**

  **_Lessons:_**

* **[22. Follow Along Link Highlighter](https://shovanch.com/JS30/22%20-%20Follow%20Along%20Link%20Highlighter/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/README.md)_**

  **_Lessons:_**

* **[23. Speech Synthesis](https://shovanch.com/JS30/23%20-%20Speech%20Synthesis/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/23%20-%20Speech%20Synthesis/README.md)_**

  **_Lessons:_**

* **[24. Sticky Nav](https://shovanch.com/JS30/24%20-%20Sticky%20Nav/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/24%20-%20Sticky%20Nav/README.md)_**

  **_Lessons:_**

* **[25. Event Capture, Propagation and Bubbling](https://shovanch.com/JS30/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once/README.md)_**

  **_Lessons:_**

* **[26. Stripe Follow Along Nav](https://shovanch.com/JS30/26%20-%20Stripe%20Follow%20Along%20Nav/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/README.md)_**

  **_Lessons:_**

* **[27. Click and Drag](https://shovanch.com/JS30/27%20-%20Click%20and%20Drag/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/27%20-%20Click%20and%20Drag/README.md)_**

  **_Lessons:_**

* **[28. Video Speed Controller](https://shovanch.com/JS30/28%20-%20Video%20Speed%20Controller/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/28%20-%20Video%20Speed%20Controller/README.md)_**

  **_Lessons:_**

* **[29. Countdown Timer](https://shovanch.com/JS30/29%20-%20Countdown%20Timer/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/29%20-%20Countdown%20Timer/README.md)_**

  **_Lessons:_**

* **[30. Whack a Mole](https://shovanch.com/JS30/30%20-%20Whack%20A%20Mole/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/30%20-%20Whack%20A%20Mole/README.md)_**

  **_Lessons:_**