20 Web Projects With Vanilla JavaScript

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.