JavaScript felt hard & I became stubborn. This list is the result of those events.
I hope this list will help JavaScript newbies & those who are looking for project ideas.
| ↕ | Live | Code | Notes |
|---|---|---|---|
| 00 | Weather App | GitHub | API |
| 01 | Random Color Generator (RGB) | GitHub | -- |
| 02 | ToDo List | GitHub | .filter |
| 03 | Quick Tip | GitHub | Math, .toFixed, substr |
| 04 | Running Tracker | GitHub | .reduce, .roFixed |
| 05 | Budgety | GitHub | lots of ES5 |
| 06 | Random Color Generator (Hexadecimal) | GitHub | -- |
| 07 | Drum Kit | GitHub | transitionend, audio(play, volume), PWA |
| 08 | Register Form | GitHub | Form Validation, Regex |
| 09 | Rocket Game | GitHub | setTimeout, setInterval, .computedStyleMap() |
| 10 | Clock | GitHub | new Date(), setInterval, css: rotation |
| 11 | Movie Seat Booking | GitHub | forEach, [...], .map, localStorage |
| 12 | Box Shadow Maker | GitHub | CSS Varible in JS |
| 13 | Flexible Gallery | GitHub | .forEach, .propertyName |
| 14 | Type Ahead | GitHub | fetch, regEx |
| 15 | Canvas | GitHub | HTML5 Canvas, mouse events |
| 16 | Checkbox Checker | GitHub | click, forEach |
| 17 | Image Slider | GitHub | forEach, ternary |
| 18 | Video Player | GitHub | play(), pause(), playbackRate, currentTime, dataset |
| 19 | KONAMI Code | GitHub | Array, .push, .splice, keyup |
| 20 | Sticky Nav | GitHub | 'scroll' event, .offsetTop, .scrollY |
| 21 | Scroll To Slide | GitHub | scroll, scrollY, offsetTop, forEach |
| 22 | Parallax Scroll Effect | GitHub | scroll, scrollY |
| 23 | List App | GitHub | localStorage, event delegation, .map(), object |
| 24 | Mouse Shadow | GitHub | mousemove, de-structure, (e) |
| 25 | Notable | GitHub | localStorage, event delegation, .map |
| 26 | Sortable Table | GitHub | .sort, .forEach, .map |
| 27 | Local JSON Fetch | GitHub | JSON, fetch, map |
| 28 | Pomodoro Timer | GitHub | setInterval, stopInterval |
| 29 | Follow Along Links | GitHub | mouseenter, .getBoundingClientRect, .createElement |
| 30 | Drag & Drop | GitHub | forEach, dragstart, dragover, drop, dataTransfer, setData, getData, currentTime |
| 31 | BMI Calculator | GitHub | Math, submit |
| 32 | Currency Converter | GitHub | API, Fetch, change |
| 33 | Article Preview Component | GitHub | target, dataset |
| 34 | FAQ Accordion | GitHub | toggle, forEach |
| 35 | Twitter Threader | GitHub | for loop, map, object, ternary |
| 36 | Contact List | GitHub | array, object, map, forEach, split, splice, join |
| 37 | Dark Mode | GitHub | classList, toggle |
| 38 | Fluffy Friends | GitHub | forEach, ternary, filtering |
| 39 | Line Chart | GitHub | insertAdjacentHTML, Math, substr |
| 40 | Budget App | GitHub | Math, .map, .forEach, localStorage, event delegation, dataset, object, ternary, form |
| 41 | Duo Tone Card | GitHub | Math, .toString, .substr |
| 42 | Countdown Timer | GitHub | Date, Math, modal |
| 43 | Contact App | GitHub | map, toggle, array, object, localStorage, search filter |
| 44 | Weather Clock | GitHub | API, async await, map, array, object, localStorage |
| 45 | Lazy Loading | GitHub | Intersection Observer API, lazy loading image |
| 46 | JS Bank | GitHub | Date, insertAdjacentHTML, Form |
| 47 | Furnit | GitHub | e-commerce site, class, forEach, map, find, localStorage |
| 48 | Pagination | GitHub | async, await, NumberFormat, map, for loop, forEach, insertAdjacentHTML |
| 49 | Jobss | GitHub | async, await, map, forEach, localStorage, event delegation |