https://github.com/richardbmk/javascript30
This is a Wes Bos' (@wesbos) 30 days challenge workind on JavaScript. This challenge consist of 30 days of exercises using plain vanilla JavaScript, without no libraries, transpilers of frameworks.
https://github.com/richardbmk/javascript30
array arrow-function arrow-functions destructuring javascript promises spreading template-literal template-literals
Last synced: 8 months ago
JSON representation
This is a Wes Bos' (@wesbos) 30 days challenge workind on JavaScript. This challenge consist of 30 days of exercises using plain vanilla JavaScript, without no libraries, transpilers of frameworks.
- Host: GitHub
- URL: https://github.com/richardbmk/javascript30
- Owner: Richardbmk
- Created: 2019-09-02T18:04:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-03T11:18:16.000Z (over 5 years ago)
- Last Synced: 2025-03-17T08:20:33.083Z (11 months ago)
- Topics: array, arrow-function, arrow-functions, destructuring, javascript, promises, spreading, template-literal, template-literals
- Language: HTML
- Homepage: https://JavaScript30.com
- Size: 43.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JavaScript30
This is a Wes Bos' ([@wesbos](https://github.com/wesbos)) 30 days challenge workind on JavaScript.
This challenge consist of 30 days of exercises using plain vanilla JavaScript, without no libraries,
transpilers of frameworks.
Check the original course at [https://JavaScript30.com](https://JavaScript30.com)
## Some Concepts learned
I will be updating this readme file, since I didn't finish the chanllenge yet. So far a learned this concepts:
- Using methods and properties from the following `Web APIs` and `interfaces`
- `MouseEvent`, `HTMLMediaElement`, `Navigator`, `Canvas`,
- `Document Object Model` Node List
- ES6 `Promises`, `template literals`, `array spreading`, `destructuring parameters`, `typed arrays`, `arrow function`
- `transitioned` event
## Table of contents
1. [x] [JavaScript Drum Kit](https://richardbmk.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit)
2. [x] [JS + CSS Clock](https://richardbmk.github.io/JavaScript30/02%20-%20JS%20and%20CSS%20Clock)
3. [x] [CSS Variables](https://richardbmk.github.io/JavaScript30/03%20-%20CSS%20Variables)
4. [x] [Array Cardio, Day 1](https://richardbmk.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201)
5. [x] [Flex Panel Gallery](https://richardbmk.github.io/JavaScript30/05%20-%20Flex%20Panel%20Gallery)
6. [x] [Type Ahead](https://richardbmk.github.io/JavaScript30/06%20-%20Type%20Ahead)
7. [x] [Array Cardio, Day 2](https://richardbmk.github.io/JavaScript30/07%20-%20Array%20Cardio%20Day%202/)
8. [x] [Fun with HTML5 Canvas](https://richardbmk.github.io/JavaScript30/08%20-%20Fun%20with%20HTML5%20Canvas/)
9. [x] [Dev Tools Domination](https://richardbmk.github.io/JavaScript30/09%20-%20Dev%20Tools%20Domination/)
10. [x] [Hold Shift and Check Checkboxes](https://richardbmk.github.io/JavaScript30/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/)
11. [x] [Custom Video Player](https://richardbmk.github.io/JavaScript30/11%20-%20Custom%20Video%20Player)
12. [x] [Key Sequence Detection](https://richardbmk.github.io/JavaScript30/12%20-%20Key%20Sequence%20Detection/)
13. [x] [Slide in on Scroll](https://richardbmk.github.io/JavaScript30/13%20-%20Slide%20in%20on%20Scroll/)
14. [x] [JavaScript References vs. Copying](https://richardbmk.github.io/JavaScript30/14%20-%20JavaScript%20References%20VS%20Copying/)
15. [x] [LocalStorage](https://richardbmk.github.io/JavaScript30/15%20-%20LocalStorage)
16. [x] [Mouse Move Shadow](https://richardbmk.github.io/JavaScript30/16%20-%20Mouse%20Move%20Shadow/)
17. [x] [Sort Without Articles](https://richardbmk.github.io/JavaScript30/17%20-%20Sort%20Without%20Articles/)
18. [x] [Adding Up Times with Reduce](https://richardbmk.github.io/JavaScript30/18%20-%20Adding%20Up%20Times%20with%20Reduce)
19. [ ] [~~Webcam Fun~~](https://richardbmk.github.io/JavaScript30/19%20-%20Webcam%20Fun)
20. [x] [Speech Detection](https://richardbmk.github.io/JavaScript30/20%20-%20Speech%20Detection)
21. [x] [Geolocation](https://richardbmk.github.io/JavaScript30/21%20-%20Geolocation)
22. [x] [Follow Along Link Highlighter](https://richardbmk.github.io/JavaScript30/22%20-%20Follow%20Along%20Link%20Highlighter)
23. [x] [Speech Synthesis](https://richardbmk.github.io/JavaScript30/22%20-%20Follow%20Along%20Link%20Highlighter)
24. [x] [Sticky Nav](https://richardbmk.github.io/JavaScript30/24%20-%20Sticky%20Nav)
25. [x] [Event Capture, Propagation, Bubbling, and Once](https://richardbmk.github.io/JavaScript30/25%20-%20Event%20Capture%2C%20Propagation%2C%20Bubbling%20and%20Once)
26. [ ] [~~Stripe Follow Along Nav~~](https://richardbmk.github.io/JavaScript30/26%20-%20Stripe%20Follow%20Along%20Nav)
27. [x] [Click and Drag](https://richardbmk.github.io/JavaScript30/27%20-%20Click%20and%20Drag)
28. [x] [Video Speed Controller](https://richardbmk.github.io/JavaScript30/28%20-%20Video%20Speed%20Controller)
29. [ ] [~~Countdown Timer~~](https://richardbmk.github.io/JavaScript30/29%20-%20Countdown%20Timer)
30. [ ] [~~Whack A Mole~~](https://richardbmk.github.io/JavaScript30/30%20-%20Whack%20A%20Mole)