Practice App Ideas to Get Good at JavaScript

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

To get good at JavaScript, you have to practice a lot. To practice a lot, you probably need a variety of app ideas.

In this article, we’ll look at some app and widgets ideas we can use to practice JavaScript programming.

Chat App

With WebSockets, we can do real-time communication in our apps. We can create our own chat app by using libraries like Socket.io, which has both the client and server library needed for real-time communication.

Use the client on the front end and server on the back end to send and receive data in real-time so that we can have a chat room.

News App

A news app is a good opportunity to get XML from RSS feeds and aggregate them into our own app.

We’ve to parse the XML into JSON so that we can use the data in our app.

In addition, there’s APIs like the News API where we can get headlines from for free.

Appointment Scheduler

An appointment schedule has data entry forms to add entries for appointments. Then we have to display them on a calendar.

In the calendar, we’ve to add links or buttons to let users edit or delete calendar entries.

The appointment data should be saved to a database.

If we want to make is more sophisticated, we can add invitation capabilities to send emails to people we want to invite to our appointment.

RESTful API

We can practice building a Node.js RESTful API which follows the conventions of REST.

The GET, POST, PUT, PATCH and DELETE routes have to correspond to the database operations that they should be doing.

GET routes should retrieve data, POST routes should create data, PUT and PATCH routes should update data, and DELETE routes should delete data.

Also, URLs in the routes should follow common conventions like using query strings for query parameters and URL parameters for getting data by ID and looking up nested resources.

Frameworks like Express and Nest.js can all handle requests with all these HTTP verbs so we can use them to build a proper REST API.

99 Bottles

We can make our own app to display the ’99 bottles of beer on the wall’ lyrics in our app.

Since the lyric repeats so much, we can use loops and functions to display them the lyrics on our web page with JavaScript.

8 Ball

We can create our own 8 ball app in JavaScript. All we have to do is let users enter questions and display a random response after the user entered a message.

To make it better, we can also add buttons to let users clear the inputs and outputs.

Photo by Jordan Sanchez on Unsplash

Rock Paper Scissors

Rock Paper Scissors is a fun game we all played before. We can turn it into an app by letting the computer play rock-paper-scissors with us by randomly picking one of those results and displaying them on the screen.

We can display a picture of ‘rock’, ‘paper’, or ‘scissors’ when they’re chosen.

To make it better, we can also keep the score in local storage and given the player the option to play again.

Countdown Clock

A countdown clock is one that counts down from a given time span to 0.

We can create our own by calculating the elapsed time with the JavaScript Date constructor and then subtract the elapsed time from the end time.

The end time is computed from the time when the Start button is clicked plus the time span that’s entered.

To make the calculations easier, we should convert everything to milliseconds before doing the calculation.

The setInterval function lets us update the time in a set interval.

If the time has passed, we show a button to let the user start over.

Pomodoro Timer

A Pomodoro Timer is a countdown timer that runs for 25 minutes. The difference is that it also contains a todo list that we can add tasks that we can do within 25 minutes.

Therefore, in addition to the countdown timer that we have above, which starts from 25 minutes, we also have to add a todo list that lets us add and remove tasks and also check them off when we’re done with them.

Conclusion

Lots of apps that we can build to practice JavaScript. In this article, we went through timer apps, which lets us manipulate Date objects.

Also, we have apps like news apps, appointment calendar apps, etc. which have many features we have to build. Games are also fun to build and play.

The post Practice App Ideas to Get Good at JavaScript appeared first on The Web Dev.