The JavaScript Bootcamp: Build 20 Real World Projects

Build a sortable to-do list app to learn JavaScript manipulation, array methods, and events, with real-time feedback via green and red order indicators.

Create a sortable list project in VS Code, write HTML, CSS, and JavaScript, and run with Live Server to test drag-and-drop, using ID for JavaScript and a class for CSS.

Generate list items from an array of top ten richest people, assign data-index attributes, and append them to the drag list in the DOM.

Style a real-world app page with CSS by importing a Google font, centering a draggable list, and applying variables for colors and borders while adding hover and button effects.

Learn to implement drag and drop in a JavaScript app using the XHTML drag and drop API, wiring dragstart, dragover, drop, dragenter, and dragleave to swap items.

Press the check order button to run check order function that iterates over list items, compares each name to its original index, and marks mismatches red and correct ones green.

Explore the mathematics behind an analogue clock using the unitary method to compute hour, minute, and second hand rotations. Implement the three formulas in JavaScript for a responsive clock.

Build an analog clock web app using html, css, and javascript in Visual Studio Code, including a clock face, background image, and a centered container with clock hands.

Learn how to build a responsive clock by styling the hour, minute, and second hands with CSS, adjusting size, position, and opacity, and testing the layout across devices.

Use setInterval with an arrow function to update every second, get hours, minutes, and seconds from new Date, and apply CSS transforms with transform-origin bottom.

Builds a web clock by creating an HTML page with a clock container and three hands, uses new Date to compute time, and rotates hands with CSS transforms.

Build a browser-based book list app using object-oriented programming with classes for books and the user interface, manipulating the DOM, and persisting data in local storage via JSON.

Learn to organize a folder structure in Visual Studio Code, create index.html and script.js, and design a Bootstrap header with an open-book icon and a blue heading using Font Awesome.

Add a book form with title, author, and ISBN fields, a submit button, and a table to display added books, styled with Bootstrap and powered by JavaScript and local storage.

Develop a JavaScript app architecture with a book class, a UI class, and a store class using local storage to display, add, and remove books in a browser table.

Add an event listener to display books by dynamically creating tr and td elements, filling title, author, and ISBN from stored books, and adding a delete button.

Capture user input for title, author, and ISBN, create a new book object, prevent the default form submit, and append the book to the on-page list using the UI class.

Add a functional delete button to remove a book entry from the list, implement a delete handler in the UI class, and introduce validation and in-page alerts for missing fields.

Build a show alert method with DOM by creating a div with the alert class and bootstrap alert-success or alert-danger, then append a message as a text node.

Learn how to display alerts for validation and actions, use setTimeout to auto-hide messages after 3 seconds, and show both danger and success notifications when adding or removing books.

Build a local storage backed books list by fetching, adding, and removing books with a store class, using JSON.parse and JSON.stringify to persist title, author, and ISBN.

Explore building a book management app with HTML, Bootstrap, and Font Awesome icons, and a class-based UI that stores, displays, and removes books in local storage.

Explore folder structure for to-do app in Visual Studio Code by creating index.html and a JavaScript file, wiring Bootstrap via CDN, using Bootstrap icons, and enabling local storage.

Learn to add dynamic content to a page using HTML and Bootstrap by building a todo list with a form, input, add item button, tabbed sections, and a responsive list group.

Learn to replace to-do controls with bootstrap icons, use icons in html, customize colors and font sizes with css, and add javascript to manage list items and local storage.

Link and test a to-do app's JavaScript, select DOM elements with querySelector, handle form submission, validate input, and create to-do objects with name, done, and added time.

Create a to-do item from user input, push it to the to-do items array, and save it in local storage. Fetch and display stored items on DOMContentLoaded.

Fetch items from local storage with a get list function and render them into a UL using insert adjacent HTML for each item, showing no record found when empty.

Build a JavaScript music player web app with play/pause, next/previous, shuffle, loop, and a customizable playlist, plus a timer, scrubber, and DOM-driven controls.

Learn to set up Visual Studio Code for a music player project with folders for images and songs, and build an html layout with a top bar and audio element.

Create a music player UI in HTML with play, pause, next, and previous icons using material icons, a playlist panel, and a dynamic music list powered by JavaScript.

Design a music player application using CSS, with the Poppins font, color variables, and gradients. Style the top bar, controls, thumbnail, song details, progress bar, and playlist.

Builds the JavaScript foundation for a music player by organizing a songs array with name, artist, image, and src, linking scripts, and selecting DOM elements for controls, playlist, and progress.

Build a JavaScript music player that randomly selects songs, loads and displays name and artist, and controls play, pause, next, and previous with click events.

Add event listeners to play/pause, previous, and next buttons to control music playback and update a live progress bar with current time and duration.

update the music time by clicking the progress bar, mapping click position to time using the progress area width and song duration, and implement loop, shuffle, and playlist controls.

Wire click events to a more music button and a close button, toggle the playlist, and render songs with duration and audio playback in a dynamic ul.

Build a playing zone that marks the current song as playing and toggles the playing state while updating duration. Enable clicking a song to load and play it.

Build a music player by organizing the folder structure, linking index.html and css, creating a music list array, and implementing audio controls, playlist, shuffle, and repeat.

Build a dictionary web app with JavaScript that fetches meanings, pronunciations, and synonyms via a dictionary API, while mastering DOM manipulation, events, async/await, and audio playback.

Build a dictionary app with a basic folder structure in Visual Studio Code, create index.html, styles.css, and script.js, and handle input and enter key events to fetch meanings.

Explore how to integrate a dictionary API to fetch word meanings and phonetics, render results in a styled card with audio, synonyms, and definitions using HTML, CSS, and JavaScript.

Design and implement a CSS-driven interface for meanings, phonetics, and synonyms, with padding, typography, pills, and a custom scrollbar, plus responsive media queries for mobile devices.

Explore what an API is and how two servers exchange data to fetch meaning, weather, or quotes, using endpoints, paths, parameters, and authentication.

Learn to fetch word meanings from an API by building a DOM-driven interface that queries document elements, handles async requests, and displays phonetics, meanings, and audio.

Fetch data from an API with async/await, parse JSON, and display the word, phonetics, meaning, and synonyms in a result section, toggling visibility on user input.

Learn to fetch word data from an API and display meanings and synonyms in a web app, while wiring audio pronunciation and handling dynamic DOM updates.

Handle api failures and server errors with status checks and conditional rendering, showing definition not found or no synonyms. Test endpoints with Postman to refine resilient logic.

demonstrates handling api errors by displaying no definitions found and hiding the audio tag, the meaning, and synonyms when the status code is 404.

Explore building a dictionary app that fetches word meanings, phonetics, pronunciation, and synonyms via an application programming interface, with a responsive user interface and robust input handling.

Build a retro snake game with pure JavaScript, moving with arrow keys to collect tiles and grow, while tracking scores using DOM manipulation and ES6 features.

Learn folder structure and html setup for a snake game project. Create index.html, organize js, css, img, and music folders, and link scripts to render the board and scores.

Create a CSS driven 18 by 18 snake game board using a grid, gradient background, and styled head and food tiles.

Display the snake head and food on 18 by 18 grid, using an x-y coordinate array for the snake and a single object for the food.

Derive the logic to move a snake with arrow keys, handle input direction updates, detect wall collisions, grow the tail on food, and respawn food at random grid positions.

Move the snake by shifting each body segment toward the head with a for loop in JavaScript, updating positions via the input direction, and handling food, growth, and collisions.

Implement the game over condition by detecting self-collision and boundary exits in the snake game, comparing the head's x and y with body segments and grid limits.

Derive the logic to increment the score each time the snake eats food, track and update the high score, and style the scorecard using CSS and a Google font.

Store and display the high score using browser local storage, initializing to zero when absent, and update the UI with getItem, setItem, removeItem, and JSON.stringify/JSON.parse.

Compare the score to the high score; if higher, save the new value to localStorage with setItem and JSON.stringify, and update the HTML high score.

Explore the structure and features of a JavaScript snake game, including HTML, CSS, and JS integration, an 18 by 18 grid board, food, snake movement, and local storage high scores.

Explore building a browser game with a jumping dinosaur and monster, using JavaScript to move images, detect collisions, update the score, and work with DOM manipulation and event listeners.

Set up dragon game project in Visual Studio Code, create index.html, style.css, and script.js, load fonts via Google fonts, and run a live server to display score and game over.

Style a scene with CSS by resetting margins and padding, using a red body and blue game container, and position the dinosaur and dragon with absolute positioning and background images.

Learn to make a dinosaur jump and move with keyboard arrows in JavaScript by detecting key codes (38, 37, 39), toggling an animate-dynamo CSS class with setTimeout and DOM methods.

Add keyframes to animate an obstacle moving from right to left, implement infinite linear motion, set overflow to hidden, and apply collision detection using setInterval and getComputedStyle with DOM queries.

Determine collision by comparing obstacle and dinosaur left and top offsets; trigger game over when offset x is under 93 and offset y under 52, revealing the game over visibility.

Implement left and right arrow movement by updating the dinosaur’s left position by 112 pixels from its current value, and increment the score when it jumps over the monster.

Implement a browser game score system that increments on crossing the monster, uses a cross flag to prevent repeats, and gradually increases obstacle speed by adjusting animation duration.

Add a game over message and sound to a dinosaur game by updating the DOM, centering the message, playing the audio on collision, and offering a reload prompt.

We built a dragon game web app with a dinosaur, creating HTML, CSS, and JavaScript files, and implementing score tracking, game over, and keyboard-driven animations.

Create a pure JavaScript quiz app using DOM manipulation and event listeners, with arrow functions and array methods; separate html and js files enable clean scoring and a leaderboard.

Learn to scaffold a JavaScript quiz app in Visual Studio Code by creating index.html, style.css, game.html, and high score pages, linking the home page to game and leaderboard.

Design the background using Font Awesome icons and the Nova Square font from Google, integrating the script into the head and styling with css. Center content with a flex container.

Design and style the home page buttons with CSS, tuning font size, padding, weight, and alignment, applying gradients, rounded borders, hover effects, and a high score button via its id.

Create the quiz page by wiring html, css, and javascript to build a dynamic game with a progress bar, score, questions, and multiple choices tracked by data-number attributes.

Design the quiz page by styling the body, option containers, and a blue background; add hover effects and gradients for correct or incorrect answers, plus a responsive progress bar.

Learn to create a JavaScript quiz by fetching HTML elements and building a questions array with choices and the correct answer, while tracking score and progress.

Create a start game function using arrow function syntax, initialize the question counter to zero, and use the spread operator to load available questions for a randomized quiz.

Verify the user's chosen option, attach click listeners to each choice, apply correct or incorrect feedback, and increment the score by 100 before loading the next question.

Design the end page of a quiz app using CSS and HTML, centering a form container and styling inputs, placeholders, and buttons like save score, play again, and go home.

Display the leaderboard by building a high scores page with HTML, CSS, and JavaScript; fetch and render scores from local storage into a dynamic list, forming a functional leaderboard.