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.
React
These JavaScript projects are fairly basic. 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.
Data Visualization
This group of JavaScript projects entail Chart.js and D3. Most of which I began building while working at a fast pace startup. The company built ridiculous UIs with lots of graphs. Everything was data driven. In turn I got good at cranking out NVD3, D3, High Charts, and Chart.js graphs.
They’re all different from one another. But certainly have concepts in common. Such as using just a canvas or svg tag. Then pumping in the visuals and data. Every chart I built was controlled via an external data source so there was always an API call involved.
It got really challenging however when I’d need to mock a design. And the chart would need to match, exactly. Throw in responsive and rendering obstacles, coupled with multiple streams of JSON, and it’s a real challenge. I digress. Below is an area chart, doughnut chart, and D3 bar chart.
HTML, JS, & CSS
Last group of JavaScript projects are far from minuscule. In every single professional environment, I see invalid markup and poorly written CSS. Please don’t be that full stack developer! lol. I hope you find these samples educational and useful. Moreover, this list and the others will undoubtedly grow. So return to this page sporadically.
Expandable rows is similar to an accordion, but unique in it’s own way. I got some of these ideas from designers and working directly with clients. Tabs are always useful for UI arrangement. As is a responsive carousel. How about a progress bar navigation? I could probably make this responsive. Ping me if you need it to be and I’ll add mobile.
Slider selection is quite old, but still nice to tinker with in my opinion. As is the CSS dropdown menu and animated advertisement. Event propagation simply shows the concept which is no doubt something to be aware of. Dynamic buttons showcase an easy way to generate thereof. Hope you enjoy these JavaScript projects.
Leave a Reply