1. JavaScript Pop-Up Window
Difficulty: Easy (2/10)
Resume Value: 3/10
Summary:
You will build an app that demonstrates functionality to display modal with animation on top of the existing page when a button is clicked and hide the modal when closed by the user.
Topics Covered:
CSS basics with position, display, translate, keyframe, etc. JavaScript events, DOM selectors.
2. Counter Project
Difficulty: Easy (2/10)
Resume Value: 2/10
Summary:
You will build a simple counter application using JavaScript which starts from 0 to 1000.
Topics Covered:
JavaScript basics like declaration, DOM, setTimeout(), setInterval(), etc.
3. Image Previewer
Difficulty: Easy (3/10)
Resume Value: 10/10
Summary:
You will build a simple JavaScript application that allows users to select an image file from the system and it will be a preview on the webpage container.
Topics Covered:
CSS flexbox. JavaScript events, DOM selectors, FileReader().
4. Show More/Less Toggle
Difficulty: Easy (3/10)
Resume Value: 4/10
Summary:
You will build an application that displays a list of articles with “read more”/”read less” buttons to toggle the expand option.
Topics Covered:
CSS overflow, position, etc. JavaScript events, DOM selectors.
Source code: codepen.io/webcrunchblog/pen/yGorNE
5. Background Changer
Difficulty: Easy (3/10)
Resume Value: 3/10
Summary:
You will build an application that generates a random RGB color when clicked on a button and update the page background with the color.
Topics Covered:
Math.random(), JavaScript declarations, event, DOM.
6. Weight Converter App
Difficulty: Easy (3/10)
Resume Value: 4/10
Summary:
You will build an application in JavaScript that displays grams, kilograms, and ounces equivalent for user-entered pound value.
Topics Covered:
Bootstrap 4 CSS. JavaScript events, DOM selectors.
7. Quick Autocomplete
Difficulty: Easy (3/10)
Resume Value: 3/10
Summary:
You will build a simple autocomplete app using JavaScript that fetches auto-complete JSON for user input and displays it on search.
Topics Covered:
JavaScript callback, promises, events, DOM selectors, Regex. Fetch API.
8. Building Clock in JavaScript
Difficulty: Easy (3/10)
Resume Value: 4/10
Summary:
You will build an analog clock web app using JavaScript which displays the clock with 3 hands to display hours, minutes, and seconds for the current time.
Topics Covered:
JavaScript DOM selectors like document.getElementById(), document.querySelector(),etc. JavaScript basics like variable and function declaration, Date() object.
9. Filterable List
Difficulty: Easy (3/10)
Resume Value: 4/10
Summary:
You will build a simple application that allows user to enter a value that produces filtered list based on the values on the list that matches with user input.
Topics Covered:
JavaScript events, DOM selectors.
10. JavaScript Zip code App
Difficulty: Easy (4/10)
Resume Value: 5/10
Summary:
You will build an app that allows users to view details of a location by providing zipcode as input. The app further allows users to remove details of previously entered zip codes.
Topics Covered:
JavaScript events, DOM selectors, Promise, callback, etc. Fetch API.
11. Weather App
Difficulty: Easy (4/10)
Resume Value: 4/10
Summary:
You will build a weather app that displays the current temperature in both Fahrenheit and Celsius based on the data sent from external API.
Topics Covered:
CSS flexbox, margin, border, etc. JavaScript events, callbacks, Fetch API,
12. Calculator App
Difficulty: Easy (4/10)
Resume Value: 5/10
Summary:
You will build a calculator app that allows users to select numbers from 0 to 9 along with operations such as addition, multiplication, division, etc which can then be evaluated to produce final results.
Topics Covered:
CSS styles with grid and flexbox. JavaScript basics like declarations, operator, etc. JavaScript Events, DOM selectors.
13. Todo List
Difficulty: Intermediate (5/10)
Resume Value: 6/10
Summary:
You will build a simple to-do app where users can add items to the list, check/uncheck and delete items from the existing list.
Topics Covered:
CSS basics like position, padding, margin, etc. JavaScript basics like declarations, operator, etc. JavaScript Events, DOM selectors, Inputs. Local Storage API.
14. Bookmarker Application
Difficulty: Intermediate (5/10)
Resume Value: 6/10
Summary:
You will build an application that stores bookmark URLs added by users. Further, users can view exisiting bookmarks, visit URLs and delete any item on the list.
Topics Covered:
Bootstrap CSS, position, rotate. JavaScript events, Regex, DOM selectors. Local Storage API.
15. Number Facts App
Difficulty: Intermediate (5/10)
Resume Value: 6/10
Summary:
You will build an app that displays a fact related to the number entered by the user through Numbers API.
Topics Covered:
Bootstrap CSS. JavaScript events, callback, DOM selectors. Fetch API.
16. JS Form
Difficulty: Intermediate (6/10)
Resume Value: 7/10
Summary:
You will an app which contains a registration form with validation on each field. The error message is shown below the field if the validation of the field fails due to regex mismatch or empty field and the success message is displayed on submit of valued form values.
Topics Covered:
JavaScript form, Regex, events, DOM selectors.
Source code: codepen.io/FlorinPop17/pen/OJJKQeK
17. Music Player App
Difficulty: Intermediate (6/10)
Resume Value: 7/10
Summary:
You will build a music player app in JavaScript that allows users to play music from the system folder with play & pause, forward & rewind functionalities. In addition, users can see the progress of the music and select a different starting point.
Topics Covered:
CSS flexbox, position, z-index, translate, animation. JavaScript events, DOM selectors.
18. Music Beat App
Difficulty: Intermediate (5/10)
Resume Value: 6/10
Summary:
You will build a music beat app that allows users to play a beat by tapping on each colored section which allows them to create new music by different types/order of tapping.
Topics Covered:
Basics of bootstrap. JavaScript basics like declarations, operator, etc. JavaScript object, ES6 classes. JavaScript events, DOM selectors, form handling. Local Storage API.
19. Quiz App
Difficulty: Intermediate (5/10)
Resume Value: 6/10
Summary:
You will build a quiz app where users can answer questions by selecting options. The background changed to green or red based on the answer validation. The order of questions is shuffled every time the Quiz is started.
Topics Covered:
CSS Grid and flexbox. JavaScript events, DOM selectors.
20. Google Geocode App
Difficulty: Intermediate (5/10)
Resume Value: 6/10
Summary:
You will JavaScript an application that displays location details for the location name entered by the user. The app used google maps API to receive the location details.
Topics Covered:
Bootstrap CSS. JavaScript events, DOM selectors. Fetch API.
21. JavaScript Shopping Cart
Difficulty: Intermediate (5/10)
Resume Value: 6/10
Summary:
You will build an app that allows users to add items to the cart, remove, update quantity, and purchase options that clear the cart. The total from purchase updates dynamically with changes made by the user.
Topics Covered:
JavaScript basics with events, DOM selectors.
22. JavaScript Book List App
Difficulty: Intermediate (6/10)
Resume Value: 7/10
Summary:
You will build a book list app that allows users to view details or add a new book, delete the existing book. The app is made more practical and useable by persisting the data beyond the browser session.
Topics Covered:
Basics of bootstrap. JavaScript basics like declarations, operator, etc. JavaScript object, ES6 classes. JavaScript events, DOM selectors, form handling. Local Storage API.
23. Drag & Drop App
Difficulty: Intermediate (6/10)
Resume Value: 7/10
Summary:
You will application which allows user to drag and drop an image from one container to another.
Topics Covered:
CSS basics with display, position, etc. JavaScript events, DOM selectors.
24. Rock Paper Scissors Game
Difficulty: Intermediate (6/10)
Resume Value: 7/10
Summary:
You will build an app with hand gesture functionality that allows users to play a rock paper scissor game vs a computer. The computer’s choice is randomly generated and the result is generated and displayed by comparing both options.
Topics Covered:
HTML canvas. CSS flexbox, rotate, translate. JavaScript events, DOM selectors.
25. Meditation App
Difficulty: Advanced (7/10)
Resume Value: 7/10
Summary:
You will build a meditation app that allows users to select the countdown for the timer which can be played/paused until the timer ends. Users have an option between sunny and rainy, a video + audio is played based on the selected option.
Topics Covered:
CSS flexbox, translate, Z-index, position, etc. JavaScript events, DOM selectors.
26. Budget App
Difficulty: Advanced (7/10)
Resume Value: 8/10
Summary:
You will build a budget app where users can add a budget and new expense with amount and description, the values of balance, expense, and budget will dynamically update. In addition, users can edit and delete an existing expense.
Topics Covered:
JavaScript basics like declarations, operator, etc. JavaScript object, ES6 classes. JavaScript events, DOM selectors, form handling.
27. YouTube API Project With Authentication
Difficulty: Advanced (7/10)
Resume Value: 9/10
Summary:
You will build a YouTube app that allows users to log in through their Google account and view entered channel details and the latest videos. The app is supported by the official Youtube Data API hence all details are consistent with the real YouTube website.
Topics Covered:
Materialize CSS. JavaScript events, DOM selectors, callback. Fetch API.
28. Tic Tac Toe With JavaScript
Difficulty: Advanced (8/10)
Resume Value: 9/10
Summary:
You will build a Tic Tac Toe board-based game that is played between 2 opponents with a choice of Xs and Os. The app allows users to play their turn and validates at each step to check if a player had won or the game has ended in a draw.
Topics Covered:
CSS Grid and flexbox, position, rotate. JavaScript events, DOM selectors.
29. Flappy Bird
Difficulty: Advanced (9/10)
Resume Value: 9/10
Summary:
You will build an app which allows user to play Flappy bird game on vanilla JavaScript. The app tracks the game score and freezes the game with a “Game over” message when the user loses.
Topics Covered:
HTML 2D Canvas. JavaScript events, DOM selectors.
30. Real-Time Face Detection
Difficulty: Advanced (8/10)
Resume Value: 10/10
Summary:
You will build a real-time face detection app that can detect a person’s emotion live on a webcam. We accomplish this by using face-api.js which built on top of TensorFlow.
Topics Covered:
HTML canvas. JavaScript callback, promises. Fetch API. JavaScript events, DOM selectors.
Bonus: 15 JavaScript Projects
Practice more JavaScript beginner projects from Code 15 JavaScript Projects – Complete Course.
Learn React projects from 45 Best React Projects for Beginners in Easy to Hard Order
