This content originally appeared on DEV Community and was authored by Abdur-Rahman
Hello peeps to this week's article, in this brief post I would be collecting the project ideas you (if you're new to JS and are hungry for project ideas) can take from and create at your leisure time, starting from what I think is basic to a-bit-complex 😄.
1. Body background changer 🖌
This one is straight up one of the first projects a beginner can get his hands dirty with when learning DOM and DOM manipulation with JS
https://codepen.io/ShafSpecs/pen/mdrpZyJ
I did this project while learning JS at the early stages, the goal is to create a body with an embedded button that changes the background color randomly to colors that would be determined by you. (Like purple but hate pink? Don't add it. Prefer Red? Doeet. Your choice)
2. Hex color code changer 🎨
This one's similar but more tricky than the last. In the first one, we defined the colors beforehand. In this one, we would randomly generate a random 6-digit hex color code(#000000)
https://codepen.io/ShafSpecs/pen/jOMZqZr
Same as last project but with a little additional challenge and more to think about, you can comfortably attempt this as your first project and skip the first project if you prefer.
3. Counter App 🧮
A simple app with an "Add" button and a "Minus" button. Easy, right? Yes and No. You should be able to go below zero with the reove button and 100 with the add button
https://codepen.io/ShafSpecs/pen/LYRQgEz
Want an extra challenge? How about making the color of the number green (or your favorite color) when the number is positive, white when it's zero and red when it's a negative one?
4. A Random Generator ⚡
This one's a bit messy and quite simple. Make a simple app that outputs a random quote along with the person that was quoted.
https://codepen.io/ShafSpecs/pen/RwGQRNw
Makes for a fun go!
5. Store those messages! 📬
This one requires a bit more proble solving but it's easy nonetheless, this project requires you to make an input textarea and a button that when clicked, would save the user's last input in the textarea. If there is no message, offer a warning to those guys!
https://codepen.io/ShafSpecs/pen/BaLYLVq
6. A Clock App ⏰
This one's interesting, an analogue clock with JS. I personally enjoyed this project a lot (I learned a lot about CSS from it) and it is a brain whooper. This project would be a simple analogue clock that actually ticks according to the real time!
I didn't save my pen for this project 😔
Want an extra challenge? Add a ticking sound to the clock as the "hands" move.
7. A Clock App (Upgraded v2)
This one's also a JS Clock App, with a twist. It's not gonna be analogue but digital and it's going to have an alarm! Yup, an alarm. The alarm can be as simple as an alert on the page or a logged message in the console or as complex as push notifications. Your choice! 😄
Again, no pen for this one. I have no doubt there would be more like this 😩
8. A Time-Keeping App 🌇
This is not another clock 😆. Well, it is but just not like those two above. In this one, you would be creating an app that keeps track of the part of the day and greets you based on that data.
For example, is it afternoon? The message would be good afternoon. Is it morning? The message would be something based around a "Good Morning". Is it noon? Well, you go figure out the greetng for that one.
https://codepen.io/ShafSpecs/pen/OJRQvEp
9. A Testimonial App 👨⚖️
This one's simple. Make an app that shows testimonail of "customers". You can find several fake names and photos on fake api sites. This one's going to have a hitch with it though, the testimonials would be like a slideshow that allows the user to navigate between the testimonies of "customers" and when the last "customer" is reached, you are automatically looped back to the first customer.
No pen available
10. A Tax Calculator App 💵
This one's more exciting! Make an app that calculates Tax or VAT or however(it's percentages actually). You could actually decide to make it a mixture of all if you're up to the challenge!
https://codepen.io/ShafSpecs/pen/gOrvzPd
11. A calculator 🔢
This one's a legit calculator project. Make a calculator, as simple as that. Fun fact, NO. The calculator would be a digital one that can add, subtract, divide and multiply and it should have the layout of one too. With a digital display.
https://codepen.io/ShafSpecs/pen/RwGyZzg
Extra Challenge: make it a scientific calculator with
sin,cos,tan,Permutation,Combinationand whatnot.
12. Todo List 📓
Make a todo list. With addition of tasks and deletion of tasks. Simple. Not really, but I'm sure you can do it 😁.
https://codepen.io/ShafSpecs/pen/LYRrPRb
An additional spice to this challenge 🌶, allow the user to store the tasks in the
LocalStorage. This means that if the user refreshes the page or exits the browser, his tasks still stay safe and tracked.
13. A JS Filter System 🗃
This one's a bit non-straightfoward. To make the goal a bit easier to comprehend, make an online-shop looking app with several products each with their own categories. Add buttons that allow a user to selct his category and filter the products.
https://codepen.io/ShafSpecs/pen/LYRdmqb
Extra challenge here! Add a search box to allow users to search by name.
14. Hash Tag Formatter
This one should be up the list, I know 🤷♂️, don't ask why though. This projects easier than some of the ones above but it's still challenging nonetheless. Create an app that has a textarea for writing long text, when the user clicks a submit button. The app displays the same message but at the end adds a hashtag to the longest word in the text. Don't understand? If you types something like: "Hello there, John Doe. I like programming.", the response in the display would be: "Hello there, Jone Doe. I like programming. #programming"
https://codepen.io/ShafSpecs/pen/ExZWXOv
That's it guys for this week, peeps 😄. You thought I was stopping at 15, not 14? Gotcha!. Have fun building and attempt some of those projects. Seriously, it's not a beginners-only thing, you could give it a go. If you have one you are proud of and want to showcase, then do so by all means in the comments. Like always, have fun learning, debugging and throwing the usual developers' tantrum. It's a crazy world out there and a crazier industry we're in, you could be anything if you set your mind to it! I would meet you guys up there! Have fun and goodbye 👋.
This content originally appeared on DEV Community and was authored by Abdur-Rahman
Abdur-Rahman | Sciencx (2022-02-10T18:21:04+00:00) JavaScript Projects for beginners. Retrieved from https://www.scien.cx/2022/02/10/javascript-projects-for-beginners-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.