https://github.com/allanotieno254/vanilla-js-mini-projects

This repository contains 28 mini projects built using Vanilla JavaScript. Each project is designed to improve JavaScript fundamentals, DOM manipulation, event handling, and API interaction.
https://github.com/allanotieno254/vanilla-js-mini-projects

animation css-transition dom-manipulation event-listeners fetch-api js local-storage responsive-design

Last synced: 4 months ago
JSON representation

This repository contains 28 mini projects built using Vanilla JavaScript. Each project is designed to improve JavaScript fundamentals, DOM manipulation, event handling, and API interaction.

• Host: GitHub
• URL: https://github.com/allanotieno254/vanilla-js-mini-projects
• Owner: AllanOtieno254
• License: other
• Created: 2025-02-19T19:49:09.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2025-02-19T19:56:51.000Z (8 months ago)
• Last Synced: 2025-05-22T23:35:31.309Z (5 months ago)
• Topics: animation, css-transition, dom-manipulation, event-listeners, fetch-api, js, local-storage, responsive-design
• Language: CSS
• Homepage:
• Size: 12.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 🚀 Vanilla JavaScript Mini Projects

This repository contains **28 mini projects** built using **Vanilla JavaScript**. Each project is designed to improve JavaScript fundamentals, DOM manipulation, event handling, and API interaction.

## 📌 Features

- **No frameworks** – Just pure JavaScript, HTML, and CSS.

- **Beginner-friendly** – Simple, structured, and easy to follow.

- **Real-world projects** – Includes modals, counters, APIs, dark mode, sliders, etc.

- **Source code included** – Fully open-source and easy to customize.

## 🎯 Topics Covered

✅ DOM Manipulation

✅ Event Listeners

✅ Local Storage

✅ Fetch API

✅ Responsive Design

✅ CSS Transitions & Animations

✅ JavaScript ES6+ Features

---

## 🛠️ Projects Included

| #  | Project Name        | Description |

|----|--------------------|-------------|

| 01 | **Color Flipper** | Change background colors on button click. |

| 02 | **Counter** | A simple increment/decrement counter. |

| 03 | **Reviews** | Show user reviews with next/prev buttons. |

| 04 | **Navbar** | Responsive navigation menu. |

| 05 | **Sidebar** | Toggleable sidebar. |

| 06 | **Modal** | Open/close a modal window. |

| 07 | **Questions** | Expand/collapse FAQ items. |

| 08 | **Menu** | Filter menu items dynamically. |

| 09 | **Video** | Play/Pause video with JS. |

| 10 | **Scroll** | Scroll event effects. |

| 11 | **Tabs** | Tabbed content navigation. |

| 12 | **Countdown Timer** | Countdown to an event. |

| 13 | **Lorem Ipsum** | Generate random text. |

| 14 | **Grocery Bud** | Add/remove items from a list. |

| 15 | **Slider** | Image slider with buttons. |

| 16 | **Counter (Advanced)** | More counter functionality. |

| 17 | **Gallery** | Image gallery with zoom. |

| 18 | **Numbers** | Animated number counters. |

| 19 | **Dark Mode** | Toggle dark/light theme. |

| 20 | **Filters** | Filter list dynamically. |

| 21 | **Dad Jokes API** | Fetch jokes from an API. |

| 22 | **Products** | Display product list dynamically. |

| 23 | **Random User API** | Fetch user data from API. |

| 24 | **Cocktail API** | Fetch cocktail recipes. |

| 25 | **Slider (Advanced)** | More slider features. |

| 26 | **Stripe Submenus** | Dynamic submenu navigation. |

| 27 | **Pagination** | Paginate list items dynamically. |

| 28 | **Wikipedia API** | Search Wikipedia with API. |

---