A hands-on collection of 50 JavaScript projects built while learning, practicing, and improving my frontend development skills.
This repository is more than a list of exercises. Each project focuses on a specific JavaScript concept and turns it into something interactive that runs in the browser.
Learn → Build → Break → Debug → Improve → Repeat.
Explore the projects through the live showcase:
You can browse the projects and open each one individually.
27 / 50 projects completed
54% complete
The goal is simple: keep building until I reach 50 projects while gradually moving from basic DOM manipulation to APIs, asynchronous JavaScript, modules, and more complex application logic.
The projects cover practical JavaScript topics including:
- DOM manipulation
- Events & event delegation
- Forms & validation
- Timers & the Date API
- Arrays & objects
- Functions & reusable logic
- Fetch API
- REST APIs
- JSON
- Async/await
- ES modules
- Browser APIs
- CSS transitions & animations
- Data handling
- Problem-solving
- Interactive UI development
| # | Project | Main concepts |
|---|---|---|
| 01 | Accordion | DOM, events, CSS transitions |
| 02 | Box Of Boxes | DOM, events, timers |
| 03 | Color Flipper | DOM, events |
| 04 | Counter Button | DOM, functions |
| 05 | Date Now | Timers, Date |
| 06 | Expanding Cards | DOM, events, transitions |
| 07 | Loader | CSS animation, DOM |
| 08 | Sidebar Effect | DOM, transitions |
| 09 | ToDo List | DOM, events, forms |
| 10 | Typing | Timers, arrays, objects |
| 11 | Small Word | DOM, forms |
| 12 | Kinetic Loader | CSS animation, timers |
| 13 | Calculator | DOM, functions, parsing |
| 14 | Slideshow | Events, timers |
| 15 | Testimonial Slider | Arrays, objects, DOM |
| 16 | Progress Steps | Events, transitions |
| 17 | Notion | DOM, forms |
| 18 | Stock Ticker | ES modules, timers |
| 19 | Color Scheme Generator | Fetch, REST API, JSON |
| 20 | Contact Management | Fetch, REST API, DOM |
| 21 | Real State | Fetch, REST API, JSON |
| 22 | War | Fetch, API, game logic |
| 23 | Movie Watchlist | Fetch, REST API, DOM |
| 24 | Dashboard | JavaScript, DOM, UI |
| 25 | Elzero Dashboard | JavaScript, DOM, UI |
| 26 | Chef Recipe | JavaScript, APIs, interactive UI |
| 27 | Quizzical App | JavaScript, APIs, game logic |
A dynamic color-scheme application that communicates with the Color API, retrieves color data, and renders the result in the browser.
A movie-focused application that uses API data to search for movies and manage a personal watchlist.
A small stock-ticker project focused on ES modules, modular JavaScript, and periodic updates.
A browser calculator that handles arithmetic input through JavaScript logic without relying on eval().
A browser-based typing game featuring a timer, difficulty selection, and live scoring.
An interactive quiz application that retrieves questions from an API and turns them into a playable quiz experience.
- HTML5
- CSS3
- Vanilla JavaScript
- Fetch API
- REST APIs
- JSON
- ES Modules
- Vite — used by the Stock Ticker project
The core projects intentionally use vanilla JavaScript so I can understand the fundamentals before relying on frontend frameworks.
Clone the repository:
git clone https://github.com/atef7534/javascript50.git
cd javascript50For most projects, open the project's index.html in a browser.
For the Stock Ticker project:
cd "18 Stock Ticker"
npm install
npm startI created JavaScript 50 to make my learning measurable and practical.
Instead of stopping after watching a tutorial or reading about a JavaScript feature, I try to use that feature in a working project.
As the repository grows, the projects become an evolving record of my JavaScript journey — from simple interactions to API-driven applications and more structured frontend logic.
The target is 50 projects.
Future projects will focus on:
- More advanced JavaScript patterns
- Larger interactive applications
- API integrations
- Better code organization
- More challenging UI logic
- Real-world frontend problems
I'm Atif Yasser, an AI graduate and developer interested in JavaScript, React, Python, backend development, and AI.
I enjoy learning by building things and sharing the process through practical projects.
Keep building. Keep learning. 🚀