DEV Community

Michael Brackett
Michael Brackett

Posted on

Contributing to a COVID-19 website

Because of the recent times I wanted to contribute to something about COVID-19, I found a website that seemingly needed help. An Indian student at NIT Jamshedpur (National Institute of Technology, Jamshedpur)

The repo that I contributed to is https://github.com/Mustafiz04/Covid-19-website

Or: https://covid-19-website.herokuapp.com

The first thing that I noticed while browsing the website looking for something that I could fix or create was that when on a page that isn't the home page, clicking on the links 'about', 'symptoms', and 'prevention' didn't route correctly. Issue: https://github.com/Mustafiz04/Covid-19-website/issues/2

Looking through the code I quickly realized that the href for the links was using '#' which wouldn't actually route back to the home page. The fix was simple, just adding '/' in front of it so it would go back to the root of the website.

But considering that this only took me about ~10 minutes of my time finding and fixing the bug I thought there must be something else that I can do.

Obviously the website creator presumably speaks Indian as a first language as I could see some spelling mistakes and grammatical errors on the home page. I decided that I was going to fix them for him. This took a lot longer then I thought it was going to...

https://github.com/Mustafiz04/Covid-19-website/issues/6

In addition to this I found another bug on the 'donation' route which made the footer not attached to the bottom, seeing that I have had this issue sometimes before you can easily just do

position: absolute,
bottom: 0
Enter fullscreen mode Exit fullscreen mode

But the issue is that he was using a general css file, so next you may ask "Well why not just add an inline css property" that's what I thought as well until I came across the reason as to why I chose to go through with this pull request as apart of my assignment. The original developer was using something called EJS (https://ejs.co/). I have never worked with EJS but it seemed sorta like a template system almost like handlebars.js.

Originally I was just going to look for a fix for that specific EJS issue but it actually turned out to me pretty much learning basic EJS.

After looking through docs for I don't know how long and learning EJS I found out that I still cannot add special properties so instead I increase the .donation class on the page which pushed down the footer to the bottom of the viewport. The fix is for any monitor <2160 which basically means it fixes anything 4k and below. (Not many monitors are above 8k right now anyways)

My two pull: https://github.com/Mustafiz04/Covid-19-website/pull/5, https://github.com/Mustafiz04/Covid-19-website/pull/7

TLDR; I got to contribute to a Covid-19 app and learnt about EJS

Top comments (0)