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.
