As we hope that Covid-19 is coming to an end, and we are able to start living our lives as we would have before the pandemic, we wanted to create a tool that allowed people to look back at the phases of the pandemic through snapshots of news articles.

What it does

The website provides a chart of the new cases of Covid-19 in Canada during the pandemic and allows you to click on points on the chart to display three random news articles about Covid-19 in Canada on the day represented by the clicked point.

How we built it

For our front-end, we used the usual, which was HTML5, CSS3, and SASS to make the CSS a bit easier, and then Chart.js to graph the data for the cases. For our back-end, we used Javascript to connect our databases, the Google News API and Open Covid API, to get information for our chart and the news of each specific day.

Challenges we ran into

One big challenge we ran into was not knowing that trying to use a variable in a function in javascript doesn't update the variable outside the function even if the variable was declared outside the function. This led us to a lot of frustration, and confusion over something that ended up being a very small error in our thinking that could have been fixed if we knew this about javascript functions before we started. It brings up a good point as sometimes small errors like a missing semi-colon end up being large time wasters. Other than this the project challenged us at almost every other line of code due to us being new to all the technology which lead to it being a great learning experience.

Accomplishments that we're proud of

This was the first time our team used JavaScript, so it felt good making a usable product with it. This was also our first real introduction to creating a website, and as you can see we have a lot to learn, especially when it comes to using frameworks. Even then, it felt great being able to create and deploy this website basically from scratch.

What we learned

Our entire team knew very little about JavaScript going into the hackathon. Being able to build the project allowed us to jump headfirst into learning basic JavaScript, the Chart.js library, and how to put JavaScript on a website. On top of this, we were all relative beginners in CSS, HTML, and using APIs this gave us a chance to learn a lot about all of them during the hackathon. The main things we learned were that the first time doing anything whether it is simple or complicated may bring unforeseen challenges, and making websites responsive takes a lot of time which we were not able to accomplish with our project due to time.

What's next for Covid-19 Timeline Canada

Next, we would like to make the website responsive on different sized devices and add more clickable dates. We would also like to point out the major events of the pandemic in Canada on our graph.

Share this project: