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? :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 :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
https://codepen.io/FlorinPop17/pen/eYYmRzb
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… :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. :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! 😇