30 JavaScript Projects in 30 Days – HTML, CSS & JS

Build a dynamic weather dashboard that fetches real-time weather data from the Openweathermap API and updates the HTML DOM with temperature, humidity, and wind speed based on user input.

Build a real-time cryptocurrency tracker with HTML, CSS, and JavaScript, displaying live prices on a chart using Chart.js and data from the CoinGecko API.

Build a dynamic quiz app that evaluates answers in real time using HTML, CSS, and JavaScript. Create an interactive interface with questions, options, submit button, and instant feedback.

Build a personal budget planner from scratch using HTML, CSS, and JavaScript, enabling users to enter transactions with description and amount, add them, and see a live total balance update.

Build a customizable Pomodoro clock with a live countdown, adjustable work and break durations, a progress bar, and start, pause, and reset controls, implemented in HTML, CSS, and JavaScript.

Build a music player with a canvas visualizer using an audio context, analyzer, and real-time frequency data to animate bars as music plays.

Create a digital clock with multiple time zones using HTML, CSS, and JavaScript. Display local time plus New York, London, and Tokyo, updating every second with accessible formatting.

Create an online code editor with syntax highlighting using Codemirror, featuring theme and language dropdowns, file upload, save as text, and an editable text area with line numbers.

Build language learning flashcards with French front and English back, navigable by previous and next buttons, and flip on click using a 3D CSS flip and JavaScript data array.

Build a drag-and-drop task manager with todo, in progress, and done columns. Add tasks via an input and button, then move them between columns using drag and drop events.

Learn to create a travel journal and map integration using the leaflet library, enabling clickable locations to add entries and display markers with popups.

Build a web photo editor that uploads an image to a canvas. Apply filters like sepia, grayscale, invert, and brightness using four buttons and a JavaScript applyFilter function.

Build a landmark search app that fetches Wikipedia data to display titles, images, snippets, and links, using HTML, CSS, and JavaScript with a fetch workflow and error handling.

Design and build a customizable workout planner with HTML, CSS, and JavaScript, enabling users to add exercises, choose type and duration, and generate a random workout.

Build a 4x4 memory matching game with 16 cards that flip to reveal letters, match pairs, and disappear, using html, css, and javascript for interactive gameplay.

Build a simple meal planner that lets you add meals with calorie counts using input fields and see the total calories update in real time.

Build a book finder app to search by title, author, or keywords and display results with title, author, publication date, description, and cover image using Google Books API.

Build a canvas painting app with an 800 by 600 canvas, color picker, and brush size slider. Implement mouse drawing with adjustable stroke color and width.

Create a responsive photo gallery app with a search box to filter photos by tags, using flexbox for layout and real-time updates.

Build a movie finder app that searches movies by title and displays results in a styled gallery, fetching data from the Omdb API with a provided API key.

Create a color generator app that produces random hex colors, displays the color and its hex code, and copies the hex code to the clipboard with generate and copy buttons.

Create a garden planner and scheduler that lets users add plants with names, types, and planting dates, then schedule tasks for each plant using a form-driven interface.

Build a full-screen canvas water ripple effect by clicking or dragging to spawn expanding, fading ripples that animate with requestAnimationFrame.

Build a student grade tracker with HTML, CSS, and JavaScript. Learn to add grades, display a list, and compute the average grade in real time.

Build an animated bar chart with a canvas using HTML, CSS, and JavaScript that updates when you click the update data button. Bars animate toward new values.

Create a bouncing balls animation on a canvas using HTML, CSS and JavaScript, with ten colorful balls that bounce off the edges, and a draw-update loop with resize handling.

Build a simple contact management system with HTML, CSS, and JavaScript to add, display, and remove contacts, using a form and dynamic UI updates.

Create a BMI calculator with HTML, CSS, and JavaScript that lets users enter height and weight, and shows BMI and its category.

Build a canvas-based catch the ball game that animates a ball with requestAnimationFrame and updates the score on clicks, using HTML, CSS, and JavaScript.

Develop a temperature converter project using HTML, CSS and JavaScript to convert between Celsius and Fahrenheit with input fields and convert buttons.