15 More Projects of 100Days100Projects

Thumbnail Image

30 days ago I started the #100Days100Projects challenge and in this article I'm going over the last 15 projects that I've built. You can check out the article in which I explained the first 15 projects here.

Note: You can also join the challenge if you want as there are other variants too if you feel like 100 days it's too much: 7Days7Projects or 30Days30Projects. Check out the rules here.

16. Clock

https://codepen.io/FlorinPop17/pen/eYOqQLz

Had a little fun recreating a nice clock design using JavaScript and on top of that I added dark mode. 👍

The "challenging" part of this project was to get the right transformation for all of the clock hands. One error is still the fact that the hand goes backwards when going from 60 to 0 because the degree is resetting as well.

Nevertheless, it works and it looks nice! 😄

Inspired by this dribbble shot.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

17. Testimonial Design

https://codepen.io/FlorinPop17/pen/yLLBPLZ

Recreated a slick 3D(ish) Testimonial Design and added some of my own testimonials in it.

Inspired by this dribbble shot.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

18. Typing Speed Test

https://codepen.io/FlorinPop17/pen/ExxYJdE

So far in the challenge I believe that this project was the hardest one to complete.

I started it on day 17, but because it was quite late I had to drop it and do the Testimonial Design instead.

The good thing is that I didn't give up and I started working again on the project on day 18. I removed all the boilerplate I had and started it fresh.

At some point I had a revolutionary idea (sort of) which drastically simplified the algorithm and I managed to finish the project.

The features are similar to the game found on typeracer.

Technologies used: HTML, CSS, JavaScript, ReactJS

19. Send Love Button

https://codepen.io/FlorinPop17/pen/eYYYErv

We all need some love, so why not build a button which sends us some hearts? emoji-laughing

Inspired by this dribbble shot.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

20. Official Website for #100Days100Projects

https://codepen.io/FlorinPop17/pen/NWWWYoe

This project was built in a live stream.

I wanted to create the Official Website for the challenge, so I stored the data in a glitch project (serving as the backend) and then consumed the data in a codepen project (the frontend).

Although the design is not the best, I'm still proud about the fact that I did it on my own emoji-laughing.

The next step would be to simplify the "add a new project" because as of now I have to manually insert it into the glitch app and then I have to upload it to the domain name that I bought.

Technologies used: HTML, CSS, JavaScript, NodeJs, ReactJS

21. Feedback UI Design

With just a little CSS and JavaScript I managed to create this cute design created by Ildiesign.

Design inspired by this dribbble shot.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

22. Tricky Cookie

https://codepen.io/FlorinPop17/pen/YzzXyoZ

When I saw this design on Dribble I knew that I have to make something fun out of it. So I did... emoji-laughing

When the user tries to click the "No. Not for me!" button, I'm changing the flex-direction attribute on the container. Ooops... I can see some angry users. emoji-laughing

Design inspired by this dribbble shot.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

23. Background Animation

https://codepen.io/FlorinPop17/pen/jOOPdbE

For some reason (I don't know why) I always liked this kind of effect.

I also built a similar project in the past (having only the random animation), so it was easier to re-do it this time and on top of it, I added some more animations.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

24. Hover Board

https://codepen.io/FlorinPop17/pen/PooPJKL

This project was inspired by another Codepen project (can't find the link anymore).

I wanted to add a click effect also, but unfortunately it was late and I was tired, so... maybe next time. 😛

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

25. Reviews Design

https://codepen.io/FlorinPop17/pen/NWWGoLP

Ildiesign comes to the rescue again by providing this beautiful design of a Reviews panel, so I implemented it! 😄

It has a little bit of JavaScript which takes the data attribute from the progress bar which is converted to a width in percentage.

Design inspired by this dribbble shot.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

26. Gravity Switch

https://codepen.io/FlorinPop17/pen/zYYrEOv

I saw this nice animation somewhere on Dribbble (can't find the link anymore) and I had to implement it.

It was quite fun to work again with CSS animations as I had to think about all the animation stops the components had to have.

There are 2 pieces which animates: the slider and the ball. I had to keep these pieces in sync.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

27. Line Through Effect

https://codepen.io/FlorinPop17/pen/LYYGMOV

Somewhere I saw this animation also, but I can't remember where.

It basically takes the letters of an h1 tag and it randomly adds a z-index on them to position them under the line or over the line.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

28. Workout Tracker Design

https://codepen.io/FlorinPop17/pen/bGGpqrr

Same process - saw the design - converted it to HTML & CSS. No JavaScript this time! 😛

Design inspired by this dribbble shot.

Technologies used: HTML, CSS

29. Event KeyCodes

https://codepen.io/FlorinPop17/pen/JjjKjvv

Ever had to work with Key Events in JavaScript? This little app solves the problem of having to find out what keyCode each key on your keyboard has. Just press a key and Voila! 👍

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

30. Animated Navigation

https://codepen.io/FlorinPop17/pen/wvvWxKN

This was also built in a live stream.

Animations, animations and some more animations to make it look pretty. 😉

Design inspired by this dribbble shot.

Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks

Conclusion

In the past 15 days I had less time to work on the projects from the Challenge, so I went more for the simpler approach of: "Finding a design - recreating it in HTML/CSS - adding a little bit of JavaScript on top to make it fancy".

But in the end, I managed to complete so far 30 projects in 30 days! 🥳

Who else wants to join me in this challenge? 🔥 There is also a discord group for patrons where you can talk with me and the other participants.

Happy Coding! 😇

Tagged with 100days100projects, html5, css3, javascript, reactjs, nodejs, api, animations