Last Updated on June 29, 2024 by E. Scott
JavaScript projects come in all shapes and sizes. Angular, React, vanilla JavaScript, and Node.js. Some devs think Angular is foreign to React developers and vice versa. Other devs are great in React, but don’t know JavaScript. I’ve met devs who kill it in Node.js but can’t write CSS.
By far, the most amount of my framework experience resides in Angular. But I do develop in React and have become to enjoy Node.js too for backend endeavors. In todays tech landscape however, we need to know it all. Angular, React, Node, TypeScript, and JavaScript. Wherever you reside, here’s a wide array of small JavaScript projects.
Table of Contents
React
These JavaScript projects are fairly basic. The data table is a much needed component to an array of projects. Plug in an API, and you’re set to go. The quiz is more complex than the other two as it demonstrates a wide array of techniques. Check it out on Stackblitz and you’ll see that whatever answer you select, it shows the correct and incorrect answer in green and red respectively. Next is a Hackernews app that pings a simple API and returns news stories. Search for Tesla, Google, Apple, or any other tech related term to see it in action. Third is simple To Do List app. Remove existing items or create new ones.
Angular JavaScript Projects
Wide variety of apps here. A modal that animates open and closed via ngIf. A task that seems to be a common question in forums. As is services. Check out Services in Angular to get an idea of how services work. They’re one of several ways to share data between components, modules, or other services. Next up is Form Validation. It’s a ‘Caption This’ form with on the spot error handling vs on submit.
Thereafter is a Resolver. The purpose of this to resolve a request before loading a route. Suppose a route is largely dependent on a payload. We’d use this in the router as a dependency that essentially preloads page content. A Wizard UI follows that enables page data to be broken up into sections. Navigate to one section or another seamlessly.
Media queries are inbuilt to CSS, but not Angular. Here’s an easy way to so with thereof. Dropdown menus are common UI features. Grab yours here. The below profile panel toggle is ideal for anything with a login. It’s ready go. Integrate it with any responsive app.
Leave a Reply