Category: Careers

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.

Random Wikipedia Article App

We can use the Wikipedia API to get a regular Wikipedia article.

To get a random Wikipedia article, we’ve to choose a random article ID and then retrieve the article with the API.

Also, we’ve to parse the character sets and display them article properly. This may be a challenge since the articles may be written in characters that may not be displayed property on our browsers without intervention.

Weather App

We can use the OpenWeatherMap API, which has a free tier that’s good enough to make a practice app with.

We can use it to search for data weather data like weather forecast by location and then display them on a screen.

Also, we can make a browser extension to display the weather as a widget.

Tip Calculator

A tip calculator is an app that we can all use. It’s great for making sure that we didn’t underpay or overpay tips.

We can get the tipping convention for different countries and then use that to calculate the tips from the total price.

Then we can display the tip amount on the screen. Also, we can add a feature to divide the tip amount by the number of people in case we have to split the bill.

Of course, we’ve to check that all the numbers are valid before making the calculation.

Cost Splitter

Similar to the tip calculator, we can create a cost splitter app to add up all the cost items and divide them by the number of people to split the bill with, which is a value that users enter.

Of course, we’ve to check that all the numbers are valid before making the calculation.

Loan Payment Calculator

We can use the loan payment formula to calculate the amounts that we have to pay and find out when we’re done paying our loan.

The formula takes the principal amount, interest rate, and the number of months to pay.

So we need to let the user enter all of that data so that we can make the calculation.

Of course, we’ve to check that all the numbers are valid before making the calculation.

Random Name Picker

We can create an app that lets user pick a random name from a list of names that they entered.

The names can be entered as a comma-separated list or a newline-separated list.

HTML to PDF Converter

An app that takes a URL of a web page or a web page file and converts it to a PDF is useful.

We can let users enter their URL or upload a file from the front end, then we can process the HTML with a Node app and convert it to PDF with a library of our choice.

For the back end, we can use frameworks like Express or Nest.js to take the request.

Unit Conversion Calculator

Unit conversion calculators are always useful. We can make one that converts weights and lengths for example.

We let users enter inputs into input boxes and display the result on the screen.

Like any other app, we should check if the numbers are valid before converting.

Secret Message Encoder/Decoder

This is a fun app that transforms messages that we want to encode with our own algorithm. Then we have to decode it when someone has the secret key.

To do all that we probably need some mapping to convert the data. We can do that by changing the code point of each character in the string by a fixed number for example.

JavaScript’s string methods can be used to get the code point and convert the code point back to the corresponding character.

Quiz Game

We can make our own quiz game by loading a bunch of questions and answers into a database and then display the questions and let players enter their answers.

If it matches, then we display a message saying that the answer is correct. Otherwise, we display a message telling the player that it’s wrong.

We can make it multiple choice or we can let players enter their answer. To make loading the questions and answers easier, we can use an ORM like Sequelize, which we can use to seed data.

Conclusion

There’re plenty of JavaScript app ideas we can use to build up or JavaScript skills. If we can do them all on our own, then we know we’re a real developer.

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.

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.

Calculator App

We can create a calculator app with buttons like a real calculator. To make the buttons work, we have to manipulate strings so we can build the arithmetic as users click the buttons.

Then, when the user clicks enter, we’ve to calculate the result. We may use the dread eval function if we want to go the easy route or we can parse the arithmetic expression string ourselves to compute the result.

React Native Todo Application

React Native is a React-based mobile framework for creating mobile apps with React and JavaScript code.

It’s a great way to begin learning about mobile development as it’s an easy transition from making mobile web apps.

We can use React and its libraries to create a mobile todo app.

Job Scraping Web App

We can make our own app to create scrape job listings from a website. To write it with JavaScript, we’ve to make it run on Node.js

There’re libraries like request which can make HTTP requests to web pages and then we can parse the result with something like cheerio.

Twitter Data Miner

Like with the job scraper app, we can get the data from navigating to pages by parsing Twitter pages and making requests to the URLs programmatically.

Then we can parse the response and parse them as we did with the job scraper.

We can also use the Twitter Node SDK to get data that way, which is better than scraping from Twitter directly if the data we want is available.

Microblog

We can build something like Twitter where we can post messages and have a comment section below it for people to respond.

If we want to improve it, we can also let users upload images and videos. Be sure to check for format and size before accepting the upload.

We can also parse hashtags if we want to make it even better.

Spell Checker

We can build our own spell checker by parsing strings from the inputted values and then check each word for spelling mistakes.

Then we’ve to give them some suggestions for words that the user may want to change to for the words with spelling mistakes.

HTTP Server

Node.js comes with the http module that we can make our own HTTP server with.

We can learn how to parse request cookies, headers, and body so that we can do that do something with them.

It’s a great way to learn more about HTTP communication.

Flashlight App

A flashlight app can is made more sophisticated by letting users change color, brightness, etc.

Then we have a flashlight app that’s better than the rest. We can do that easily with plain JavaScript on the browser.

App With User Authentication

User authentication is something that most apps have to do since they hold private user data.

Therefore, making an app with user authentication is great practice. We can create a simple front end to let users sign up for a user account and log in.

Then we’ve to create a back end app for saving the user data and letting people log in with the right credentials.

We may also add multiple kinds of users if we want to add some authorization capabilities to our authentication app.

Trello Clone

Trello is a simple task tracker. It lets us drag and drop our task boxes to different columns to update their status.

Therefore, to make a Trello clone, we’ve to learn how to create a UI with drag and drop capabilities and updates the task status as users drop the task into a new box.

Also, we’ve to create a form to let users add and update forms.

Yelp Clone

Yelp is a review site for restaurants and events. We can create our own Yelp clone by creating forms for letting people enter restaurants, events, and reviews.

Also, we’ve to add a user form to let users register and add those things we mentioned above.

Conclusion

There’re lots of ideas that we can create practice apps from to practice programming with JavaScript. We just have to close the tutorials and start practicing.

Then we’ll become a proficient JavaScript developer in no time.

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.

Autocorrecting Text Box

An autocorrecting text box is an input box that shows us a variety of options for auto-correction just do the auto-correction automatically.

Either way, we need to learn how to handle input change or input events to suggest changes or make the auto-correct change automatically.

Also, we have to learn how to throttle and denounce event listeners so that they won’t run too often and overload users’ computers.

One simple-looking auto-correct text box can have lots of moving parts underneath.

Form Validator

To do form validation, we have to learn how to match string patterns by matching regexes.

Also, we have to learn how to compare numbers if we’re dealing with numbers.

In addition, we’ve to decide when to actually trigger the form validation code and display any form validation error messages when required.

These are things that we need to do often and so we should know how to do form validation and then building forms will be easy.

Collapsible Navigation Menu

Collapsible navigation menus are the ones that show when we click on a button and sides when we click outside of it.

By building this, we have to learn about event delegation so that we only close the menu when we actually click outside it.

Also, we have to learn how to show the menu when we click on a button.

A menu may be displayed on top of another, or it can also be side by side with another element. If it’s on top of something, then we can style it to go on top of something.

Countdown Clock

A countdown clock is also a great UI widget to build since we have to learn how to manipulate and calculate elapsed time to get the correct countdown time.

We should do that with the built-inDate constructor so that we know how that works.

To format dates, we have to get the parts of the date and time with built-in methods and put them in a string, which means it’s also a great chance to use template strings.

Modal Dialog Box

A modal dialog is a dialog box that pop-ups when we trigger it some way. For instance, if we click on a button and an overlay box comes up then the overlay box is the modal dialog box.

We can close it either by clicking a button on the modal dialog or by clicking outside it.

Once again, we can learn about event delegation to determine which element is clicked before closing our dialog box.

Also, we learn how to an element on top of another, which is also important.

Widget to Customize Greeting If Someone is Visiting From a Certain Site

We can get the origination site from the location object, so it’s a good chance to learn about that object, which will let us learn about navigation between pages.

Then once we check that, we can use if or switch statements to return a customized greeting of our choice according to the site that the user came from.

If we want to get fancy, we can also use regexes to check for which site he or she is coming from.

Storefront and Price Calculator

We can create a simple storefront to let us add and remove items from a shopping cart.

The items are listed in the store and they’re displayed in a way so that we can add or remove them from our cart.

Also, we should be able to add more than one item. The cart items should be saved so that we can continue shopping if we close the site and opening it back up.

We can use local storage to do this. Once the user is done with shopping, calculate the total price and then move through a fake payment experience, which may include tax calculations.

That would involve navigating between changes, so we have to learn how to do that.

Conclusion

We can learn a lot from building simple widgets. And we can learn a lot more from building complex storefronts.

If we can build them all with plain JavaScript, then we can build them with any frameworks. We’re definitely proficient if we can build all of that from scratch.