Corona showdown is an application that allows the user to intuitively interact with up to date Covid-19 statistics in a new and fun way.
When a user loads the page they are met with a few places to interact with the data. First, starting from the top and working down is a Coronavirus News navigation bar.
Once hovered over, the navigation bar will display the top four Covid-19 related news articles that the user can explore.
Upon clicking an article the user is taken to The New York Times article of their choosing for further research into the topic.
Moving down the page the user will come across a scrolling ticker of world-wide coronavirus statistics displaying:
- Total Cases
- New Cases
- Recovered Cases
These numbers display all currently logged global statistics for the previous day and update daily. If the ticker is moving too quickly the user can simply hover over the data and it will pause.
Next displayed is the main content and interaction point of the page. A user is given the choice to select two states.
Once these two states are selected their image will be displayed. In between the two states there is a Battle Button. This is the Corona Showdown. Once pressed the application will compare the two states positivity rates for the coronavirus and award one of the two states a "winner" based on their lower positivity rate. A modal will pop up declaring the winner.
After exiting the modal the user is presented with further information on each state, displaying total cases, Covid-19 deaths for each state, and the chosen states record after each battle. Additionally, the background of the winning state will change to blue, while the losing state will change to hot pink.
The color coordinated backgrounds and displayed data will reset once the user choses new states to battle. The battle function can be performed again and again, however, the wins and losses of each state are recorded and will persist. If the user choses the same state to compare to itself a modal will direct the user to pick two different states as a winner can not be awarded in this case.
This site was made using:
- HTML
- CSS
- JavaScript
- jQuery
- Foundation 6
- Animate.css
- Font Awesome
- Moment.js
-
https://corona.lmao.ninja/docs/#/COVID-19%3A%20Worldometers/get_v3_covid_19 - for global statistics
-
https://api.covidtracking.com - for state comparison statistics
-
https://api.nytimes.com/svc/search/v2/articlesearch.json - for current top Covid-19 news articles
This site was built using GitHub Pages.
- Geoffrey Zimmerman
- Aika Kuo
- Nader Salem
- Rachel Thompson
Ticker code adapted from W.S. Toh / Tips & Tutorials - HTML & CSS example: https://code-boxx.com/html-css-news-ticker-horizontal-vertical/ retrieved December 23, 2020
States background colors adapted from https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/ retrieved December 22,2020
US States dropdown code adapted from https://codepen.io/carlnunes/pen/yhiEo retrieved December 17, 2020
Licensed under the MIT License