• Stars
    star
    757
  • Rank 59,989 (Top 2 %)
  • Language
    CSS
  • Created about 5 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Repository for all (future) 100+ JavaScript projects for beginners created on JSBeginners.com.

100+ Javascript Projects for Beginners by JSBeginners.com

This is the entry repository for all of my projects over at, JSBeginners.com.

If you want to see these projects in action, go to 100+ javascript projects for beginners.

Follow the links on the above page to see the individual project and to see the source from which the project came.

You'll also find the link to each project's individual source files so you can do all these beginner projects yourself.

Please note, if there isn't a link to one of the projects on the page above, I just haven’t completed the project yet.

List of 100+ JavaScript Projects for Beginners

  1. Change Background Color Project
  2. Hex Change Background Color Project
  3. Random Quotes Project
  4. Pass the Message Project
  5. Counter Project
  6. Background Image Slider Project
  7. Testimonials Project
  8. Filter Project
  9. Modal Project
  10. Calculator Project
  11. Tip Form Project
  12. To Do List Project
  13. Grocery Cart Project
  14. Grocery List Project
  15. Course Form Project
  16. Flashcard Project
  17. Budget Application Project
  18. Coffee Shop Project
  19. Car Dealership Project
  20. Random Joke Project
  21. Random Person Project
  22. HTTP Methods Project
  23. Wikipedia Search Project
  24. Weather Data Project
  25. Github Project
  26. Zomato Restaurant Project
  27. Comfy House Project
  28. Analogue Clock Project
  29. Mortgage Loan Calculator Project
  30. Quote of the day Project
  31. BMI Calculator Project
  32. Weight Conversion Project
  33. Background Color Switcher Project
  34. 2D Breakout Game Project
  35. Digital Calculator Project
  36. Digital Clock Project
  37. Event Countdown Timer Project
  38. Tip Calculator Project
  39. Word Count Tool Project
  40. Contact Form Project (using local storage)
  41. Day of Week App Project
  42. Background Color Changer Project
  43. Image Slider Project
  44. Addition Game Project
  45. Todo List Project
  46. Interactive Quiz Project
  47. Countdown Timer Project
  48. Balloon Popping Game Project
  49. RSS News Feed Project
  50. Number Guessing Game Project
  51. Light Switch Effect Project
  52. Greeting Message Project
  53. Height Conversion Project
  54. Wack A Mole Game Project
  55. Notes App Project
  56. Todo App Project
  57. Hangman App Project
  58. Recipe App Project
  59. Tip Calculator Project
  60. Welcome Messages Project
  61. Dynamically Changing Message Project
  62. Coin Toss Application Project
  63. Rock Paper Scissors Game Project
  64. Ultimate Dice Game Project
  65. Play Audio Files and Sounds Project
  66. JavaScript Dynamic Typing Test Project
  67. Functionator Function Practice Project
  68. Magic Eight Ball JavaScript Project
  69. Combination Guesser Game Project
  70. Word Scramble Project
  71. Countdown Timer Project
  72. Pattern Matching Game Project
  73. Click Popper Game Project
  74. High Low Card Game Project
  75. Click Shape Game Project
  76. Word Finding Game Project
  77. JavaScript Car Game Project
  78. Input Field Character Counter Project
  79. Element Scrolling Content Code Snippet Project
  80. Fun with The Document Object Model Project
  81. Just JavaScript Click Counter Project
  82. Image Popup Window Project
  83. JavaScript Word Guessing Hangman Game Project
  84. JavaScript Modal Popup Example Project
  85. Image Carousel JavaScript Animated Slideshow Application Project
  86. Star Rating Project
  87. Plane Bomber Game Project
  88. JavaScript Accordion Component Project
  89. Chaser Box Game Project
  90. Tool tip Project
  91. Email Exacter Application Project
  92. Popup Message Project
  93. Clipboard – Copy and Move Project
  94. Pure JavaScript Calculator Project
  95. Editable Shopping List Project
  96. Placeholder Image Path Generator Project
  97. Catch Element Game Project
  98. Element Mouse and Click Events Project
  99. Create Form Validation Project
  100. Cookie Get Set Tester Project
  101. DOM Interaction Application Project
  102. Google Sheet Data to CSV Exporter Project
  103. Flying Bird Game Project
  104. Number Guessing Game Project
  105. Element Catcher Game Project
  106. Alien Invader Game Project
  107. Card War Game Project
  108. YouTube API Connection Project
  109. Brick Breaker Paddle Ball Game
  110. Drum Kit Project
  111. CSS + JavaScript Clock
  112. Playing with CSS Variables and JS
  113. Array Cardio Day 1
  114. Flex Panels Image Gallary
  115. Ajax Type Ahead
  116. Array Cardio Day 2
  117. Fun with HTML5 Canvas
  118. 14 Must Know Dev Tools Tricks
  119. Hold Shift to Check Multiple Checkboxes
  120. Custom HTML5 Video Player Project
  121. Key Sequence Detection (KONAMI CODE)
  122. Slide in on Scroll Project
  123. Objects and Arrays – Reference Vs Copy
  124. LocalStorage and Event Delegation
  125. CSS Text Shadow Mouse Move Effect
  126. Sorting Band Names without articles
  127. Tally String Times with Reduce
  128. Unreal Webcam Fun
  129. Native Speech Recognition Project
  130. Geolocation based Speedometer and Compass Project
  131. Follow Along Links
  132. Speech Synthesis Project
  133. Sticky Nav Project
  134. Event Capture, Propagation, Bubbling and Once Project
  135. Stripe Follow Along Dropdown Navigation Project
  136. Click and Drag to Scroll
  137. Experimental Video Speed Controller UI Project
  138. Countdown Clock Project
  139. Wack-a-Mole Game Project

100 JavaScript Projects for Beginners Challenge

It's simple, but not easy.

  1. Follow the link above to find any of the projects in the above list.

  2. Read the description and follow the link on the project’s page to see how it functions (If the link is not available yet, it means I haven’t yet completed the project. But no worries. You can simply go to the course where I found the project).

  3. For the projects I’ve completed, download or clone my repository from GitHub.

  4. Delete the contents of the app.js file (or any other relevant js files) and then try to code out the JavaScript functionality for yourself.

  5. Once you complete the app, share it in the comments on the JavaScript project page on the blog so everyone can acknowledge your accomplishment! That’s it!

  6. Bonus: Share your completed project on Twitter with the hashtags #JSBeginners #100DaysOfCode

Coming Later, React and Node Projects...

More Repositories

1

rock-paper-scissors-project

A simple DOM rock paper scissors JavaScript Project.
HTML
20
star
2

javascript-oop-budget-project

Another JavaScript OOP Project from John Smilga's JavaScript Course.
CSS
15
star
3

Random-Quotes-Project

A small JavaScript project that changes the quote and author on the click of a button.
HTML
12
star
4

Filter-Project

A small JavaScript project that wires up two filters for a fictitious website. Filter buttons to show only filtered items and a filter search bar to show only filtered item.
CSS
11
star
5

Background-Image-Slider-Project

A small JavaScript application that wires up an image slider to show different images.
CSS
10
star
6

number-guessing-game

A JavaScript number guessing game.
JavaScript
7
star
7

Todo-List-Project

Todo List Project v1 from John Smigla's JavaScript project course.
CSS
7
star
8

flashcard-javascript-OOP-project

Another project from John Smigla that uses JavaScript OOP.
CSS
6
star
9

Counter-Project

A small JavaScript project that wires two buttons to count up or count down.
HTML
6
star
10

pure-css-slider

Slider using pure CSS. No jquery of javascript.
CSS
4
star
11

2D-break-breaker

2D brick breaker game
JavaScript
4
star
12

Pass-the-Message-Project

A small JavaScript program that allows the user to input a message and see it in an another location on the page.
HTML
4
star
13

todo-app-project

Completed todo app project from Andrew Mead's JavaScript course.
JavaScript
4
star
14

hex-color-background-project

A project similar to the background color change project. This time it includes a random hex color output along with the backgrounds.
HTML
4
star
15

Testimonials-Project

A small JavaScript program that wires up a testimonial slider.
JavaScript
3
star
16

whack-a-mole

Whack a mole game using JavaScript
CSS
3
star
17

analogue_clock

A JavaScript analogue clock that uses the Canvas Web API.
JavaScript
3
star
18

quote-generator

Small quote generator project
JavaScript
3
star
19

javascript-countdown-timer

A basic javascript countdown timer
JavaScript
3
star
20

javascript-course-smilga

Excercises and notes from Smilga's JavaScript Course
CSS
2
star
21

bluelime-todo-list

A javascript todo list project.
JavaScript
2
star
22

javascript-image-slider

An image slider javascript application using vanilla javascript
HTML
2
star
23

javascript-light-switch-project

This small project turns a light bulb on and off with the click of the mouse.
HTML
2
star
24

grocery-list-project

Small grocery list project
CSS
2
star
25

javascript-basic-calculator

A very basic javascript calculator.
JavaScript
2
star
26

portfolio-site

Portfolio site showing off a few projects I've built.
HTML
2
star
27

random-joke-ajax-project

A AJAX project from John Smigla's JavaScript course.
JavaScript
2
star
28

background-color-switcher

Small to app to switch background color of a page
HTML
1
star
29

course-form-project

Course Form JavaScript Project
CSS
1
star
30

javascript-digital-clock

A very small JavaScript program to create a digital clock.
HTML
1
star
31

cv-styled

HTML
1
star
32

responsive-table-calendar

Creating a table calendar that's responsive
HTML
1
star
33

grid-portfolio-project

Grid Portfolio Project
CSS
1
star
34

react-smigla

CSS
1
star
35

flexbox-grids

HTML
1
star
36

Bankist_App

A JavaScript Banking App completely mostly using arrays
JavaScript
1
star
37

menu-project

Menu project showing how to filter through a dataset
JavaScript
1
star
38

notes-app-project

Notes app project from Andrew Mead's JavaScript course
JavaScript
1
star
39

Project_Grocery_Cart

Wiring up a cart for a ecommerce website
CSS
1
star
40

css-course-smigla

All the projects in Smigla's HTML & CSS Course
CSS
1
star
41

random-user-api-project

Another project by John Smilga using the Random User API.
CSS
1
star
42

cv

HTML
1
star
43

orientation-assignment-java-romeojeremiah

orientation-assignment-java-romeojeremiah created by GitHub Classroom
1
star
44

react-expense-tracker

Expense tracker with CRUD operations.
JavaScript
1
star
45

greeting-message-project

A very small JavaScript greeting message project.
JavaScript
1
star
46

jonas-javascript

JavaScript
1
star