Two weeks ago I started the #100Days100Projects challenge and in this article I'm going to showcase all the projects that I've built since I started. 😄
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.
1. Random Meal Generator
Called the TheMealDB API which returned a random meal in JSON format which I parsed and extracted the required data. I then added this data insite a DOM node/container.
I also tried SkeletonCSS for the first time. Was easy to use. 👍
Technologies used: HTML, CSS, SkeletonCSS, JavaScript
2. 2019 Mood Calendar
For this project I had to find out an algorithm to generate the entire calendar for 2019. It was a nice brainstorming session 😅.
After I figured out the algorithm and displayed the days on the page, it was easy to create 5 buttons - each corresponding to a different mood and allowing the user to click on the day he/she wants to color.
As extra functionalities I've added a randomizer and a clear button. Easy-peasy-lemon-squeeze.
Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks
3. Double Noise Flow Field
This project was inspired by Alca's website. I haven't managed to create something as smooth as he has (as there is a lot more math involved), but I added my "own touch" by adding an extra color.
I used p5js to build it as it's way easier than doing it from scratch in Vanilla JS. So kudos to the team who created it! 👍
Technologies used: JavaScript, p5js
4. Catch the insect
When I created this project I was thinking: "What game should I build in order to annoy the users badly? " 🤔, and then I got it:
Let's build a game in which they can kill an insect, but for each insect killed there will be two more insects spawning. 🙈 Basically an impossible game! Cool, right? 😆
People seemed to enjoy it so... That's good!
Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks
5. User Profile Design
I haven't had much time in day 5 so I had to build something simple, but at the same time I wanted it to look nice, so I created something inspired by this dribbble shot.
Technologies used: HTML, CSS
6. Pokedex
Challenged by James I recreated the Pokedex using the pokeapi to get the data and the pokeres.bastionbot to get higher quality images.
Look how cute those little pokemons are. 😍
Design inspired by this dribbble shot.
Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks
7. James Bond Tribute Page
Day 007 had to be related to James Bond, right? I found some information about the series and displayed it nicely in a web page.
The desktop version was pretty easy to create, but I had some "fun" working on the responsive part. In the end it turned out great.
Technologies used: HTML, CSS
8. Live Twitter Feed
In this project things got a little "trickier" as I wanted to have a live feed with all the tweets which contain the #100Days100Projects hashtag.
First, I had to create a backend project which I hosted on Glitch. This project had to communicate with the Twitter API in order to retrieve the data I wanted.
Next, I created the frontend project in which I replicated the twitter feed design and using an API call to my backend I managed to get all the information required.
The downside is that there is a request limit to the API so the user might not see the live feed. Nevertheless, for those users I created some dummy data. 😄
Technologies used: JavaScript, NodeJS, Twitter API, HTML, CSS
9. This or That (w/ dogs)
This little game was built for dog lovers. 🐕 You can select your favorite dog between two options.
I got all the images from the Dog API, but this only returned the image url so I had to parse that and convert it into an id which I stored inside Firebase to add a live Leaderboard in which you can see the top 10 most voted dogs.
I also stored only 350 images (or so) as the API would have returned a huge amount of dogs and the chances for the users to ever vote the same dog would have been small.
With only a couple hundred of dogs to vote on, you could see the leaderboard updating live.
Technologies used: JavaScript, Firebase, HTML, CSS
10. Math Wizz Game
One of the most entertaining projects I've built so far was this Math Game in which you have to solve simple Math problems to earn points.
The fun part about it was that it has a live Leaderboard built with Firebase and when I launched it, people started to play it like crazy as they wanted to remain in the top. 😆
I also had a couple of people who hacked it so I had to manually go into the Firebase database and remove their points. 😅
Initially I had localStorage set up to remember the users who logged in, but it didn't work on Codepen, so I had to remove it.
Technologies used: JavaScript, ReactJS, Firebase, HTML, CSS
11. Push Force Game
A non-intuitive physics game where you have to push the vehicle with your mouse into greed dots to gain points and avoid the red dots as you'll lose points.
I say non-intuitive because it's hard to control the car and you are most likely to end up on the negative side. 😆
Technologies used: JavaScript, p5js, HTML, CSS
12. Background Pattern Generator
Another day in which my time was limited so I created a simple Background Pattern Generator and I added a couple of settings to it.
Found some nice colors which makes it look prettier. 👍
Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks
13. Password Generator
This was the first project I've built in a live stream.
The fun part of this project was to come up with the algorithm to generate the password based on what the user selects (uppercase letters, lowercase letters, numbers, symbols, etc).
When that was finished, I added a simple Copy to Clipboard functionality.
Technologies used: HTML, CSS, JavaScript - all Vanilla - no frameworks
14. Contact Page Design
Nothing fancy, just a simple Contact Page Design. It also has a little bit of JavaScript which adds a "Thank you message" when the user submits the form.
Designed by Ildiesign.
Technologies used: HTML, CSS, JavaScript
15. Voting App
This was also built in a live stream.
The idea behind this project was to have a simple method to create a poll for my viewers and allow them to select what to build in that live stream.
The frontend app is connected to a Firebase database which stores all the votes. There are some simple calculations done to determine the votes in percentage for each project and there is the growing animation when someone votes for a project which looks nice.
Design inspired by this dribbble shot.
Technologies used: JavaScript, Firebase, HTML, CSS
Conclusion
Everyday is a new day, a new challenge, a new opportunity to build something great! 😄
So far it was a very interesting journey and I enjoyed every piece of it!
Let's see what the future holds!
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! 😇