Build 18 Real World JavaScript Development Projects Bootcamp

Build a ballast application to reorder a list of top 10 richest people, scramble items, and verify order with green or red cues while mastering JavaScript functions and event listeners.

Build a starter web page in Visual Studio Code using HTML structure and elements, including h1 and anchor tags, a draggable list, and a check order button.

Create a list of the top 10 richest people by copying the data with the spread operator, looping with forEach, setting each li's data-index, and appending to the DOM.

Scramble a JavaScript list in real time using map and sort by a random key, then map objects back to names after drag-and-drop to form the correct order.

Style the app using CSS by centering content with flex, removing bullets, and applying borders and colors via variables; show green for correct order and red for wrong, with drag-and-drop.

Add drag and drop functionality to a JavaScript app by wiring drag events, tracking start and index, handling drag over and drop, swapping items, and applying visual cues.

Press the check button to run a function that compares each list item's index to the original sequence and marks matches green or mismatches red.

Build an analogue clock application using pure JavaScript, mastering clock math, hand movement, and styling with transform while linking IDs with JavaScript for a live, accurate time display.

Explore the math behind an analog clock in JavaScript, computing hour, minute, and second hand rotations with 30, 6, and 6 degrees per unit to show any time.

Build an analog clock web app using html, css, and javascript in visual studio code, with live server previews, a clock face, and a centered background.

Add the hour, minute, and second hands to a clock and make it responsive across devices by styling height, width, position, margins, and opacity, then test in the browser.

Build a real-time analogue clock in JavaScript by updating every second with setInterval, calculating hour, minute, and second rotations, and using CSS transform rotate with transform-origin bottom.

Build and animate a clock on an html page by rendering a clock face with a minute hand and a second hand, updating rotations with date-based calculations.

Learn to build a javascript book list app named my booklets using object oriented programming with classes, dom manipulation, and local storage to add, delete, and persist books in json.

Using Visual Studio Code, create index.html and script files in a folder, link Bootstrap and Bootswatch, add Font Awesome icons, and design a 'my book list' heading with bootstrap styling.

Build a client-side book list with html and bootstrap, including inputs for title, author, isbn, and a submit button. Create a table with delete buttons, saved to local storage.

Create a book class to model books and a store class to manage local storage, display, and removal of books in a browser-based list using forEach and dynamic UI updates.

Update the book list by rendering stored books from local storage into a bootstrap table, with a delete button, using a DOMContentLoaded event to auto-run.

Capture user book details from the form, create a book object with title, author, and ISBN, and display it in the books table while preventing default submit and clearing fields.

Implement a delete button that removes a book entry by targeting the clicked element and removing its parent AirTag from the list, and validate inputs with on-page alerts.

Learn to build and display failure alerts with vanilla JavaScript by creating a div, applying bootstrap alert classes, and inserting it between the heading and form.

Display alerts for missing input and successful actions in a JavaScript app. Auto dismiss them after three seconds with setTimeout and show danger or success messages persisting in local storage.

Master get books, add books, and remove books patterns to manage a books list in local storage, using JSON stringify/parse for persistence across sessions.

Build a client-side book list app with object-oriented JavaScript, using classes for books, a UI handler, and local storage, featuring a bootstrap-styled form, table display, and add/delete with validations.

Build a web-based music player using JavaScript with a custom playlist, play/pause, next/previous, shuffle, loop, and a timer/seek feature. Explore DOM manipulation, events, and math functions powering playback.

Set up a Visual Studio Code music player project, organize folders for images and songs, create index.html, style.css, and script.js, and integrate material icons with a live server preview.

Build a music player control bar with play/pause, previous, next, and playlist icons using material icons in HTML, and expose a hidden music list toggled by the playlist button.

Import the poppins font from google fonts, define color variables, and style the body and wrapper to build a music player with hover effects, a now playing area, and a gradient progress bar.

Define a music library as an array of song objects with name, artist, and image, then bind DOM elements with querySelector to control play, next, and progress.

Learn to implement JavaScript music player controls: load random songs, play and pause, and navigate with next and previous buttons while updating song name, artist, and UI.

Add event listeners to play/pause, next, and previous buttons to control music playback and update the progress bar and timer from the audio current time and duration.

Learn to update the current time by clicking the progress bar with an event listener, using offsetX and duration, and manage play, repeat, repeat one, and shuffle with a playlist.

Create and manage a dynamic music playlist by handling click events to open the playlist, render song items with titles, artists, and durations, and enable playback with JavaScript.

Learn to implement a click-to-play music playlist in JavaScript by selecting song elements, managing play states, updating duration, and syncing UI messages with the currently playing track.

Build a web music player by structuring folders, loading assets, and using JavaScript to manage an allMusic list, play/pause, next/previous, shuffle, repeat, and a dynamic playlist with a progress bar.

Build a real-world dictionary web app with JavaScript by fetching meanings and synonyms from a dictionary API, displaying them in a scrollable card, and enabling pronunciation playback.

Learn to build a dictionary app in Visual Studio Code by creating HTML and JavaScript files, wiring a search input, and handling on-keypress events to fetch meanings from an API.

Design and implement a dictionary app by fetching word meanings with the Free Dictionary API, displaying the word, phonetics, meaning, synonyms, and audio in a responsive card layout.

Designs a real-world JavaScript layout by styling meaning and synonyms sections and embedding audio controls, using pills and scrollbar styling. Uses media queries to ensure mobile-friendly responsiveness.

Explain how application programming interfaces enable two apps to communicate, define endpoints and parameters, and outline authentication and request–response flows using real-world examples.

Fetch the word meaning from an api by appending the user input to the endpoint, then display the meaning, definitions, phonetics, audio, and synonyms in the results section.

Learn to fetch word data from an API using async/await, parse JSON, and extract phonetics, meanings, and synonyms. Implement DOM updates to show results when a user types a word.

Fetch and set the audio source for word pronunciation, then display meanings and definitions and render synonyms by iterating over data and updating the DOM.

Handle corner cases in an application by validating api responses and status codes like 200 and 404, and guard logic to show messages when words or synonyms are unavailable.

Learn how to display error messages for a dictionary app when API responses fail, hiding audio, synonyms, and meanings, and showing no definitions found for invalid words.

Build a dictionary web app by fetching word meanings from an API, displaying phonetics, pronunciation audio, meanings, and synonyms, with responsive UI and robust error handling.

Build a pure JavaScript to-do list web application with local storage, featuring add, edit, delete, and mark as completed tasks across all, to-do, and completed sections.

Set up a to-do list app in Visual Studio Code, create core JavaScript and storage files, and integrate Bootstrap via CDN for a responsive UI with live preview.

Create and structure a dynamic to-do list app using html and bootstrap, including a form with input and add button, and tabbed all and completed sections.

Replace to-do elements with bootstrap icons, customize and color icons, and set up the HTML for JavaScript actions and local storage to manage the list.

Create a dynamic to-do list in JavaScript by wiring a form with query selectors, handling add-item events, and validating input. Build todo objects with name, done, and timestamp, stored locally.

Learn to store and fetch to-do items in local storage by creating functions to save, retrieve, and display an array of task objects in a JavaScript project.

Fetch and display to-do list items from local storage using a higher-order JavaScript method and a for each callback to render items with edit and delete options.

Build a retro-look snake game in pure JavaScript, move with arrow keys to collect items at random positions, grow the snake, and track score and high score when hitting walls.

Set up a snake game project with a clear folder structure and HTML boilerplate using Visual Studio Code, organizing assets like images, music, and scripts.

Create a CSS board for a snake game with an 18x18 grid and gradient background, and implement a JavaScript loop using requestAnimationFrame to render the snake and food.

Define the snake head and food with X and Y coordinates on an 18 by 18 grid, and render the head and tail as the snake moves with keyboard input.

Develop the snake game logic using an arrow key listener and switch-case to move the snake, eat food, grow, and handle game over and restart.

Learn to implement the snake's movement in JavaScript by updating each segment to follow the head, and handle growth when eating food, speed, collisions, and food sounds.

Develop collision logic for a snake game by detecting head-to-body and wall collisions using x and y coordinates, trigger game over, and update score with local storage high score.

Increase the score each time the snake eats food, track the high score on game over, regenerate food at random positions, and display the score with a styled score card.

Store and display the game's high score using browser local storage, initializing to zero, persisting data with JSON.stringify, and updating the UI via the DOM on page load.

Update the snake game's high score by comparing the current score to the stored high score and saving the new value to local storage as a string.

Build a JavaScript snake game using an 18x18 grid, with a movable head and body, food, score tracking, keyboard controls, and local storage persistence.

Build a JavaScript browser game by manipulating the DOM and handling keyboard events. Move a dinosaur, jump over a monster, and update score while playing audio on game over.

Create a dragon game folder in Visual Studio Code, add HTML, styles.css, and script.js, include assets and fonts, and use live server for real-time testing.

Reset margins and padding, set a red body with a blue game container, and use CSS background images with no-repeat and absolute positioning to display the dragon and dinosaur.

Move the dinosaur with up, left, and right keys using JavaScript keydown events, and animate jumps with CSS keyframes via add/remove class and setTimeout for continuous motion.

Add continuous dragon obstacle animations using keyframes, with a linear five-second infinite motion; implement collision detection between dinosaur and obstacle via getComputedStyle and interval checks, and stop on game over.

Determine collision by comparing dragon and dinosaur offset X and offset Y; trigger game over when left property difference is under 93 and reveal game over, removing the obstacle.

Add right and left movement for the dino by updating its left position in 112-pixel steps with the arrow keys, and increment the score when jumping over the monster.

Track a score and cross flag, incrementing when the dinosaur jumps over a monster, and use setTimeout to increase obstacle speed after each jump, enforcing game over on collision.

Add a game over message and sound that trigger on collision, displaying centered text and borders. Use a timeout to pause audio and show 'reload to start over'.

Learn how to assemble a dragon and dinosaur game: set up the HTML and assets, implement animations, keyboard controls, collision detection, scoring, and game over logic with audio.

Build a pure JavaScript quiz app with a dynamic question board, scorecard, and leaderboard, and learn DOM manipulation, event listeners, arrow functions, and higher-order methods across multiple files.

Showcasing how to create a web quiz home page using Visual Studio Code, HTML, CSS, and JavaScript, with play and high score navigation and a live server for real-time updates.

Design the background of a vintage style app by integrating Font Awesome icons, Google Font Nova Square, and responsive CSS using flex layout to center content.

Design the home page buttons by styling anchor tags with class and id selectors, adjusting font size, padding, color, and a gradient background with hover transitions and glow.

Create a quiz page by building the HTML structure, styling with CSS, and using JavaScript to populate questions, render choices, show progress, and track the score.

Design and style the quiz page by building a responsive choices container with hover effects and a progress bar, while preparing JavaScript to apply correct and incorrect colors to options.

Create a JavaScript quiz by fetching questions and choices, storing them in variables, rendering options, tracking score, and updating a progress bar as users answer.

Create a dog quiz game using an arrow function, initialize questions with the spread operator, fetch new questions at random, and store the score in local storage.

Implement quiz answer checking in JavaScript by capturing choice clicks, validating the answer, showing feedback, updating the score, and advancing to the next question.

Create the end page for the game using HTML, with a name input and a disabled save button that enables when a name is entered, including a Font Awesome icon.

Design the end page for the quiz by styling the container and controls with a flex column layout, margins, padding, and shadows; add save, play again, and go home buttons.

Add JavaScript to the end page by reading and saving the most recent score in localStorage, updating a five-entry high scores leaderboard, and redirecting to the home page.

Display the high scores leaderboard for the high school page by fetching data from local storage and rendering the list with JavaScript, HTML, and CSS.