Build 19+ JavaScript Projects from Scratch with Code Included
Build 19+ JavaScript projects from scratch with code included, from simple to complex. Learn JavaScript by building fun and useful projects, and start creating your own amazing stuff today.
Implement the JavaScript code so that every time you click the “Party Time!” button in the time range that you specify, you get a different LOLcat. You can set different times to see different images — there are four images total.
3. Magic 8 Ball
Why do this project?
It gives you a solid foundation for how to use Math.random to produce randomized results for JavaScript projects
You can use this project to impress your friends and make small life decisions
Learn more about how to use the random function, nested functions, and event listeners
Copy the source code from GitHub for HTML and CSS.
Implement the JavaScript code so that you can grab the 8 ball, ask it a question, shake it, and have the 8 ball respond with a somewhat enigmatic, somewhat applicable answer.
4. To-Do List
Why do this project?
You’ll beef up your skills at coding interactive lists, which lets users add, remove, and group items
You can use this beginner JavaScript project in your daily life and add it to your portfolio
Learn more about how to use arrays, nested functions, and local storage API
Implement the JavaScript code so that you can accept an animal’s name, species, and energy level as a parameter and indicate each animal’s status (whether they are sleeping or awake).
7. Drum Kit
Why do this project?
You can see the interaction between seeing elements on the page and listening to sound and learning how to add and remove elements
You can use this project to practice your drum skills with your JavaScript skills
Learn more about how to use audio tags and document.querySelector
Install packages with npm and run your local server.
Implement the JavaScript code so that you see your location in real time. You will need iOS or an iOS simulator to test whether or not your code works.
11. Movie App
Why do this project?
It gives you a solid foundation of how JavaScript works with HTML, CSS, and other tools
You can use this project to make your own custom movie app
Learn more about how to use JavaScript with jQuery, Bootstrap, and API calls
Implement the JavaScript code so that you can make your own movie app that lets you view the most popular movies, sort them by genre, and search for other movies.
12. Name Tags
Why do this project?
As a beginner JavaScript project, it lets you practice using React to create a practical and useful tool
You can use this project to hone your React skills and key concepts
Learn more about how to handle user input, work with stateful components, and render array data models
Implement the JavaScript code so that you can build a text box and button to let users input text and have it respond to the input by generating a new name tag!
Intermediate JavaScript Projects
13. Tone.js
Why do this project?
You’ll learn how to create interactive web browser music with advanced scheduling capabilities, synths and effects, and intuitive musical abstractions built on top of the Web Audio API
You can use this project to be your own personal DJ and music producer, for free!
Learn more about how to use event listeners, triggerAttack, triggerRelease, and different kinds of synths
Implement the JavaScript code so that you can add two candidates running for president and display the number of votes they received from each state, both in a table on the bottom right and when you mouse over a state.
15. Login Authentication
Why do this project?
It introduces you to Angular JS and more advanced JavaScript concepts
You can see how login authentication works behind the scenes
Learn more about how to use function states, app controllers, and dependencies
Implement the JavaScript code so that you can enter an email address and password, and have the system tell you if the email address is invalid when you press the “Submit” button.
16. Guess the Word
Why do this project?
It gives you a solid foundation for methods, creating global variables, and working with event listeners
You can use this project as a party game or challenge with your friends and coworkers
Learn more about how to use methods, functions, and regular expressions
Implement the JavaScript code so that players start by entering a letter. If they guess correctly, the letter appears in the word. If they guess incorrectly, they learn how many guesses they have remaining. The player can also see which letters they’ve already guessed. The game lets the player know if they’ve already guessed a letter or entered a non-alphabetic character!
17. Terminalizer
Why do this project?
It teaches you how to record your terminal screen and share your work with others
You can use this project to debug and work on coding projects with friends
Learn more about how to use recording files, frame delays, and set idle times
You won’t be able to clone and run the project straight from GitHub because there is no package.json file, but you can build this using the YouTube tutorial
Implement the JavaScript code so that you can build a real time chat application that lets you send and receive messages using web sockets
19. Tic Tac Toe Game
Why do this project?
This project will test your HTML semantics and your JavaScript logic skills
You can use this as a practice project and for something to do while your code compiles
Learn more about how to use arrays, grid methods, and event listeners
Implement the JavaScript code so that the player can set difficulty level as easy or hard, choose whether to play as X or O, play a game with the computer, have it remember who won or drew, and play again.
20. Hotel Booking App
Why do this project?
You’ll get to practice key concepts in JavaScript ES6 and React JSX
You can use this project to practice building sites with more functionality and use some of your creativity by making it look really spiffy
Learn more about how to manage data flow and manipulate the DOM
Implement the JavaScript code so that you can create a sample booking on a hotel site, complete with filtered search results, room inventory display, and hotel ratings.
Advanced JavaScript Projects
21. Maze Game
Why do this project?
It gives you a solid idea of how JavaScript core skills and functions can be used to create interactive games
You can put this project in your portfolio and challenge friends
Learn more about how to use JavaScript math concepts, create elements, and use loops
Implement the JavaScript code so that you can get the pickle from one end of the maze to another using the arrow functions (or AWSD) on your keyboard, have it display the number of steps it took to complete the maze, and be able to set the difficulty level.