20 Web Projects With Vanilla JavaScript

Build a client side form validator with HTML, CSS, and JavaScript, starting with simple checks and then refactoring into dedicated functions for required fields, length, and password matching.

Learn to build a form validator project using HTML, CSS, and JavaScript with a three-file setup (index.html, style.css, script.js), Emmet boilerplate, and a clear id/class structure for validation messages.

Learn to set up a responsive form layout using Open Sans, border-box, and flexbox, center content, style inputs, and manage error and success states with CSS variables.

Add vanilla JavaScript form validation by first using simple if statements to enforce required fields and valid email via a regular expression, then refactor into modular validation functions for scalability.

Refactor form validation by replacing inline checks with a reusable check-required function operating on an input array, using for-each and template strings to display 'username is required' messages.

Implement input validation by checking required fields, enforcing username length (3–15) and password length (6–25), validating email format, and ensuring passwords match with clear error messages.

Build a movie seat booking user interface where users select seats and view dynamic pricing. Save selections and movie data to local storage to persist state.

Create the movie seat booking html scaffold, link style.css and script.js, add a movie select and a seats showcase with occupied, selected, and open seats, plus a dynamic summary.

Learn to style a cinema seating ui with css using Lato, flexbox centering, responsive seats, selected and occupied states, hover effects, and a perspective screen.

Select seats and movie options using DOM selectors and event listeners. Update seat count and total price in real time as users pick seats and switch movies.

Learn to persist seat selections and movie choices by converting selected seats to an index array via map, then saving them and the movie price in local storage.

Populate the UI with saved data by loading selected seats and movie index from local storage, applying the 'selected' class to seats, and updating the movie display on page reload.

Build a custom video player with the HTML5 video tag and JavaScript API, replacing default controls with a styled interface. Add a progress bar, update timestamps, and implement play/pause.

Build a custom HTML5 video player from scratch using vanilla JavaScript, covering file structure, poster image, a range-based progress bar, play and stop controls, and a live timestamp.

Import the Questroyal font and build a responsive flex centered video player with a 50% width screen and a rounded controls bar featuring colored play, stop, and timestamp.

Add functional controls to a vanilla JavaScript HTML5 video player by implementing play, pause, stop, click-to-toggle playback, and synchronized progress and timestamp updates.

Build a video progress bar that scrolls with playback, updates current time and duration, and enables dragging to seek with a range input and minutes and seconds timestamps.

Build an exchange rate calculator using the fetch API to retrieve rates from a third-party API, update the DOM, and support currency swapping.

Build an exchange rate calculator page by creating HTML boilerplate, linking style sheet and script, adding two currency selects and amount inputs, a swap button, and a dynamic rate display.

Style a currency converter interface with a primary color, flexbox, and responsive layouts. Prepare for JavaScript to fetch exchange rates via an API and update the DOM.

Learn to use the fetch API for http get requests to json data, such as items.json, handle promises with res.json, and display results in the front end.

Fetch exchange rates with the fetch API, parse JSON, and update the DOM to power a dynamic currency converter with event listeners, template literals, and a swap feature.

Explore vanilla JavaScript array methods—for each, map, sort, filter, and reduce—through a wealth demo that fetches random user data, formats money, doubles money, shows only millionaires, and totals wealth.

Develop the dom array methods user interface by building the html boilerplate, a sidebar with buttons, and a main area for person wealth, styled with flexbox.

Fetch random users from the randomuser.me API using async/await, create objects with a first name, last name, and random wealth, and push them into a data array.

Render users to the dom using forEach to create and append divs with the person class. Format money and use a default data parameter, then explore map and sort.

Explore the map method returning a new array by doubling money values in a data array, using an arrow function and the spread operator, then updating the dom.

Sort by wealth using JavaScript's sort with a custom compare function; override the default string-based ascending order and implement descending money sorting using A and B, updating the DOM.

Apply the JavaScript filter method to show users whose money exceeds a million, wiring a show millionaires button to filter data and update the DOM.

Learn how to calculate total wealth using reduce by summing each user's money, starting at zero, formatting the result as money, and rendering it in the DOM.

Build a landing page with a left sliding menu and a modal, triggered by a hamburger and sign-up button; the modal fades in and closes by button or outside click.

Create a landing page with a menu slider and modal, using CSS and minimal JavaScript, including HTML structure, Font Awesome, a logo image, a nav menu, and a signup form.

Style a fixed, off-canvas navbar using CSS variables for primary colors, import a Google font, center a logo, and enable hover underline; start hidden with translateX(-100%).

Style the header and modal for a vanilla javascript project with a positioned toggle and a primary color header, then a centered modal over a translucent overlay containing form inputs.

Learn to implement a responsive navigation toggle and a modal with open/close controls using vanilla JavaScript, CSS transitions, and an outside click close feature for engaging web UX.

build a hangman game with vanilla javascript and svg, using a word array, letter guesses, and drawing the figure for wrong answers; includes win, reset, and used-letter notifications.

Learn to draw a hangman figure with SVG inside HTML and CSS, using lines and circles, and style strokes and fills with line-cap for a scalable, customizable canvas.

Style the hangman game layout with a wrong letters panel, a centered word display, and a popup and notification framework; apply base CSS, absolute positioning, and letter styling for gameplay.

Create a full-screen pop up container with a semi-transparent overlay and a centered modal using fixed positioning, flex centering, and a dark rgba(0,0,0,0.3). Style the pop up with a blue content area, white button, rounded corners, padding, and a smooth show effect that translates the notification into view.

Build a word display mechanic in vanilla JavaScript by selecting a random word, rendering letters in the DOM with spans, tracking guesses, and revealing a win popup.

Implement a window keydown handler to capture A–Z inputs and update correct or wrong letters arrays. Refresh the display word and wrong letters, and show a notification for repeats.

Build a vanilla JavaScript hangman game that tracks wrong letters, reveals figure parts, and detects win or loss, with a popup and a play again button.

Build a meal finder app using the Meal DB API to search meals by keyword, view results with images and titles, inspect details and ingredients, and a random meal feature.

Construct the meal finder interface with a container, search input, and submit and random buttons. Fetch meals from the Meal DB API and render them in the DOM.

Learn to implement a meal search feature using the mealdb API with JavaScript: fetch results, render a grid of meals, handle empty searches, and show hover overlays.

Click a meal to fetch its single meal details by id using the data-meal-id attribute. Render the title, image, category, area, instructions, and a mapped ingredients list in the DOM.

Style the single meal view with responsive css and ingredients. Implement a random meal feature using fetch to render a meal in the dom.

Create an expense tracker app to monitor income and expenses, compute total balance, and apply high order array methods. Store data in local storage with red expenses and green income.

Design the expense tracker HTML layout, including a balance display, an income and expense container, a history list, and a form to add transactions with text and amount fields.

Style an expense tracker UI using CSS variables for box shadows, a flex column layout, and responsive cards. Implement income and expense colors, hover-revealed delete buttons, and polished inputs.

Show how to render transaction items from a dummy array by building DOM elements, determining income or expense signs, formatting amounts, and appending to the transaction history.

Learn to compute balance, income, and expenses from a transactions array using map, filter, and reduce. Display results in the dom and prepare to store them with local storage.

Add and delete transactions by submitting a form, prevent default, validate inputs, generate an id, update the transactions array and the DOM, and plan to persist data with local storage.

Persist transactions to local storage by reading 'transactions' with local storage and parsing it with JSON.parse, defaulting to an empty array, then stringify and save after each add or remove.