Florin Pop

Posted on Sep 15, 2020

10 JavaScript Projects in 1 Hour - Coding Challenge

#javascript #webdev #beginners #tutorial

TL;DR: I completed a Coding Challenge in which I created: 10 JavaScript Projects in 1 Hour, all while being live on Twitch.

You can find the recording on YouTube below:

If you like this type of content, don't forget to give it a like 👍 and subscribe. It will help a lot! Thank you! 🙏

This is the follow-up challenge after I completed the 10 JavaScript Projects in 10 Hours Coding Challenge a week before.

After the success of the previous challenge I wanted to try something even crazier and as I mentioned at the end of the previous article, 10 Projects in 1 Hour sounded liked a good challenge.

So as usual, I planned out the project I wanted to create, I hit the "Stream" and "Record" buttons on my stream deck and... GO! 🔥

Here is the list of Projects I ended up coding:

Hamburger Button & Hidden Menu
Toast Notification
Auto Write Text
Popup / Modal
Purple Heart Rain
Background Changer
Dark Mode Toggle
Image Carousel
Sound Board
Zoom effect

The code is on GitHub and the projects are live here.

As you can see, the projects aren't very sophisticated and they can't really be as I only had 6 minutes on average per project. That's not a lot of time 😅.

The good thing was that I created a "Base Project" which had the HTML, CSS and JavaScript files ready and connected so I only had to focus on actually writing the code for the projects.

Also, knowing some keyboard shortcuts was definitely very helpful.

I ended up finishing the 10 projects in about 54 minutes. I could have tried to do another project, but I didn't... 10 projects would do in an hour, right? 😆

Looking back at it, the Sound Board project took to longest to finish (almost 8 minutes) but I have to say that the most fun to build was the Purple Heart Rain. I 💜 Purple! 💜 (If you follow me on Twitter you might already know that 😆).

All in all was a fun challenge. I could say that it was more intense than the previous one but at the same time, faster to complete so at the end it evens it out.

Next up in line: 10 Websites - Design to HTML/CSS, all in one go.

I'll keep you posted on how that goes!

Feel free to join on Twitch if you want to see the live action!

Thank you for reading! I hope you find it inspiring and that you'll also try this challenge one day and you'll have as much fun as I did!

Happy Coding! 😇

Top comments (15)

perpetual . education • Sep 16 '20 • Edited

This was super fun to watch!

We subscribed!

Here are the thoughts we had while watching:

You can also toggle a class to the body like .menu-open and then style the menu, button, and anything else based on that one point
You can probably do all of those challenges in the same project! :)
Using event delegation, you can get away from adding events specifically to buttons - and then maybe just add a rel='menu-toggle' to many places to trigger events.
You can also use a checkbox hack to toggle things and skip the events
One cool thing is that you can use pointer-events: none and opacity: 0 on some things - and it's like the modal is always there... but it's not in the way!
Close and open are often the same function
Could pass in an Object to the modal and use it in a template
Purple heart rain is really fun
Would be cool to try using @media (prefers-color-scheme: dark) {...
We find ourselves just reaching for template strings instead of document.create for fast things. Curious how you decide on that
Cool zoom implementation! Would be nice to toggle it

Florin Pop • Sep 16 '20

I really appreciate your feedback and I'm happy you liked it! 💜

I probably knew 90% of what you mentioned above and you are right, I should have used those but being under the time pressure... 😅

Dejan Antic • Sep 19 '20

Would love to se the video remade with these suggestions :)

perpetual . education • Sep 19 '20

Maybe we could pull together something similar. What are 10 things that you would actually want to do in a real project? (we do love purple rain hearts)... but if you have a short list, let us know.

Aneeqa Khan • Sep 15 '20

I love the rebeccapurple as well now :D
btw loved your video, it is insane you created these projects so fast. Thats awesome!

Florin Pop • Sep 15 '20

Happy you did!! 💜

Cornea Florin • Sep 15 '20

at this point when i get notified that you posted, instant like :))

all jokes aside, great job, keep up the good work!

Florin Pop • Sep 15 '20

Aww! Thank you 🙏

huylong • Sep 15 '20

great tutorials

MikeFarrow • Sep 18 '20

I love this masterpiece of quick fire presentation. Live coding is like speed dating for the normal, boring way of coding. A pioneer or this technique, Dan Shiffman made computing accessible to a new generation of non programmers using first, the Java based Processing language and then its port to Javascript, the P5 library.

Florin does the same for vanilla Javascript, HTML and CSS. It is debatable whether learning to code can ever be considered fun but Dan and Florin come closer to this ideal than many.

The art is to start with nothing or empty files and to create something that is engaging, visually attractive and functional in 5 minutes. You know that, if you could do this, you would ace any interview that you turned up at. Well maybe but it's a damn fine party trick, thanks Florin