https://github.com/chanda-abdul/build-15-vanilla-javascript-projects
A repository for https://www.vanillajavascriptprojects.com as I code along
https://github.com/chanda-abdul/build-15-vanilla-javascript-projects
Last synced: 3 months ago
JSON representation
A repository for https://www.vanillajavascriptprojects.com as I code along
- Host: GitHub
- URL: https://github.com/chanda-abdul/build-15-vanilla-javascript-projects
- Owner: Chanda-Abdul
- Created: 2020-08-21T23:43:30.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-09T05:01:49.000Z (almost 5 years ago)
- Last Synced: 2025-01-13T16:49:35.750Z (9 months ago)
- Language: CSS
- Size: 6.51 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Build-15-JavaScript-Projects-Vanilla-JavaScript-Course
A repository for https://www.vanillajavascriptprojects.com as I code along
watch here...
https://www.youtube.com/watch?v=3PHXvlpOkf4&feature=youtu.be
#
### 1. Color Flipper ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/1-color-flipper) | [example](https://vannilla-js-basic-project-1-background-color.netlify.app/))
#
### 2. Simple Counter ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/2-counter) | [example](https://vanilla-js-basic-project-2-simple-counter.netlify.app/))
#
### 3. Reviews/Quotes ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/3-reviews) | [example](https://vanilla-js-basic-project-3-reviews.netlify.app/))
#
### 4. Navigation Bar ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/4-navbar) | [example](https://vanilla-js-basic-project-4-navbar.netlify.app/index.html))
#
### 5. Side Bar ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/5-sidebar) | [example](https://vanilla-js-basic-project-5-sidebar.netlify.app/))
#
### 6. Modal ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/6-modal) | [example](https://vanilla-js-basic-project-6-modal.netlify.app/))
#
### 7. Questions ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/7-questions) | [example](https://vanilla-js-basic-project-7-questions.netlify.app/))
#
### 8. Dynamic food menu & filter buttons ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/8-menu)| [example](https://vanilla-js-basic-project-8-menu.netlify.app/))
- dynamically `.map()`
- `.reduce()`
- ES6 `=>` data and render
#
### 9. Video project with preloader and slide controls ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/9-video) | [example](https://vannilla-js-basic-project-9-video-preloader.netlify.app/))
#
### 10. Smooth Scroll with Dynamic Nav Bar height ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/10-scroll) | [example](https://vannilla-js-basic-project-10-scroll.netlify.app/))
#
### 11. Dynamic Tabs and content ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/11-tabs) | [example](https://vannilla-js-basic-project-11-tabs.netlify.app/))
#
### 12. Dynamic Countdown Timer ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/12-countdown-timer) | [example](https://vannilla-js-basic-project-12-countdown.netlify.app/))
#
### 13. Lorem Ipsum Generator ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/13-lorem-ipsum) | [example](https://vannilla-js-basic-project-13-lorem-ipsum.netlify.app/))
- Forms
- Events
- `Math.random()`
#
### 14. Grocery/To-do Checklist ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/14-todo) | [example](https://vannilla-js-basic-project-14-grocery-bud.netlify.app/))
- add, remove and edit items dynamically in a grocery(to-do) list
- save data in `localStorage
#
### 15. Image Slideshow ([code](https://github.com/ChandaHubbard/Build-15-Vanilla-JavaScript-Projects/tree/master/15-slider) | [example](https://vannilla-js-basic-project-15-slider.netlify.app/))
- create image carousel with `Next` & `Prev` buttons
- implement counter
- dynamically update CSS styles with JavaScript