List of 70+ JavaScript Projects You Can Work On
Tags: html, css, javascript
Published: 2020-08-17 16:46:27

One of the best ways to learn JavaScript is by building stuff. But, if you are just getting started, there’s one question you would probably ask yourself. What do I build? Well, a quick search on YouTube for ‘JavaScript Projects’ may answer that question. 

However, with 1000s of videos available, you might be a bit tempted to check out each one of them. Well, obviously with limited time at hand, that’s definitely not possible.

In this post, I’ve tried my best to put together a list of some awesome JavaScript projects that will help you take your JavaScript skills to the next level. So, here’s the list.

#[**1. Random Background Color**](https://www.youtube.com/watch?v=qtTOpzbMYnE)
{% youtube qtTOpzbMYnE %}

#[**2. Responsive Navbar Tutorial**](https://www.youtube.com/watch?v=At4B7A4GOPg)
{% youtube At4B7A4GOPg %}

#[**3. Custom Progress Bar**](https://www.youtube.com/watch?v=U-4tg5snUuw)
{% youtube U-4tg5snUuw %}

#[**4. Simple Countdown Timer**]( https://www.youtube.com/watch?v=x7WJEmxNlEs)
{% youtube x7WJEmxNlEs %}
 
#[**5. JavaScript Responsive Sidebar Menu**](https://www.youtube.com/watch?v=0EsWoEmkHog)
{% youtube 0EsWoEmkHog %}

#[**6. Dynamic Website Footer Date**](https://www.youtube.com/watch?v=xugiXhHS9Bw)
{% youtube xugiXhHS9Bw %}

#[**7. Random Quotes Project**](https://www.youtube.com/watch?v=0poDnc5X7Zk)
{% youtube 0poDnc5X7Zk %}

#[**8. Random Joke Generator**](https://www.youtube.com/watch?v=qMf8KCOwnuc)
{% youtube qMf8KCOwnuc %}

#[**9. Random Name Generator**](https://www.youtube.com/watch?v=J3MIQTxV8-c)
{% youtube J3MIQTxV8-c %}

#[**10. Random Meal Generator**](https://www.youtube.com/watch?v=nYzrWnwpw34)
{% youtube nYzrWnwpw34%}


#[**11. Collapsible Navigation Menu**](https://www.youtube.com/watch?v=LxEb9G7ELOQ)
{% youtube LxEb9G7ELOQ %}

#[**12. JavaScript Modal**](https://www.youtube.com/watch?v=KjQ8uvAt9kQ)
{% youtube KjQ8uvAt9kQ %}

#[**13. Custom Confirm Window**](https://www.youtube.com/watch?v=pOmLe1SaN60)
{% youtube pOmLe1SaN60 %}

#[**14. Accordion Menu**](https://www.youtube.com/watch?v=VTdSW57--yM)
{% youtube VTdSW57--yM %}

#[**15. Smooth Scroll**](https://www.youtube.com/watch?v=FK5DEa1Hvco)
{% youtube FK5DEa1Hvco %}

#[**16. JavaScript Counter**](https://www.youtube.com/watch?v=a6XIMIKmj9k)
{% youtube a6XIMIKmj9k %}

#[**17. Slideshow**](https://www.youtube.com/watch?v=4YQ4svkETS0)
{% youtube 4YQ4svkETS0 %}

#[**18. Star Rating System**](https://www.youtube.com/watch?v=dPCj6Qkq13Y)
{% youtube dPCj6Qkq13Y %}

#[**19. Image Gallery**](https://www.youtube.com/watch?v=afoxd5b0bJo)
{% youtube afoxd5b0bJo %}

#[**20. Text Shadow on Mouse Move Effect**](https://www.youtube.com/watch?v=zaz9gLI-Xac)
{% youtube zaz9gLI-Xac %}

#[**21. Type Writer Effect**](https://www.youtube.com/watch?v=POX3dT-pB4E)
{% youtube POX3dT-pB4E %}

#[**22. Adding a Preloader**](https://www.youtube.com/watch?v=s_hO8Pn3u5M)
{% youtube s_hO8Pn3u5M %}

#[**23. Preloader Animation**](https://www.youtube.com/watch?v=NZNhuzyeD-Y)
{% youtube NZNhuzyeD-Y %}

#[**24. Live Website Visits Counter**](https://www.youtube.com/watch?v=R8GS-8nlekY)
{% youtube R8GS-8nlekY %}

#[**25. Tabs**](https://www.youtube.com/watch?v=Ay93z3mZuh8)
{% youtube Ay93z3mZuh8 %}

#[**26. Animated Tabbed Layout**]( https://www.youtube.com/watch?v=v6-4wh_o9iM)
{% youtube v6-4wh_o9iM %}

#[**27. Custom Cursor**]( https://www.youtube.com/watch?v=rfpRZ2t_BrQ)
{% youtube rfpRZ2t_BrQ %}

#[**28. Form Animation**]( https://www.youtube.com/watch?v=wc5k2AMPED0)
{% youtube wc5k2AMPED0%}

#[**29. Custom File Upload Button**]( https://www.youtube.com/watch?v=T3PDgtliezo)
{% youtube T3PDgtliezo %}

#[**30. To-do List**]( https://www.youtube.com/watch?v=Ttf3CEsEwMQ)
{% youtube Ttf3CEsEwMQ %}

#[**31. Another To-do List, Why not?**]( https://www.youtube.com/watch?v=b8sUhU_eq3g)
{% youtube b8sUhU_eq3g %}

#[**32. Image Slider**]( https://www.youtube.com/watch?v=KcdBOoK3Pfw)
{% youtube KcdBOoK3Pfw %}

#[**33. Split Screen Slider**]( https://www.youtube.com/watch?v=5F0EvajMlXo)
{% youtube 5F0EvajMlXo %}

#[**34. Typewriter Effect**]( https://www.youtube.com/watch?v=POX3dT-pB4E)
{% youtube POX3dT-pB4E %}

#[**35. Line Through Effect**]( https://www.youtube.com/watch?v=Hl52Q6GV4Sk)
{% youtube Hl52Q6GV4Sk %}

#[**36. Page Scroll Indicator**](https://www.youtube.com/watch?v=hKYht6eIJow)
{% youtube hKYht6eIJow %}

#[**37. Hide Navbar on Scroll**]( https://www.youtube.com/watch?v=JEBgqbZWYIQ)
{% youtube JEBgqbZWYIQ %}

#[**38. Change the Navigation Style on Scroll**]( https://www.youtube.com/watch?v=RxnV9Xcw914)
{% youtube RxnV9Xcw914 %}

#[**39. Animated Navbar**]( https://www.youtube.com/watch?v=RLc8NB2JyxE)
{% youtube RLc8NB2JyxE %}

#[**40. Image Lightbox**]( https://www.youtube.com/watch?v=uKVVSwXdLr0)
{% youtube uKVVSwXdLr0 %}

#[**41. Image Password Strength**]( https://www.youtube.com/watch?v=Ga5dOwAQj0o)
{% youtube Ga5dOwAQj0o%}

#[**42. Form Validation**]( https://www.youtube.com/watch?v=qApvlN8Tai0)
{% youtube qApvlN8Tai0 %}

#[**43. Custom Video Player**](https://www.youtube.com/watch?v=yx-HYerClEA)
{%youtube yx-HYerClEA%}

#[**44. Weight Converter**](https://www.youtube.com/watch?v=7l-ZAuU8TXc)
{%youtube 7l-ZAuU8TXc%}

#[**45. Quiz App**](https://www.youtube.com/watch?v=riDzcEQbX6k)
{%youtube riDzcEQbX6k %}

#[**46. Another Quiz App**](https://www.youtube.com/watch?v=49pYIMygIcU)
{%youtube 49pYIMygIcU %}

#[**47. Previewing Image Before File Upload**](https://www.youtube.com/watch?v=VElnT8EoEEM)
{%youtube VElnT8EoEEM%}

#[**48. Filterable List**](https://www.youtube.com/watch?v=G1eW3Oi6uoc)
{%youtube G1eW3Oi6uoc%}

#[**49. Sort a Table**](https://www.youtube.com/watch?v=8SL_hM1a0yo)
{%youtube 8SL_hM1a0yo%}

#[**50. Beat Maker**](https://www.youtube.com/watch?v=2VJlzeEVL8A)
{%youtube 2VJlzeEVL8A%}

#[**51. Drum Kit**](https://www.youtube.com/watch?v=VuN8qwZoego)
{%youtube VuN8qwZoego%}

#[**52. Piano**](https://www.youtube.com/watch?v=vjco5yKZpU8)
{%youtube vjco5yKZpU8%}

#[**53. Password Generator**](https://www.youtube.com/watch?v=duNmhKgtcsI)
{%youtube duNmhKgtcsI %}

#[**54. JavaScript Calendar**](https://www.youtube.com/watch?v=o1yMqPyYeAo)
{%youtube o1yMqPyYeAo %}

#[**55. Speed Typing Game**](https://www.youtube.com/watch?v=Yw-SYSG-028)
{%youtube Yw-SYSG-028 %}

#[**56. Simple Analog Clock**](https://www.youtube.com/watch?v=weZFfrjF-k4)
{%youtube weZFfrjF-k4 %}

#[**57. Create A Color Palette**](https://www.youtube.com/watch?v=4VGyXW2rA4w)
{%youtube 4VGyXW2rA4w%}

#[**58. Click and Drag to Scroll**](https://www.youtube.com/watch?v=C9EWifQ5xqA)
{%youtube C9EWifQ5xqA%}

#[**59. Calculator**](https://www.youtube.com/watch?v=xKaTnc1q8UQ)
{%youtube xKaTnc1q8UQ %}

#[**60. Scientific Calculator**](https://www.youtube.com/watch?v=52GL_cfLBYs)
{%youtube 52GL_cfLBYs %}

#[**61. Meditation App**](https://www.youtube.com/watch?v=oMBXdZzYqEk)
{%youtube oMBXdZzYqEk %}

#[**62. BookList App**](https://www.youtube.com/watch?v=JaMCxVWtW58)
{%youtube JaMCxVWtW58%}

#[**63. Weather App**](https://www.youtube.com/watch?v=wPElVpR1rwA)
{%youtube wPElVpR1rwA %}

#[**64. PIN Pad Login Screen**](https://www.youtube.com/watch?v=wWh8hwgeAMw)
{%youtube wWh8hwgeAMw%}

#[**65. URL Shortener**](https://www.youtube.com/watch?v=Z57566JBaZQ)
{%youtube Z57566JBaZQ %}

#[**66. Bookmarker Application**](https://www.youtube.com/watch?v=DIVfDZZeGxM)
{%youtube DIVfDZZeGxM %}

#[**67. Virtual Keyboard**](https://www.youtube.com/watch?v=N3cq0BHDMOY)
{%youtube N3cq0BHDMOY %}

#[**68. Shopping Cart**](https://www.youtube.com/watch?v=90PgFUPIybY)
{%youtube 90PgFUPIybY%}

#[**69. Text to Speech**](https://www.youtube.com/watch?v=ZORXxxP49G8)
{%youtube ZORXxxP49G8%}

If you are a game developer, you would definitely want to check out the below video tutorials.

#[**70. Memory Game**](https://www.youtube.com/watch?v=tjyDOHzKN0w)
{%youtube tjyDOHzKN0w %}

#[**71. Rock Paper Scissors Game**](https://www.youtube.com/watch?v=jaVNP3nIAv0)
{%youtube jaVNP3nIAv0 %}

#[**72. Pong Game**](https://www.youtube.com/watch?v=ju09womACpQ)
{%youtube ju09womACpQ %}

#[**73. Whack A Mole Game**](https://www.youtube.com/watch?v=toNFfAaWghU)
{%youtube toNFfAaWghU %}

#[**74. Snake Game**](https://www.youtube.com/watch?v=QTcIXok9wNY)
{%youtube QTcIXok9wNY %}

#[**75. Connect Four**](https://www.youtube.com/watch?v=dBlSiGOFjUY)
{%youtube dBlSiGOFjUY %}

#[**76. Simple Flappy Bird**](https://www.youtube.com/watch?v=3SsYZDJdeXk)
{%youtube 3SsYZDJdeXk %}

#[**77. Space Invaders**](https://www.youtube.com/watch?v=kSt2_YZzCec)
{%youtube kSt2_YZzCec %}

#[**78. Tetris**](https://www.youtube.com/watch?v=H2aW5V46khA)
{%youtube H2aW5V46khA %}