30 Days • 30 JavaScript Projects

This repository is a hands-on JavaScript learning challenge consisting of 30 small projects built progressively from scratch. Each project focuses on a practical problem or interaction implemented using HTML, CSS, and JavaScript.

The purpose of this challenge was not to simply reproduce tutorial projects, but to use implementation as a way to strengthen JavaScript fundamentals. Across the 30 projects, I practiced working with the DOM, handling user input, managing application state, working with browser APIs, consuming external APIs, handling asynchronous operations, validating input, debugging issues, and improving implementations.

The projects were developed incrementally, one project at a time. The difficulty and concepts expanded from basic JavaScript logic and DOM manipulation to API-driven applications, asynchronous JavaScript, browser storage, and more involved UI interactions.

Learn → Build → Debug → Understand → Improve

🎯 Challenge Goals

The main goal of this challenge was to strengthen JavaScript fundamentals through repeated implementation rather than passive learning.

Throughout the 30 projects, I practiced:

JavaScript fundamentals and programming logic
Variables, data types, operators, conditions, and loops
Functions and reusable logic
Arrays, objects, strings, and numbers
DOM manipulation
Event handling and UI interactions
Forms and input validation
Date and time operations
Browser APIs
LocalStorage and client-side state
Asynchronous JavaScript
Promises
async/await
Fetch API
REST APIs
JSON data handling
Error handling
Loading and empty states
Problem decomposition
Debugging and testing
Code organization and maintainability
Building interactive browser applications

The challenge was structured to gradually move from basic JavaScript logic toward more complete applications involving APIs, asynchronous operations, state, and dynamic interfaces.

📚 Projects

#	Project	Description	Main Concepts	Status
01	Age Calculator	Calculates a user's age from a selected date of birth.	`Date`, date calculations, input handling, validation, DOM updates	✅ Completed
02	Analog Clock	Displays the current time using rotating hour, minute, and second hands.	`Date`, time calculations, `setInterval`, DOM manipulation, CSS positioning	✅ Completed
03	Barcode Generator	Generates a barcode from user-provided text or numbers.	Input handling, DOM manipulation, libraries/APIs, dynamic rendering	✅ Completed
04	BMI Calculator	Calculates Body Mass Index from height and weight inputs.	Forms, arithmetic, validation, functions, conditional logic	✅ Completed
05	Box Shadow Generator	Provides controls for creating and previewing CSS box-shadow values.	DOM events, range inputs, CSS properties, dynamic styles, string generation	✅ Completed
06	Cocktail Search App	Searches for cocktail information and displays matching results.	Fetch API, REST APIs, JSON, async/await, search, DOM rendering	✅ Completed
07	Country Guide App	Retrieves country information and presents details such as location, population, and related data.	REST APIs, Fetch, JSON, async/await, DOM manipulation	✅ Completed
08	Currency Converter	Converts an amount between different currencies using exchange-rate data.	Fetch API, APIs, JSON, calculations, forms, async operations	✅ Completed
09	Digital Clock	Displays the current time digitally and updates continuously.	`Date`, `setInterval`, formatting, DOM updates	✅ Completed
10	Dynamic Calendar	Generates a calendar interface for navigating through dates and months.	`Date`, date calculations, arrays, DOM generation, event handling	✅ Completed
11	GitHub Profile Search App	Searches for GitHub users and displays profile information.	Fetch API, REST APIs, JSON, async/await, search, error handling	✅ Completed
12	Guess the Number Game	Generates a number and lets the user attempt to guess it.	Random numbers, conditions, functions, events, game state, validation	✅ Completed
13	Hangman Game	Implements the classic word-guessing game using keyboard or user input.	Strings, arrays, loops, conditions, events, game state, DOM manipulation	✅ Completed
14	Interest Calculator	Calculates interest based on principal, rate, and time inputs.	Functions, arithmetic, forms, validation, DOM updates	✅ Completed
15	Language Translator	Translates user-provided text using a translation service/API.	Fetch, REST APIs, JSON, async/await, forms, error handling	✅ Completed
16	Memory Card Game	Tests the user's memory by matching pairs of cards.	Arrays, objects, events, DOM manipulation, state management, game logic	✅ Completed
17	Movie Info App	Searches for movies and displays information retrieved from a movie API.	Fetch API, REST APIs, JSON, search, async/await, error handling	✅ Completed
18	Music Player With Waveform	Provides controls for playing audio while displaying a waveform-based interface.	Audio API, events, DOM manipulation, media controls, application state	✅ Completed
19	Password Generator	Generates passwords based on configurable character requirements.	Randomization, strings, arrays, functions, DOM events, validation	✅ Completed
20	QR Code Generator	Converts user-provided content into a QR code.	Input handling, DOM manipulation, external libraries/APIs, dynamic rendering	✅ Completed
21	Quiz App With Timer	Presents questions with answer options and tracks the user's score against a timer.	Arrays, objects, timers, events, state management, DOM manipulation	✅ Completed
22	Random Joke Generator	Retrieves and displays a random joke from an API.	Fetch API, JSON, async/await, random data, error handling	✅ Completed
23	Random Quote Generator	Retrieves or generates random quotes and displays them dynamically.	APIs, Fetch, JSON, asynchronous operations, DOM manipulation	✅ Completed
24	Recipe App	Searches for recipes and displays recipe information from an external API.	REST APIs, Fetch, JSON, async/await, search, dynamic DOM rendering	✅ Completed
25	Rock Paper Scissors	Implements the classic game against a computer-generated choice.	Randomization, conditions, functions, events, game state	✅ Completed
26	Scientific Calculator	Performs standard and scientific mathematical calculations.	Functions, operators, `Math`, expressions, event handling, input processing	✅ Completed
27	Simple Calculator	Performs basic arithmetic operations through an interactive calculator interface.	Functions, events, operators, DOM manipulation, input handling	✅ Completed
28	Stopwatch	Tracks elapsed time with start, pause, reset, and timing controls.	`setInterval`, time calculations, state management, events, DOM updates	✅ Completed
29	To-Do App	Allows users to create, complete, remove, and persist tasks.	DOM manipulation, arrays, objects, events, LocalStorage, state management	✅ Completed
30	Weather App	Searches for weather information for a location using an external API.	Fetch API, REST APIs, JSON, async/await, search, error handling, UI states	✅ Completed

🧠 What I Learned

The 30 projects provided repeated opportunities to apply JavaScript concepts in different contexts. Instead of learning each concept only as isolated syntax, I used them while building interactive applications.

JavaScript Fundamentals

Throughout the projects, I worked with:

Variables and constants
Data types
Operators
Type conversion
Conditional statements
Loops
Functions
Function parameters and return values
Scope
Arrays
Objects
Strings
Numbers
Math
Date
Random number generation
Problem-solving logic

The projects provided practice translating requirements into JavaScript logic and breaking larger problems into smaller operations.

DOM Manipulation

The applications provided repeated practice with:

Selecting elements
Changing text and content
Modifying classes
Updating styles
Creating elements dynamically
Removing elements
Rendering lists and results
Handling forms
Reading user input
Adding event listeners
Responding to user interactions

Modern JavaScript

The projects also provided practical use of modern JavaScript features, including:

let and const
Arrow functions
Template literals
Destructuring
Spread and rest syntax
Default parameters
Array methods such as map, filter, find, reduce, and forEach
Object methods
Modules where appropriate
More organized approaches to application logic

Asynchronous JavaScript

API-based projects introduced practical asynchronous programming.

I worked with concepts including:

Promises
async/await
Fetch API
Asynchronous request and response handling
Loading states
Successful responses
Failed requests
Network and API errors
Separating API operations from UI rendering where appropriate

APIs and JSON

Several projects provided practice with:

HTTP requests
REST APIs
API endpoints
Query parameters
Fetching remote data
JSON
Parsing API responses
Extracting relevant data
Rendering API data
Handling missing or unexpected data
Handling failed API requests

Browser Storage

The To-Do application provided practical exposure to client-side persistence using:

localStorage
Saving application state
Reading stored data
Updating stored data
Removing stored data
Converting between JavaScript objects/arrays and JSON

Problem Solving

The projects also provided repeated practice with:

Breaking requirements into smaller problems
Designing application logic
Identifying inputs and outputs
Handling edge cases
Validating user input
Debugging unexpected behavior
Testing different scenarios
Refactoring repetitive logic
Improving existing implementations

Completing the projects does not mean every concept is mastered. The repository represents practical exposure and repeated implementation, which can be built upon through more complex projects and software-engineering work.

🛠️ Technologies

The primary technology stack used throughout the challenge includes:

HTML5
CSS3
JavaScript ES6+
DOM API
Browser APIs
LocalStorage
Fetch API
REST APIs
JSON

The projects primarily use vanilla JavaScript so that the underlying language, DOM, browser APIs, asynchronous programming, and application logic can be practiced without relying heavily on frameworks.

External APIs and supporting libraries were used where appropriate for individual projects.

📂 Repository Structure

Each project is maintained as an independent application inside the repository.

30-Days-30-JavaScript-Projects/
│
├── README.md
│
├── 01-age-calculator/
├── 02-analog-clock/
├── 03-barcode-generator/
├── 04-bmi-calculator/
├── 05-box-shadow-generator/
├── 06-cocktail-search-app/
├── 07-country-guide-app/
├── 08-currency-converter/
├── 09-digital-clock/
├── 10-dynamic-calendar/
├── 11-github-profile-search-app/
├── 12-guess-the-number-game/
├── 13-hangman-game/
├── 14-interest-calculator/
├── 15-language-translator/
├── 16-memory-card-game/
├── 17-movie-info-app/
├── 18-music-player-with-waveform/
├── 19-password-generator/
├── 20-qr-code-generator/
├── 21-quiz-app-with-timer/
├── 22-random-joke-generator/
├── 23-random-quote-generator/
├── 24-recipe-app/
├── 25-rock-paper-scissors/
├── 26-scientific-calculator/
├── 27-simple-calculator/
├── 28-stopwatch/
├── 29-to-do-app/
└── 30-weather-app/

Each project follows a structure similar to:

project-folder/
├── index.html
├── style.css
├── script.js
└── README.md

File Responsibilities

File	Purpose
`index.html`	Defines the structure and content of the application
`style.css`	Handles layout, styling, responsiveness, and visual presentation
`script.js`	Contains JavaScript logic, interactions, state, and application behavior
`README.md`	Documents the project, implementation, concepts, and future improvements

Individual projects may contain additional assets or files when required.

🔨 Development Approach

The projects were developed using a consistent workflow while allowing the implementation to vary according to each problem.

Understand the problem
Identify what the application needs to do and what inputs and outputs are involved.
Plan the UI and logic
Break the application into smaller components, interactions, and logical steps.
Build the HTML structure
Create the elements required for the application's interface.
Style the interface
Build the layout and visual structure using CSS.
Implement JavaScript functionality
Connect user interactions and application logic to the DOM.
Test the application
Try normal inputs, invalid inputs, boundary cases, and different interactions.
Debug errors
Use browser developer tools and debugging techniques to identify and fix problems.
Refactor where necessary
Improve duplicated logic, readability, organization, and maintainability where appropriate.
Document what was learned
Record important concepts, implementation decisions, and possible improvements.
Commit and push the project
Add the completed work to GitHub as part of the challenge.

This incremental workflow helped keep the challenge focused on implementation rather than simply collecting finished projects.

📈 Progress

Overall Progress

Projects Completed: 30 / 30

Progress: 100%

Project Checklist

📊 Learning Areas

Learning Area	Status
JavaScript Fundamentals	✅ Completed
DOM Manipulation	✅ Completed
Events	✅ Completed
Functions	✅ Completed
Arrays & Objects	✅ Completed
Browser APIs	✅ Completed
Forms & Validation	✅ Completed
LocalStorage	✅ Completed
Async JavaScript	✅ Completed
Fetch API	✅ Completed
REST APIs	✅ Completed
JSON	✅ Completed
Error Handling	✅ Completed
Problem Solving	✅ Completed
Clean Code	🔄

Note: "Completed" here means the learning area was practiced through the challenge, not that it has been mastered. Clean code and software quality remain areas for continued improvement.

🔍 Project-by-Project Learning

01. Age Calculator

What it does:
Calculates a user's age from a selected date of birth.

Key concepts:
Date, date differences, input values, validation, functions, DOM updates.

Learning focus:
This project provided practice with JavaScript Date objects, date calculations, user input, validation, and updating the DOM based on calculated results.

02. Analog Clock

What it does:
Displays the current time using rotating hour, minute, and second hands.

Key concepts:
Date, time calculations, setInterval, DOM manipulation, CSS positioning.

Learning focus:
This project provided practice with continuously updating the UI based on changing time values and converting time into visual positions.

03. Barcode Generator

What it does:
Generates a barcode from user-provided text or numerical input.

Key concepts:
Input handling, DOM manipulation, dynamic rendering, external libraries or APIs.

Learning focus:
This project provided practice connecting user input to dynamically generated visual output and integrating supporting functionality when required.

04. BMI Calculator

What it does:
Calculates Body Mass Index using height and weight values.

Key concepts:
Forms, arithmetic operations, validation, functions, conditional logic, DOM manipulation.

Learning focus:
This project provided practice taking multiple user inputs, validating them, applying a formula, and presenting the result through the interface.

05. Box Shadow Generator

What it does:
Allows users to adjust box-shadow properties and preview the resulting CSS effect.

Key concepts:
Range inputs, event listeners, dynamic CSS properties, string generation, DOM manipulation.

Learning focus:
This project provided practice using UI controls to dynamically modify styles and generate CSS values from multiple inputs.

06. Cocktail Search App

What it does:
Searches for cocktails and displays information retrieved from an external API.

Key concepts:
Fetch API, REST APIs, JSON, async/await, search input, DOM rendering, error handling.

Learning focus:
This project provided practice making asynchronous API requests and converting remote JSON data into a usable interface.

07. Country Guide App

What it does:
Retrieves country information and presents relevant details to the user.

Key concepts:
REST APIs, Fetch, JSON, asynchronous operations, search, DOM manipulation.

Learning focus:
This project provided practice understanding API response structures and selecting and displaying the information needed by the interface.

08. Currency Converter

What it does:
Converts an amount from one currency to another using exchange-rate information.

Key concepts:
API requests, JSON, calculations, forms, asynchronous JavaScript, validation.

Learning focus:
This project provided practice combining user input, external data, calculations, and asynchronous operations into a single application flow.

09. Digital Clock

What it does:
Displays the current time in a digital format and updates continuously.

Key concepts:
Date, setInterval, formatting, functions, DOM updates.

Learning focus:
This project provided practice with recurring operations and keeping displayed data synchronized with the current time.

10. Dynamic Calendar

What it does:
Generates a calendar interface and allows navigation between months.

Key concepts:
Date, date calculations, arrays, loops, DOM generation, event handling.

Learning focus:
This project provided practice with date-related logic and generating a dynamic interface from calculated data.

11. GitHub Profile Search App

What it does:
Searches for a GitHub user and displays information from their public profile.

Key concepts:
Fetch API, REST APIs, JSON, search, async/await, dynamic rendering, error handling.

Learning focus:
This project provided practice integrating an external API into an interactive search interface and handling different response states.

12. Guess the Number Game

What it does:
Generates a random number and allows the user to guess it.

Key concepts:
Math.random, conditions, functions, events, state, input validation.

Learning focus:
This project provided practice implementing game logic, maintaining state between interactions, and responding to user guesses.

13. Hangman Game

What it does:
Implements a word-guessing game where the player attempts to identify a hidden word.

Key concepts:
Strings, arrays, loops, conditions, keyboard/input events, game state, DOM manipulation.

Learning focus:
This project provided practice managing multiple pieces of application state and updating the interface as the game progresses.

14. Interest Calculator

What it does:
Calculates interest using values such as principal, rate, and time.

Key concepts:
Functions, arithmetic, form inputs, validation, conditional logic, DOM updates.

Learning focus:
This project provided practice converting a mathematical formula into reusable JavaScript logic and validating required inputs.

15. Language Translator

What it does:
Translates user-provided text using a translation service or API.

Key concepts:
Fetch, REST APIs, JSON, async/await, forms, asynchronous operations, error handling.

Learning focus:
This project provided practice working with an external service where the application depends on asynchronous requests and responses.

16. Memory Card Game

What it does:
Challenges the player to find matching pairs of cards.

Key concepts:
Arrays, objects, event listeners, DOM manipulation, state management, comparison logic.

Learning focus:
This project provided practice managing game state, tracking user interactions, and coordinating multiple DOM elements.

17. Movie Info App

What it does:
Searches for movies and displays information retrieved from a movie database API.

Key concepts:
Fetch API, REST APIs, JSON, search, async/await, dynamic rendering, error handling.

Learning focus:
This project provided practice building an API-driven search application and handling different states such as results, empty searches, and failed requests.

18. Music Player With Waveform

What it does:
Provides an interactive music player with playback controls and a waveform-based interface.

Key concepts:
Audio API, media events, DOM manipulation, event listeners, playback state.

Learning focus:
This project provided practice interacting with browser media capabilities and synchronizing UI elements with audio playback.

19. Password Generator

What it does:
Generates passwords based on selected character requirements and length.

Key concepts:
Strings, arrays, randomization, functions, input controls, validation.

Learning focus:
This project provided practice building configurable logic and combining multiple input conditions into a generated result.

20. QR Code Generator

What it does:
Generates a QR code from user-provided text or a URL.

Key concepts:
Input handling, DOM manipulation, dynamic rendering, external libraries or APIs.

Learning focus:
This project provided practice converting user input into generated output and integrating a focused external dependency where appropriate.

21. Quiz App With Timer

What it does:
Presents questions, records answers, tracks a score, and limits the quiz with a timer.

Key concepts:
Arrays, objects, timers, events, state management, conditional logic, DOM updates.

Learning focus:
This project provided practice coordinating multiple application states such as the current question, selected answer, score, and remaining time.

22. Random Joke Generator

What it does:
Retrieves and displays a random joke from an external API.

Key concepts:
Fetch API, JSON, async/await, API responses, DOM updates, error handling.

Learning focus:
This project provided practice with a complete asynchronous application flow from user action to API response to UI update.

23. Random Quote Generator

What it does:
Retrieves or generates a random quote and displays it dynamically.

Key concepts:
Arrays or APIs, random selection, Fetch, JSON, asynchronous operations, DOM manipulation.

Learning focus:
This project provided practice with random data selection and, where applicable, asynchronous external data.

24. Recipe App

What it does:
Searches for recipes and displays relevant recipe information.

Key concepts:
REST APIs, Fetch, JSON, search, async/await, dynamic DOM rendering, error handling.

Learning focus:
This project provided practice building a data-oriented API application where responses may contain multiple related pieces of information.

25. Rock Paper Scissors

What it does:
Implements the classic Rock Paper Scissors game against a computer-generated choice.

Key concepts:
Randomization, conditions, functions, events, game state, DOM updates.

Learning focus:
This project provided practice representing game rules in code and keeping the implementation predictable and easy to follow.

26. Scientific Calculator

What it does:
Provides standard and scientific mathematical operations through an interactive interface.

Key concepts:
Functions, operators, Math, expressions, event handling, input processing.

Learning focus:
This project provided practice organizing multiple related mathematical operations and handling more complex calculator interactions.

27. Simple Calculator

What it does:
Performs basic arithmetic operations through an interactive calculator.

Key concepts:
Functions, arithmetic operators, event listeners, DOM manipulation, input handling.

Learning focus:
This project provided practice building a complete interactive application from basic UI events and JavaScript logic.

28. Stopwatch

What it does:
Tracks elapsed time with controls for starting, pausing, and resetting the timer.

Key concepts:
setInterval, time calculations, state management, event listeners, DOM updates.

Learning focus:
This project provided practice managing a continuously changing value while keeping controls and application state synchronized.

29. To-Do App

What it does:
Allows users to add, complete, remove, and persist tasks.

Key concepts:
Arrays, objects, DOM manipulation, events, LocalStorage, JSON, application state.

Learning focus:
This project provided practice building a small stateful application where data persists beyond a page refresh.

30. Weather App

What it does:
Searches for a location and displays weather information retrieved from an external API.

Key concepts:
Fetch API, REST APIs, JSON, async/await, search, error handling, loading states, dynamic UI.

Learning focus:
This project brought together several concepts from the challenge into a complete API-driven application with asynchronous data and multiple UI states.

🔄 Continuous Improvement

Completing all 30 projects marks the completion of the challenge, but it does not mean the implementations are final.

Projects can be revisited to improve:

Code quality
Validation
Error handling
UI/UX
Accessibility
Responsiveness
Performance
Code organization
Maintainability
Reusability

The first working implementation is useful as a starting point. Reviewing older projects provides an opportunity to apply newer understanding and improve earlier code.

📝 Documentation

Each individual project contains or can contain its own README documenting the implementation in more detail.

Project-level documentation can include:

Project description
Features
Technologies
Concepts learned
Project structure
How it works
What I learned
Future improvements

The main README serves as the high-level overview and index of the complete 30-project challenge, while each project README provides implementation-specific documentation.

🚀 Long-Term Goal

The purpose of this repository was to build stronger confidence with JavaScript fundamentals through repeated implementation.

Rather than treating JavaScript concepts as isolated syntax, the projects provided opportunities to use them in different situations: building interfaces, handling user input, managing state, working with browser APIs, consuming external data, debugging problems, and improving existing code.

The core learning cycle throughout the challenge was:

Understanding → Implementation → Debugging → Iteration

Completing these 30 projects is one step in building a stronger foundation for more complex JavaScript, frontend, backend, and software-engineering work.

👨‍💻 Author

Prateek

Learning, building, and improving one project at a time.

Name		Name	Last commit message	Last commit date
Age Calculator		Age Calculator
Anolog Clock		Anolog Clock
Barcode Generator		Barcode Generator
Bmi Calculator		Bmi Calculator
Box Shadow Generator		Box Shadow Generator
Cocktail Search App		Cocktail Search App
Country Guide App		Country Guide App
Currency Converter		Currency Converter
Digital Clock		Digital Clock
Dynamic Calender		Dynamic Calender
Github Profile Search App		Github Profile Search App
Guess the number Game		Guess the number Game
Hangman Game		Hangman Game
Interest Calculator		Interest Calculator
Language Translator		Language Translator
Memory Card Game		Memory Card Game
Movie Info App		Movie Info App
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation