The JavaScript Bootcamp: Build 20 Real World Projects

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.