Fun Projects to Help You Improve Your Coding Skills During the COVID-19 Quarantine Period
From Card Games to COVID-19 Trackers and More
Photo by James Pond on Unsplash
I strongly believe that building new projects helps you grow as a programmer. This can be daunting when you’re a newbie developer, as you might think that you don’t have sufficient knowledge to build applications. I agree, but you’ll never learn if you don’t get your hands dirty.
“One becomes a beginner after 1,000 days of training. One becomes a master after 10,000 days of practice.” — Mas Oyama
The secret to being a great developer is putting in the effort and hard work. If you want to become a web developer, JavaScript is one of the greatest programming languages to learn — but getting familiar with JavaScript basics can only be done by getting your hands dirty.
Need a little help getting inspiration? Here’s a list of seven simple yet challenging projects to get you started.
1. Countdown Timer
Level — Beginner
The objective of this project is to create a countdown timer that counts months, days, hours, minutes and seconds to your event. It might look daunting, but it’s actually quite simple once you understand how the whole process works.
This is a project I would definitely suggest for any beginner to try out. By doing this project, you can learn:
How DOM manipulation works
Working knowledge of methods such as setInterval and clearInterval
*Note: Try not to use libraries such as Moment JS or NPM packages, which are just as simple as importing and using. Try things from scratch. The whole essence is about learning the basics.*
To make it more challenging (if you love challenges), try to do the following:
Validate user input — check whether it’s a date from the future.
Alert the user when the countdown timer ends.
Manage multiple countdown timers —this can be quite challenging. Make sure you name your variables correctly to avoid unwanted confusion.
Here are some sample projects and tutorials to help you:
Photo by Icons8 Team on Unsplash
2. Notes App
Level — Beginner
You might have seen a lot of tutorials on note-taking apps. But I still want to include it in this list as it is a simple yet powerful project that can teach you the basics of:
Your note app should allow the user to add, view, delete, and update notes. It should also save the note in localStorage so that the user can revisit and still be able to access the notes.
To make it more challenging, try to do the following:
Store the time the note was last accessed and modified.
Store note by each user. Separate users can maintain their own set of notes.
Here are some sample projects and tutorials to help you get started:
Photo by AbsolutVision on Unsplash
3. Book Finder
Level — Intermediate
The objective of this application is to allow users to search for books by title, author, etc. You can display the corresponding books as a list on the page with related data. This project will teach you the basics of:
Communication with external APIs
Responsive UI design
Introduction to animations
To make it more challenging, try to do the following:
Allow the user to click on a book and view more information about it by redirecting the user to another site.
If you want to take things a step further, implement responsive UI and animations to the app.
Here are some sample projects and resources to help you get started:
Photo by Thought Catalog on Unsplash
4. Card Memorize Game
Level — Intermediate
This is a game where you have to click on each card and remember what image is beneath it and try to match it with its pair. Try playing flip game to get an idea of how this game can be implemented.
To make it more challenging, try to do the following:
Try to show the statistics of the user at the end of the game — number of moves, the number of correct/incorrect moves, ratios, etc.
Levels of difficulty — you can decrease the time as the difficulty increases or increase the number of cards.
Here are some sample projects and resources to help you get started:
5. A Scientific Calculator
Level — Intermediate
You most likely tried building a simple calculator when you were starting out as a beginner. But as you grow and gain more experience, you should try building a scientific calculator. This isn’t really hard, but you will need to be familiar with the JavaScript Math object. This app will contain features such as square root, tan, sin, cos, inverse functions, etc.
To make it more challenging, try to do the following:
To step up the game, try to include degrees and radians when calculating angles.
Try to implement functionality to solve linear, quadratic equations just like an ordinary scientific calculator.
You can check out this link to learn more about building a scientific calculator.
Photo by Kelly Sikkema on Unsplash
6. Spotify Integration for Your Portfolio
Level — Advanced
When I was building my portfolio website, I wanted to include the playlist of my top songs in it. I didn’t want to update that data often because I didn’t want to be meddling with my source code all the time. Hence, I decided to use the Spotify Web API to include my favourite songs.
This process is kind of tricky as it requires you to run requests to Spotify from a server as it is not safe to make requests to the Spotify Web API with your security credentials from the front end itself.
You will learn:
Basics of Web Security
Web Servers and Hosting
API integration
Photo by Malte Wingen on Unsplash
7. Coronavirus Tracker
Level — Advanced
With coronavirus threatening lives around the world, there has been a lot of misinformation being spread online. It’s mainly to do with numbers. You can make use of this opportunity to do your part. You can build a system that updates itself on a daily basis and displays the affected areas and numbers. This is a project that can teach you a lot of skills, including using datasets, handling charts in JS, and manipulating datasets.
To make it more challenging, try to do the following;
Make the user interface eye-catching.
Use intensity levels to show the intensity of the affected areas around the globe.
This is a dashboard built by Lauren Gardner. Check out the link to find out more about the datasets used.
The dashboard created by Lauren Gardner
That’s it for this article. I hope you learned something from this. If you have any doubts or thoughts, let me know in the comments.
Happy coding!!