DEV Community: Miguel Z. Nunez

25 Beginner JavaScript Project Ideas

Miguel Z. Nunez — Wed, 25 Aug 2021 03:57:23 +0000

I previously wrote a blog about 15 JavaScript beginner projects and it was quite popular check it out here. What many didn’t know is those projects were part of a list of 25, I included the entire list below. If your an absolute beginner, these projects should keep you busy for at least half a year. Assuming, of course, that you figure them out on your own with nothing but good old stackoverflow or similar websites for tips.

If you manage to get through all the projects this way, I can virtually guarantee that you’ll be a bad ass developer. Don’t believe me? When I first started learning JavaScript, about a year ago now, I could barely handle solving project number one on my own. By the time I was done, well, you’ll see what I built on project 25.

Once your done with these projects, you’ll be more than ready to start doing some real damage with node.js. For now, build these projects so you can master the front-end. Don’t rush yourself into full stack development. I see it happen all to often, aspiring developers trying to learn everything in 1–3 months and looking like a deer that seen headlights when asked to build a decent looking website.

I left a link to the GitHub repo for each project but the code is only to be peeked at when you’ve tried everything else. If you still can’t figure it out, here’s a link to the tutorials for the first 18 projects.

Visit me sometime at miguelznunez.com and the official 25 JavaScript projects website at jsprospect.com.

1. Colors

GitHub:

miguelznunez / Colors

Try it live:
Colors

2. CSS Gradient Generator

GitHub:

miguelznunez / Gradient-generator

Try it live:
Gradient generator

3. Random quote generator

GitHub:

miguelznunez / Random-Quote-Generator

Try it live:
Random quote generator

4. The message

GitHub:

miguelznunez / The-message

Try it live:
The message

5. Counter

GitHub:

miguelznunez / Counter

Try it live:
Counter

6. Image carousel

GitHub:

miguelznunez / ImageCarousel

Try it live:
Image carousel

7. Digital clock

GitHub:

miguelznunez / DigitalClock

Try it live:
Digital clock

8. Calculator

GitHub:

miguelznunez / Calculator

Try it live:
Calculator

9. Grocery list

GitHub:

miguelznunez / Grocery-List

Try it live:
Grocery list

10. Tip calculator

GitHub:

miguelznunez / TipCalculator

Try it live:
Tip calculator

11. Flashcards

GitHub:

miguelznunez / Flashcards

Try it live:
Flashcards

12. To-do list

GitHub:

miguelznunez / To-do-list

Try it live:
To-do list

13. Sticky notes

GitHub:

miguelznunez / Sticky-Notes

Try it live:
Sticky notes

14. Timer

GitHub:

miguelznunez / Timer

Try it live:
Timer

15. Math

GitHub:

miguelznunez / Math4Kids

Try it live:
Math

16. Unsplash API

GitHub:

miguelznunez / UnsplashAPI

Try it live:
Unsplash API

17. Typewriter

GitHub:

miguelznunez / Typewriter

Try it live:
Typewriter

18. Square cards

GitHub:

miguelznunez / SquareCards

Try it live:
Square cards

19. Weather application

GitHub:

miguelznunez / Weather-App

Try it live:
Weather application

20. Wikipedia API

GitHub:

miguelznunez / WikipediaAPI

Try it live:
Wikipedia API

21. Marvel API

GitHub:

miguelznunez / Marvel-API

1.) Go to https://developer.marvel.com/ and get your free API KEY

2.) Hash the api key by following these directions https://developer.marvel.com/documentation/authorization

3.) Initialize the apikey and hash variables in the script.js file from this project with your own

4.) Enjoy

View on GitHub

Try it live:
Marvel API

22. Quiz app

GitHub:

miguelznunez / Quiz-App

Try it live:
Quiz app

23. Recipe API

GitHub:

miguelznunez / RecipeAPI

Try it live:
Recipe API

24. Music player

GitHub:

miguelznunez / Music-Player

Try it live:
Music player

25. CSS Gradient generator tool

GitHub:

miguelznunez / CSS-Gradient-Generator-2.0

Try it live:
CSS Gradient generator

15 Beginner JavaScript Projects to Improve Your Front-End Skills!

Miguel Z. Nunez — Fri, 13 Aug 2021 02:29:02 +0000

The fastest way for you to become a good web developer is to practice. An excellent way to practice is by building as many beginner projects as you can. That’s because each project presents a unique problem and solution, so the more projects you solve, the more knowledge you will gain. Think of each project you complete as a medal you earned. The more medals you have, the more prepared you will be to tackle your next and evermore difficult project.

To get you started, I put together a list of 15 beginner JavaScript projects. In fact, these are same 15 out of 25 projects that I built when I was first learning JavaScript (see all 25 here).

If you get stuck trying to solve one of these, don’t worry, I included a video tutorial next to each project showing you how to solve it step by step. Before watching the solutions, however, I encourage you to attempt them on your own first. This is key to becoming a good developer. In programming there isn’t any shortcuts so if you don’t put in the work, you won’t see improvement, no matter how many tutorials you watch. If your feeling overwhelmed, take a break and relax, it happens to the best of us. Remember, it takes even the best Computer Science teachers a lot of time and practice to begin to master this stuff.

I also left a “try it before you build it” section next to each project. Each project is hosted for free with GitHub Pages so after you complete your first project, learn how to host it the same way by reading this super easy to follow guide.

Finally, I’ve made improvements to each project since creating the tutorials, so the project in the thumbnail (the latest version) might be slightly different than the one in the video (most of them are the same though). If you want the latest versions of the projects check out my GitHub.

1. CSS Gradient Generator

What you will build
Make the web a little prettier with this simple CSS gradient generator application. This app changes the background color and displays that color’s hexadecimal code on the screen all on the click of a button.

Try it before you build it ( Hosted with GitHub Pages)
Gradient Generator Application

JavaScript used

DOM manipulation
Data structures
Functions

Takeaway and thoughts
Building this project taught me how to use onclick, which is used to attach a function to a button. In this case that function was generating a random hex color and making it the color of the background. Learning this was very useful since nearly every modern web application uses buttons. I have a feeling this is a technique I will use over and over.

2. Random Quotes

What you will build
If your in need of a little motivation, I got you covered. In this project, we will build a random quote generator equipped with plenty of motivational quotes.

Try it before you build it ( Hosted with GitHub Pages)
Random Quotes Application

JavaScript used

DOM manipulation
Objects
Functions

Takeaway and thoughts
This application can be created in various ways but it was interesting to see it being solved using a dictionary, an often under-utilized data structure. I also learned a simple algorithm that’s responsible for generating a random quote each time the user clicks on the button.

3. Image Carousel

What you will build
Need an application to display all your cool pictures in? Awesome, in project number three we’ll create an application that allows us to navigate pictures on the click of a button. In programming, we call these photo carousels or image sliders.

Try it before you build it ( Hosted with GitHub Pages)
Image Carousel Application

JavaScript used

DOM manipulation
Control structures
Functions

Takeaway and thoughts
It was interesting to learn how this sort of project was implemented. At first, we used CSS to block all of the images from the screen. Then we used JavaScript to manipulate the CSS style into revealing one image at a time. Before completing this project I was unsure if it was possible to change the CSS styles directly with JavaScript, it turns out that it is.

4. Digital Clock

What you will build
Thinking of purchasing a digital clock? Not anymore, in this project you’ll learn how to build your own.

Try it before you build it ( Hosted with GitHub Pages)
Digital Clock Application

JavaScript used

DOM manipulation
Data structures
Functions
Objects

Takeaway and thoughts
In building this project, I learned that with JavaScript we can create a built in object and retrieve the time from it using built in functions. This is great because it eliminates having to include an additional library, like we do in Python or C++. I also learned about a built in function called setTimeout, which is used to call another function over and over. For this project it was necessary to use setTimeout to ensure that our time was being updated properly.

5. Calculator

What you will build
A calculator. No JavaScript beginner project list would be complete without it and we aren’t making any exceptions here.

Try it before you build it ( Hosted with GitHub Pages)
Calculator Application

JavaScript used

DOM manipulation
Functions

Takeaway and thoughts
It was almost unbelievable to see how simple this was to build. Before building this I thought each expression needed to be solved manually with some sort of complex function. It turns out there’s a built in JavaScript function named eval that takes care of this for us. I really enjoyed building this app and even changed the style of it to give it my own flavor.

6. Grocery List

What you will build
Hungry? Let’s go to the grocery store with this grocery list app.

Try it before you build it ( Hosted with GitHub Pages)
Grocery List Application

JavaScript used

DOM manipulation
Functions
Control structures
Event listeners

Takeaway and thoughts
This is a really cool looking app and it’s the first project on the list where we made use of event listeners. Indeed, we used an event listener to add a new item to the grocery list whenever the user clicked on the “enter” key and another to scratch an item off the list when they clicked on that particular item. It was useful to learn how the function that’s responsible for deleting all the elements within a div was written. In this case, this function deleted all of the items in our grocery list.

7. Tip Calculator

What you will build
No more looking around the table to see who’s taking care of the tip with this tip calculator.

Try it before you build it ( Hosted with GitHub Pages)
Tip Calculator Application

JavaScript used

DOM manipulation
Functions

Takeaway and thoughts
Developing the function that determines the amount each person will tip was rather easy. Perhaps the greatest challenge here was using CSS to mimic the design of the app. It looks like a rather simple design but it’s actually a little challenging to do without watching the tutorial first.

8. To-do List

What you will build
Let’s make the most of our day with this awesome to-do list app.

Try it before you build it ( Hosted with GitHub Pages)
To-do List Application

JavaScript used

DOM manipulation
Event listeners
Control structures
Data structures
Functions

Takeaway and thoughts
The solution to this one was very similar to the grocery list application. I found myself looking back at the code for that one to help me solve this one. One thing that was different, however, was the function to change the background color of each item on the list. I thought that was a very nice addition to the project, as it makes it look a lot nicer. Overall, I would say this was more of a review project but it was still great practice nonetheless.

9. Flashcards (with Local Storage)

What you will build
This is an application that allows you to create flashcards so put away those paper flashcards because there’s a new boss in town.

Try it before you build it ( Hosted with GitHub Pages)
Flashcards Application

JavaScript used

DOM manipulation
Functions
Control structures

Takeaway and thoughts
First off what a great looking application. It can help students study and keep them from spending money on paper flashcards. This is the first project on the list where we used flexbox so it was little challenging at first. Once I got the hang of it, however, it was actually very easy to use and it made the project a lot more dynamic. In particular, I really enjoyed the align-item, flex-wrap, and justify-content options because they made the flashcards responsive.

10. Sticky Notes

What you will build
Lets build a sticky notes application. Yes, you may throw all of those paper sticky notes away now.

Try it before you build it ( Hosted with GitHub Pages)
Sticky Notes Application

JavaScript used

DOM manipulation
Event listeners
Functions
Data structures

Takeaway and thoughts
The code for building this project was very similar to the flashcards project but that’s no problem because the practice was needed. Indeed, if I didn’t have the code for that project to fall back on, I would of had to watch the flashcards tutorial video again to check if I was doing this one correctly. Of course, this project does have some unique features so it was challenging figuring out how to code those parts. Overall, I learned a great deal from this project since its built using a combination of everything we have learned so far.

11. Timer

What you will build
Let’s build a timer. Ready, set, go!

Try it before you build it ( Hosted with GitHub Pages)
Timer Application

JavaScript used

DOM manipulation
Event listeners
Functions
Objects

Takeaway and thoughts
It turns out that building a simple timer is harder than it seems. One would think that using the same setInterval function from the digital clock project would be sufficient to display the correct time. It turns out that technique simply doesn’t work for this. For this project, we create variables to hold different information about the time, for example, when the time was started, when the time was stopped, and how long the time was stopped. Without these variables and the calculations we perform with them, our digital clock would simply be unable to correctly display the time elapsed.

12. Math 4 Kids

What you will build
A cool application that teaches kids basic arithmetic operations.

Try it before you build it ( Hosted with GitHub Pages)
Math 4 Kids Application

JavaScript used

DOM manipulation
Event listeners
Control structures
Data structures

Takeaway and thoughts
In this project, I learned how to switch from one web page to another and how to play a sound file. It turns out both of these tasks are rather simple to do. The hardest part was figuring out how to randomly place the answers in different boxes so the correct answer isn’t always in the same location. I tried my best to figure it out on my own but ended up watching the tutorial for the solution.

13. Unsplash API ( Image Generator )

What you will build
Need some images for your new website? Let’s build an image generator.

Try it before you build it ( Hosted with GitHub Pages)
Unsplash API Application

JavaScript used

DOM manipulation
Promises
Fetch
Functions
Control structures
Event listeners

Takeaway and thoughts
Completing this project taught me how to use JavaScript’s built in fetch to make API requests. Before building this project, I was completely unaware that the Unsplash API existed. It was interesting to learn that many established companies integrate this API into their website. It’s also cool to have an image generator for whenever I need a new wallpaper on my desktop.

14. Quotes API ( Typewriter )

What you will build
An application that fetches a random quote from an API and displays it on the screen with a typewriter effect.

Try it before you build it ( Hosted with GitHub Pages)
Typewriter Application

JavaScript used

DOM manipulation
Event listeners
Control structures
Data structures
Promises
Functions
Fetch

Takeaway and thoughts
Learning how to write the typewriter script was awesome. I’ve actually seen this effect implemented in video games. Now I can use it when I build my own games. As far as the code is concerned, it was interesting to learn that we don’t always need CSS to make cool animations. In this project we used the built in JavaScript substring function to make the typewriter effect.

15. Square Cards ( Template )

What you will build
A stylish way to display data or simply a square card.

Try it before you build it ( Hosted with GitHub Pages)
Square Cards Application

JavaScript used

Event listeners
Functions

Takeaway and thoughts
In this project I learned how to open up YouTube videos and webpage articles directly from JavaScript. This was a great addition to the arsenal of tools I now possess ( thanks to 15 beginner projects! ) as a web developer.