Staying Safe in a Pandemic

This is an educational slider website that I created for an entry-level interactive media college course with HTML, CSS, and JavaScript in April 2021 to teach users about COVID-19 in a fun and interactive way.

Gif of Staying Safe in a Pandemic Home

This website is made up of six horizontally aligned sections that act as slides. On each of the interior slides, a JavaScript onDrag function is used to switch slides. For instance, on one of the slides, the user must drag a mask onto a person's face in order to move to the next slide. This interaction is shown below for reference. On the final slide, there are two line graphs made with JavaScript and a small, dynamic window that uses API to display how many COVID-19 cases, deaths, and recoveries have occurred up to the current date.

On top of writing the HTML, CSS, and JavaScript for this site, I also made all of the illustrations myself using Adobe Illustrator.

Mask Drag Interaction Gif
View Github Repository Visit Live Site