Thumbnail Game

desktop home screen
desktop before answering
desktop after answering (I chose first option, that's why the x appears; If I chose the third option(correct option), only the check appears
desktop ending screen
mobile home screen
images are stacked vertically in mobile, you scroll down to view options and scores are at the bottom
here is how scores are displayed in mobile
ending screen for mobile

Inspiration

I've always loved making videos but I never managed to attract many people to initially click on my videos because of my poor thumbnails. Thus, I thought it would be a good idea to make a game to help me get better at creating thumbnails.

What it does

Thumbnail game takes a query from the user and makes a youtube search with the query provided then prints 3 different thumbnails from the search for the user to look and decide which one of the three performed the best. There is a point system that tracks how many questions the user got right or wrong.

How we built it

I first drew a blueprint of the UI I wanted to create beforehand, then I mainly used html, css, and javascript to get my finished product. The game is hosted on Heroku and I connected it with thumbnailgame.tech domain I bought, but they said it takes 24-48 hours to take effect.

Challenges we ran into

when I first built the thumbnail game, I didn't expect to make it compatible with mobile devices. However, I changed my mind and had to reconfigure a lot of my code to make it compatible with both pc and mobile devices

Accomplishments that we're proud of

I'm super proud of the UI I created and the simpleness of the website. It's my proudest personal project yet!

What we learned

This is the first project I actually created a blueprint before coding, and I learned how important and time-efficient this step is! Another interesting thing I learned is that Heroku doesn't host static html files, so I had to create a dummy PHP file to host my website on Heroku.