DEV Community

Cover image for 10 JavaScript Projects in 1 Hour - Coding Challenge

10 JavaScript Projects in 1 Hour - Coding Challenge

Florin Pop on September 15, 2020

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 recor...
Collapse
 
perpetual_education profile image
perpetual . education • 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
Collapse
 
florinpop17 profile image
Florin Pop

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... ๐Ÿ˜…

Collapse
 
dejanantic profile image
Dejan Antic

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

Collapse
 
perpetual_education profile image
perpetual . education

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.

Collapse
 
aneeqakhan profile image
Aneeqa Khan

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

Collapse
 
florinpop17 profile image
Florin Pop

Happy you did!! ๐Ÿ’œ

Collapse
 
florincornea profile image
Cornea Florin

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

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

Collapse
 
florinpop17 profile image
Florin Pop

Aww! Thank you ๐Ÿ™

Collapse
 
huylong profile image
huylong

great tutorials

Collapse
 
mikefarrow profile image
MikeFarrow

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

Collapse
 
sirawit profile image
Dragodzs • Edited

Awesome Subscribed !!!

It made me feel energized and gained a lot of knowledge.

Pre-Order your book already. โ™ฅโ™ฅโ™ฅ

Collapse
 
florinpop17 profile image
Florin Pop

I'm very happy to hear that!

Collapse
 
madza profile image
Madza • Edited

Agree with the top comment wholeheartedly โค

img

Collapse
 
florinpop17 profile image
Florin Pop

๐Ÿ’œ Thank you for the support!!

Collapse
 
skywalkerits profile image
Ketki Pandey

amazing..........