This is from the JavaScript course on Udemy by John Smilga.
This repository contains my practice projects from John Smilga's JavaScript course. Each project focuses on different DOM manipulation techniques and JavaScript concepts, helping me strengthen my front-end development skills.
| # | Project | Description | Key Concepts |
|---|---|---|---|
| 1 | Color Flipper | Random background color generator | Arrays, Math.random(), event listeners |
| 2 | Counter | Increment/decrement counter | DOM manipulation, conditionals |
| 3 | Reviews | Testimonial carousel | Arrays, objects, DOM traversal |
| 4 | Navbar | Responsive navigation | Toggle classes, CSS transitions |
| 5 | Sidebar | Toggle sidebar menu | Class manipulation, event handling |
| 6 | Modal | Popup modal window | show/hide elements, event listeners |
| 7 | Questions | FAQ accordion | DOM traversal, classList toggle |
| 8 | Menu | Dynamic menu filtering | Array methods, map(), filter() |
| 9 | Video | Custom video player | Video API, control buttons |
| 10 | Scroll | Smooth scroll effects | Window methods, offset properties |
| 11 | Tabs | Tabbed content | Dataset, class manipulation |
| 12 | Countdown Timer | Coming soon page | Date object, setInterval() |
| 13 | Lorem Ipsum | Text generator | Forms, loops, Math.random() |
| 14 | Grocery Bud | Shopping list CRUD | Local storage, CRUD operations |
| 15 | Slider | Image carousel | setInterval, array methods |
I've created a main page that contains a simple list of links to each individual project. Just click on any link to open that project in your browser. It acts as a launchpad for all my JavaScript projects - a menu where each project is just one click away!
https://js-dom-mini-projects.netlify.app/
This repository serves as:
- Practice ground for JavaScript DOM concepts
- Portfolio showcase for potential employers
- Reference for future projects
- Progress tracker in my learning journey
- DOM manipulation techniques
- Event handling and listeners
- Array methods (map, filter, reduce)
- Local storage implementation
- Dynamic content rendering
- Responsive design principles
- ES6+ features (arrow functions, template literals, destructuring)