DEV Community

Cover image for Projects ideas to become a javascript master 🚀 Resource compilation 💥 + Giveaway⚡
Lorenzo for World In Dev

Posted on • Updated on

Projects ideas to become a javascript master 🚀 Resource compilation 💥 + Giveaway⚡

Hello World! Today I wanted to share with you 10 projects you can build to be from zero to hero in javascript!

🔖 - Bookmark the article to save it and remember the like ❤️ and maybe super like🦄

Read also:


⚡Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important


Table of content

a) General (for beginners)

  1. Converters
  2. Word Counter
  3. Timer / Clock
  4. Random password generator
  5. Calculator

b) Games

  1. Guess the number
  2. Math time!
  3. Other Games

c) Social & Websites

  1. Log-in, Sign-up
  2. Fitler
  3. To-Do List
  4. Social
  5. Portfolio

Hey, remember that I have a newlsetter!



a) General --> For beginners

1. Converters

image

I don't have to say a lot in reality for this category. Just build something that with a given input, convert it into a nice-looking output, for us to gain the time of doing it manually 🙃. If you do a full webpage around it, that's always a plus, but you can even do a really easy javascript code.

For example, I built a currency converter, it was one of my first JS projects!

A CodePen - JavaScript: Currency Calculator


2. Word counter

image

Just another easy fun project, build something count the number of words and characters in a text. Then the goal is to give as many stats as possible, showing reading and speaking time, keywords and their frequency, and others, be creative!

An Article - Building a Word Counter in JavaScript


3. Timer / Clock

image

That one also is quite easy, just try to build a basic functionality around time, like a timer, a digital clock, a scheduled alarm... And if you have time and willingness to learn, why not doing the entire clock app, maybe on an entire website!

An Article - How to Create a Digital Clock using JavaScript


4. Random password generator

image

Keep your learnings secure, you can create a random password generator in 10 minutes in reality. But like so many other projects on this list, they are fun to do only if you make them yours by adding special features! I think you can go deep into customization possibilities with this one.

A Video - Strong Random Password Generator Mini Project using Html CSS & Javascript | Password Generator App - by
Online Tutorials


5. Calculator

image

Now you can build something more challenging, a fully working calculator. That should not be too difficult, everyone knows how a calculator works. Just try to be original, adding features obviously. Make math fun!

A freecodecamp Article - How to build an HTML calculator app from scratch using JavaScript

Another Source - A CodePen - "Neumorphism calculator with dark mode switch"


b) Games

5. Guess the number

image

That's a very famous and easy game, you generate a random number from 0 to 50, the user has to guess it. And you give him some hints in the process (lower or greater). Nothing extraordinary, but you're starting to make great progress!

Learn JavaScript by writing a guessing game


6. Math questions

image

That can be fun, you create a game that generates random math questions (like 1304+222), with an open answer or a list of different propositions for the user. The code automatically checks if the result is right or wrong. Then you can do a scorekeeper, a timer, let the user set a difficulty, add a leaderboard, and make it even more customizable allowing the user to filter questions!

Stack Exchange - Code Review - Maths Q&A game in JavaScript


7. Other games

image

--> Card Game, Rock-Paper-Scissors, Tic tac toe, Pong game...

Actually, you can build lots of games with javascript, but I think these four do quite a lot in making you progress in javascript. A card game is fun to do and can be easily played directly on the console, without adding the full visual stuff. For example, I built a blackjack game completely playable from the console. Then Rock paper scissor and Tic tac toe. You can do the first two players game, or even build a bot (more for the tic tac toe game in reality) to allow even a single user to play.
The pong game can allow you to do a more advanced 2d game with real-time updates (animations).

c) Social & Websites

8. Log-in, Sign-up...

image

Now we start with some more social / website-focused content. First I suggest you be able to quickly write a nice looking and well-performing Log-in / Sign-up system for websites, I'm sure you will need it someday, and then you will remember this training, and you will manage the situation like a pro!

A video by FrontendTips - Login / Signup panel in css and javascript (With source code)

9. Filter

image

That's easy as important to know how to do a basic filter. in pure javascript, you can need it to filter elements in an array. In real-life examples, you need to filter comments, posts, articles, videos... For example you can build, using the dev.to API, a webpage that allow the user to filter the articles. You have infinite way to filter articles!

HOW TO Filter/Search List- W3school

11. To-do list

giphy

The to-do list. How famous... Do you know notion? I love this app a lot, but I'm sure that you can improve the user experience. Try building something that makes planning a fun thing!

HOW TO create a to-do list - W3School

10. Social

Now let's get to the really serious stuff, with javascript and web development you can build really complex things, so why not build a social with front-end and back-end coded in javascript?

Build a simple social network with javascript - pusher.com

12. Portfolio

Hey, I actually wrote a full article about that, whyyyy not checking it out right now? After leaving a like to this article for sure!


Other useful sources for you
20+ Projects You Can Do With JavaScript
100+ JavaScript Projects for Beginners!
40+ JavaScript Projects For Your Portfolio
17 JAVASCRIPT PROJECTS YOU CAN BUILD TO PERFECT YOUR CODING SKILLS
App ideas - At GitHub
5 Vanilla JavaScript Projects for Beginners
40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS
Build 15 JavaScript Projects - Vanilla JavaScript Course
10 JavaScript Projects in 10 Hours - Coding Challenge 🔥
Learn programming
with curated JavaScript projects - codementor.io


Thanks for reading and Happy coding ❤

Recommended readings:


⚡Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter


Subscribe to my Newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

Top comments (18)

Collapse
 
alguercode profile image
alguerocode • Edited

this website is useful for this topic: masterjs.vercel.app/
is great resource collection for javascript

Collapse
 
michelledev3 profile image
michelledev

Thanks for the roadmap, it is a little overwhelming as a newbie. This is helpful.

Collapse
 
lorenzoblog profile image
Lorenzo

I can understand, but as "A journey of a thousand miles begins with a single step.", I'm sure you can do that! Anything complex, when studied well, can be made much simpler.
And I am there to help you if you need, so don't hesitate to ask here or to contact me, via dev.to or email!

Collapse
 
michelledev3 profile image
michelledev

love love and I will take you up on that

Collapse
 
yashism profile image
Yash Waghmare

Niceee Projects. Maybe I should get started on one of these.

Collapse
 
lorenzoblog profile image
Lorenzo

Stop commenting and go coding then 🙃
But you have to promise me that you will send me the links here when you have your projects finished...

Collapse
 
yashism profile image
Yash Waghmare

Sure 👍

Thread Thread
 
lorenzoblog profile image
Lorenzo

Also, if you're interested, we just launched our newsletter 👍

worldindev.ck.page

Thread Thread
 
yashism profile image
Yash Waghmare

Yes I joined!

Collapse
 
ojpro1 profile image
Oussama ELJabbari

Nice Projects Ideas.

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Amazing :) projects

Collapse
 
lorenzoblog profile image
Lorenzo

Thank you ❤, really appreciate that.

Collapse
 
marex74829665 profile image
Marex

niceee

Collapse
 
radovanx profile image
Radomir Bednar • Edited

Thank you Niceee Projects.

Collapse
 
enriqueedelberto profile image
Edelberto Enrique Reyes

Thanks for sharing. The projects are really interesting.

Collapse
 
tyanick profile image
Tazoh Yanick

Thanks very much @devlorenzo

Collapse
 
lorenzoblog profile image
Lorenzo • Edited

Thank a lot for your comment, as some are powered by coffee, I am powered by this kind of comments!

If interested, I also just launched my newsletter! --> worldindev.ck.page

Collapse
 
coolprogrammerarpit007 profile image
coolprogrammerarpit007

This article is very useful. Thanks for your effort