https://github.com/swappy514/javascript-projects
A curated collection of JavaScript mini-projects — from basic DOM practice to advanced UI interactions.
https://github.com/swappy514/javascript-projects
css dom html javascript javascript-project mini-projects
Last synced: 21 days ago
JSON representation
A curated collection of JavaScript mini-projects — from basic DOM practice to advanced UI interactions.
- Host: GitHub
- URL: https://github.com/swappy514/javascript-projects
- Owner: Swappy514
- License: mit
- Created: 2025-08-04T05:41:18.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-06T07:07:07.000Z (9 months ago)
- Last Synced: 2025-09-06T09:09:13.892Z (9 months ago)
- Topics: css, dom, html, javascript, javascript-project, mini-projects
- Language: HTML
- Homepage:
- Size: 3.83 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 JavaScript Mini-Projects Playground
*A curated collection of **JavaScript mini-projects** using Vanilla JS, HTML, and CSS. Perfect for beginners and developers to **learn DOM, APIs, and frontend basics** through fun, interactive apps.*
---
## 🎬 Live Previews
---
## 📑 Table of Contents
1. [🔥 Project Highlights](#-project-highlights)
2. [✨ What You'll Learn](#-what-youll-learn)
3. [🚀 How to Get Started](#-how-to-get-started)
4. [📚 Tech Stack](#-tech-stack)
5. [🤝 Inspiration & Future](#-inspiration--future)
6. [🤝 Contributing](#-contributing)
7. [📜 License](#-license)
---
## 🔥 Project Highlights
Explore some of the coolest projects from this archive 👇
- ✅ [To-Do Application](./Todo-Application) – Create, edit & delete tasks with localStorage
- 💣 [Bomb Defuser](./Bomb%20Defuser) – Timer-based logic game with countdown
- 🐱 [Cat Animation](./Cat-Animation) – Fun interactive movement with JS & CSS
- 🤖 [Chatbot](./Chatbot) – Simple rule-based chatbot UI
- 🎨 [Color Picker](./Color-Picker) – Choose and apply custom colors in real time
- ⏱️ [Counter](./Counter) – Increment/decrement app with live updates
- 🌍 [Countries Search Page](./Countries%20Search%20Page) – Search and filter countries dynamically
- 🎯 [Guessing Game](./Guessing-Game) – User guessing logic with instant feedback
- 📦 [JSON Stringify](./JSON-Stringify) – Convert objects to JSON format live
- 🔢 [Number Facts](./Know%20Fact%20About%20the%20Number) – Display fun facts about numbers
- 😂 [Random Joke Page](./Random%20Joke%20Page) – Generate and display random jokes
- 📩 [Subscribe to Us](./Subscribe%20to%20Us) – Email subscription UI with validation
---
## ✨ What You’ll Learn
- DOM manipulation, event handling & animation effects
- Asynchronous programming & API integration
- State persistence with localStorage
- Building UI components & game logic
- From beginner to advanced frontend ideas
---
## 🚀 How to Get Started
```bash
git clone https://github.com/Swappy514/JavaScript-Projects.git
cd JavaScript-Projects/[project-folder]
open index.html
```
---
## 📚 Tech Stack
This repository is built with the holy trinity of frontend development:
- **HTML5** – Semantic structure for every project
- **CSS3** – Styling, animations, and responsive layouts
- **JavaScript (ES6+)** – Core logic, interactivity, and API integrations
🔧 Along the way, you’ll also explore:
- **DOM Manipulation** – Creating dynamic, real-time interfaces
- **LocalStorage** – Saving and retrieving user data
- **Fetch API** – Calling third-party APIs (e.g., Weather, Recipes)
- **Responsive Design** – Ensuring mobile-first, adaptive UIs
---
## 🤝 Inspiration & Future
This project started as a **learning playground**—a place to experiment, fail fast, and grow stronger with each mini-project.
The idea: **make learning JavaScript fun, practical, and portfolio-worthy.**
### 🌟 Future Plans
- Add **more advanced projects** (games, charts, API mashups)
- Improve **UI/UX** with better styling and animations
- Provide **step-by-step documentation** for beginners
- Deploy live demos via **GitHub Pages**
💡 *Open for collaboration!* If you have ideas, bug fixes, or want to add your own project, feel free to fork and contribute.
Together, we can grow this into the **ultimate JavaScript mini-projects archive.**
---
## 🤝 Contributing
Contributions are welcome!
- Fork the repo
- Create a new branch (`git checkout -b feature-name`)
- Commit changes (`git commit -m "Add new feature"`)
- Push and open a Pull Request
⭐ Don’t forget to star this repo if you found it helpful!
---
## 📜 License
This project is licensed under the MIT License – see the [LICENSE](./LICENSE) file for details.