20 JavaScript Projects: Build Real Apps for Portfolio Today

Explore a sortable list app to learn DOM manipulation, JavaScript functions, array methods, and event listeners as you reorder names and validate the correct order.

Build the html structure for a draggable list app in Visual Studio Code, including an h1, a draggable ul, a check button, and Fontawesome icons, then run Live Server.

Create a draggable list from a top ten richest people array by generating list items, assigning data-index attributes, and appending them to the dom for interactive reordering.

Learn to scramble a list by mapping an array to objects with value and a random sort value, then sort and map back to strings for a draggable list.

Style the app using CSS by importing a Google font, applying box-sizing, centering content with flexbox, and building visually polished, draggable list items with responsive colors, borders, and interactive states.

Implement drag and drop in a JavaScript app using the Drag and Drop API. Wire drag start, drag over, drop, drag enter, drag leave swap items and apply over class.

Attach a click event to the check order button and define a function to compare each list item against its original index. Toggle right and wrong classes to indicate correctness.

Build an analog clock app using HTML, CSS, and pure JavaScript, and learn clock-math basics, setInterval, date functions, style transforms, and linking HTML ids with JavaScript to animate the hands.

Create an analog clock project in Visual Studio Code by building HTML, CSS, and JavaScript with a clock container and hour, minute, and second hands; preview with a live server.

Build a responsive clock by adding the hour hand, minute hand, and second hand with css styling. Test responsiveness in console and adjust positioning for a centered clock across devices.

Write JavaScript to drive an analog clock, updating every second with setInterval, computing hours, minutes, and seconds from new Date, and rotating hands via CSS transform with transform-origin.

Explore building an analog clock with HTML, CSS, and JavaScript by rendering clock hands, applying a rotation formula, and updating every second with setInterval using new Date.

Build a JavaScript application named My Book List that uses object oriented classes and objects, local storage, DOM manipulation, and JSON to add, display, and delete books.

Learn to set up a JavaScript project in Visual Studio Code, organize files in a folder, and design a Bootstrap-powered heading with an open-book icon using Font Awesome.

Create an HTML form with title, author, and ISBN number inputs and a submit button; use JavaScript to render the list in a Bootstrap striped table stored in local storage.

Create a book management module in JavaScript by building a book class, a UI class, and a store class that handles display, addition, and removal of books using local storage.

Create and append table rows for books by building tr and td elements, filling them with title, author, and ISBN, and render the list with a dom content loaded listener.

Capture user input from the add book form, instantiate a book object, and update the UI table with add book to list while preventing default submit and clearing fields.

Add a delete button to remove a book entry from the list and implement validation to prevent empty fields. Display in-page alerts to guide the user when inputs are missing.

Build a show alert method that creates a div, applies alert and alert-success or alert-danger classes, sets the message with a text node, inserts the alert between heading and form.

Show how to display danger and success alerts when adding or removing books, auto dismiss via setTimeout after three seconds, remove alerts from the DOM, and enable local storage persistence.

Learn to implement a local storage store for a books app, adding, retrieving, and deleting books with JSON stringify/parse, and updating the UI to reflect changes.

Create a bootstrap-based HTML page with fontawesome icons to add, display, and remove books using a JavaScript class system (Book, UI, Store) and local storage.

Build a web music player with a custom playlist using pure JavaScript, featuring play/pause, shuffle, next/previous, and a song timer. Learn DOM manipulation, audio controls, and event handling.

Create a structured JavaScript project in Visual Studio Code for a music player, with folders Music Player, images, and songs, and the files index.html, styles.css, and script.js.

Create a HTML music player control with play/pause, previous, next, and a playlist icon, plus a hidden music list with a header opened by the playlist button.

Designs a music player UI using CSS, importing the Poppins font, defining color variables, and styling the wrapper, top bar, progress bar, thumbnails, song details, and the playlist.

Build a functional music player by creating a six-song array in music list.js and wiring script.js to control playback, DOM selection with querySelector, and playlist interactions in the HTML.

Shuffle songs by selecting a random index from the all music array with Math.floor and Math.random, then load its name, artist, image, and audio, and manage play, pause, next, previous.

Add event listeners to the play/pause, previous, and next buttons to control music playback. Update the progress bar and timer in real time with time update and loaded data events.

Update music playback by clicking the progress bar to seek, using event listeners and duration-based calculations to set current time, and support loop, shuffle, and playlist behaviors.

Attach click listeners to the more music and close buttons to toggle the playlist, then populate the ul with each song’s name, artist, and duration in minutes and seconds.

Create a JavaScript-powered music player by selecting all playlist items, extracting and displaying duration, toggling a playing state, and wiring click events to load and play a chosen track.

Build a web music player with html, css, and javascript, featuring a playlist, audio tag, progress bar, and playback controls, plus dynamic playlist creation and repeat or shuffle options.

build a dictionary web app that searches words, shows meanings, pronunciation, and synonyms via a dictionary api, while mastering dom manipulation and async/await for api data.

Set up a folder-based dictionary app layout in Visual Studio Code with index.html, styles.css, and script.js, including a container, header, and enter key input handling.

Design and implement a dictionary feature by integrating the free dictionary API to fetch a word’s meaning, phonetics, and synonyms, and render a styled UI with HTML, CSS, and JavaScript.

Explore hands-on css techniques in designing the application part 2 to style inline blocks, meanings, synonyms, phonetics, and responsive layouts with media queries for mobile devices.

Explore how api enables apps to share data, learn about endpoints, paths, parameters, and authentication, and how a dictionary api fetches word meanings for JavaScript projects.

Fetch and select page elements with querySelector, then fetch word data from an API in JSON using async/await. Render the word, phonetics, audio, meaning, and synonyms in the result section.

Fetch word data from an API using async/await, parse JSON, and display the word, phonetics, pronunciation, meaning, and synonyms on page, revealing result section when a user submits a query.

Build real apps with JavaScript by fetching audio sources from an API, parsing meanings and definitions, and rendering synonyms as pills through DOM manipulation.

Explore handling API corner cases in a dictionary app by testing endpoints with Postman, using status codes like 200 and 404, and displaying messages when results or synonyms are unavailable.

Learn to display error messages when a user searches a word not found in the api, hide the audio, show no definitions found, and update data.title and data.message.

Build a dictionary app by structuring HTML, CSS, and JS, fetching word meanings from an API, and displaying meaning, phonetics, pronunciation, and synonyms with responsive design.

Learn to build a pure JavaScript to-do list app with add, edit, delete, and complete tasks, organized into all, to-do, and completed sections using DOM manipulation, localStorage, and ES6 features.

Build a to-do list app in Visual Studio Code, using Bootstrap via CDN, index.html and a JavaScript file with local storage, event listeners, and arrow functions, previewed with Live Server.

Learn to structure a to-do list interface using html and bootstrap, including a container, form with item input, add item button, and tabbed sections for all, to do, and done.

Enhance the to-do app by replacing actions with bootstrap icons via CDN, styling with CSS colors and font sizes, and wiring JavaScript to add items and save to local storage.

Link script.js to the HTML, fetch form, input, and list with querySelector, then on submit validate input and create a todo item with name, done=false, and added time.

Create a function to push new items into the to do items array, save them in local storage with JSON.stringify, and retrieve and render them with JSON.parse on load.

Showcases rendering a local storage to-do list in the UI using a getList function, forEach iteration, and insertAdjacentHTML, with empty state and edit, complete, delete actions.

Build a snake game in pure JavaScript, using DOM manipulation, event listeners, and ES6 features to track score, high score, and random tile placement with arrow keys.

Use Visual Studio Code to organize a snake game project with folders for js, css, img, and music, create html boilerplate, link assets, and test with live server.

Style a snake game board with CSS, including reset margins, background image, and an 18x18 grid for head and food tiles, driven by JavaScript using requestAnimationFrame.

Define a snake array for the head on an 18 by 18 grid, with the head at x 13 and y 15, and render its segments and food as cells.

Apply arrow key input to drive snake movement, update direction and coordinates, and handle food consumption with random repositioning on the grid.

Implement the snake's movement in JavaScript by updating the body from tail to head and shifting each segment to the position, enabling growth on food, speed adjustments, and collision handling.

Implement a game over by detecting head-to-body or wall collisions using x and y coordinates on a 0–18 grid, triggering an alert and stopping the game, with high score tracking.

increment the score when the snake eats the food, regenerate the food, and update the high score as the game ends; display the score in a dedicated score box.

Learn how to store and display a high score using local storage in a web app, including get item, set item, JSON stringify, and parsing to update the high score.

Update the high score by comparing the current score to the stored value, save the new high score in local storage with JSON.stringify, and update the HTML high score display.

Build and summarize a JavaScript snake game: inspect the 18x18 grid board, the score and high score elements, the food and snake visuals, and index.html, styles.css, and index.js integration.

Build a browser game with JavaScript that uses DOM manipulation, event listeners, and keyboard input to move a dragon, jump over a monster, score points, and trigger a game-over sound.

Set up a dragon game project in Visual Studio Code, create index.html, styles.css, and script.js, import fonts, link assets, and prepare live server workflow.

Learn to build a css-based game layout with a red body, blue game container, absolute-positioned dino and dragon obstacles, and display game over and score.

Control a dinosaur in a JavaScript game by handling onkeydown and key codes to move with left and right arrows and jump with up arrows, while a monster runs infinitely.

Animate a dragon obstacle with CSS keyframes from 100vw to 10vw, and stop it on game over; detect collisions with the dino using a setInterval and getComputedStyle.

Determine collision between dragon obstacle and dinosaur using left and top offsets; trigger game over when offset x < 93 and offset y < 52.

Add right and left movement for the dinosaur by handling arrow keys to update its left position with a 112-pixel step, enabling jumping over the monster and avoiding collision.

Track and display the score as the dinosaur jumps over monsters, using a cross flag to increment only on crosses, and increase obstacle speed by adjusting animation duration.

Center the game over message with CSS and style the score container. Play a game over sound via an audio object and update the message with innerHTML.

Explain how the dragon game is built with index.html, script.js, and styles.css, using a background image and dinosaur and dragon assets. Demonstrate keyboard controls and game-over on collision.

Explore building a pure JavaScript quiz app with a dynamic DOM, score tracking, and a leaderboard. Learn DOM manipulation, event listeners, ES6 features, array methods, and modular file structure.

Students learn to scaffold a quiz app with multiple pages in Visual Studio Code, creating index.html, game.html, end.html, and high-score pages with linked CSS and JS.

Designs the app background and UI using Font Awesome icons, imports Nova Square font from Google fonts, and centers content with flexbox while applying cohesive color and typography.

Design home page buttons with the btn class: 2.4rem font, padding, width, center alignment; blue and yellow gradients, rounded corners, hover glow on the high-score button.

Build a functional quiz page by wiring HTML, CSS, and JavaScript. Set up game.html, link game.js, and implement the score, progress bar, question text, and choices with data number attributes.

Design the quiz page using CSS. Style the body and choice container with flex, add hover effects and correct/incorrect gradients, and implement a HUD with a progress bar.

Fetch DOM elements, build a questions array with correct answers, and implement score tracking, progress updates, and a start game function with max questions and a 100-point cap.

Build the quiz start flow with an ES6 arrow function, initialize questions via the spread operator, fetch random questions, store the score in local storage, and update the progress bar.

Learn to verify a user's quiz answer, handle click events, apply correct or incorrect feedback, update score, and load new questions in a JavaScript quiz app.

Create an end page in HTML for quiz app, showing score, input for name, and a disabled save button that enables on entry, with play again and go home links.

Designs the end page UI with a centered end form container, styled input fields and placeholder, white end text, and end.js logic for play again and go home buttons.

Fetch end-page elements and display the most recent score from local storage. Save new scores with usernames, sort descending, limit to five, and return to the home page.

Develop a high score leaderboard page using HTML, CSS, and JavaScript that fetches scores from local storage and dynamically displays the leaderboard for a portfolio-ready game.