Hot or Not is a game involving temperature.
In each round, you are shown two cities and you have to guess whether or not the second is hotter than the first.
Your score depends on the number of consecutive rounds you answer correctly.
This is a new version of Hot or Not, a React app I made to study React.
Link: Hot or Not 2
Majority of internet users are on the phone these days. As browser viewports vary, the app not only shrinks and grows but it could also rearrange its layout for the best user experience.
This project was motivated by wanting to learn CSS animations and CSS transitions. I chose to do it manually for this project, as opposed to using a library to get a better grasp of it.
Since this app fetches real-time data, some delay may occur. Hence, various loading indicators are on the app so that it is perceived as faster.
I've also manually coded Share Buttons, as opposed to using a library. It should make the app easier to share and perhaps it could gain more traffic that way.
After giving your answer, the app takes a few milliseconds to reveal the answer. The manner in which it does so is a hand-made function inside to make the game more exciting.
This is a change from before when the suspense mechanism was to display random numbers and suddenly stop at the correct answer.
- CSS, for animations and transitions.
- React, the popular front-end Javascript library.
- VS Code, and various extensions such as:
- prettier
- ES Lint
- Docker, to containerize and deploy.
- Open Weather API for up-to-date temperature readings
- Teleport Cities API and the various photographers (credited in the app) for the city images
- Free SVG Backgrounds for the backgrounds