live link : https://sharp-allen-4f67d7.netlify.app/

A resource page for COVID - 19.

Data is taken from online resources AND

COVID - 19 statistics are taken from https://api.covid19india.org/data.json

On Navigation bar, different options ( Overview, Symptoms, Prevention, Treatment, Data) get highlighted as user reaches that section of page.

Also, clicking on an option will send the user to respective section of page.

On mobile phone view, a menu has been provided, which shows the options when it is clicked.

Also, different options ( Overview, Symptoms, Prevention, Treatment, Data) get highlighted as user reaches that section of page.

Also, clicking on an option will send the user to respective section of page.

Clicking again on the menu hides the options.

When options are not visible, name of the section which is currenly open on user screen is displayed on the top below the heading.

index.html

main.js

menu.png

style.css

readme.md

The portion where data related to Overview is provided on the page is being referred to as Overview section in this documentation.

Similarly Symptoms section , Prevention section, Treatment section and Data section.

navBar -- top navigation bar of the page ( contains heading and options )

options -- contains all the options ( overview, symptoms, prevention, preatment, data)

secondary -- used to display name of current section being displayed on the screen on the top of screen below the heading if options are not visible below the heading

box -- a container used to display data on the page. ( All sections use this class )

flex -- makes the display of the element as flex

pad -- provides desired padding to the element

function makeblack() makes all the options in the navigation bar black.

function listen (who,pre,flag) adds a 'click' event listener to who such that it sends the user to end of pre on page when flag == 1, else it sends the user to starting of the page.

listen(".SB",".over",1)

Then if we click on divison with class SB, we will go to the end of division with class over

( or the starting of division with class symp )

<div class="symptoms pad SB">Symptoms</div>
<div class="box over" id ="o">
means that if we click Symptoms on the navigation bar we will go to end of the Overview section of the page or the starting of Symptoms section on page.

function check(btn,sec,pre,flag,name) 
check if the navBar is currently coinciding with the division with class sec, if it is happening it makes the backgroundColor of division with class btn grey and (in mobile view)also displays name on the top of screen if options are not visible.

check(".SB",".symp",".over",1,"Symptoms")

checks if navBar is coinciding with

 <div class="box symp" id = "s"> ........   </div>

if it is happening, it makes the background color of

<div class="symptoms pad SB">Symptoms</div>

grey

and displays

<div class="secondary"> Symptoms </div>

( in mobile view ) on the top of screen if the options are not visible.

A 'click' event Listener is also added to menu which toggles the options.

if options are not visible, clicking on menu will reveal options

if they are visible, clicking on menu will hide options.

A XMLHttpRequest is made to https://api.covid19india.org/data.json to get COVID - 19 statistics and display them in the data section of the page.

stateAll contains all the data returned by the request.
stateData = stateAll.statewise contains the location wise data.

• stateData[i].state is the name of ith location

• stateData[i].confirmed is the total number of cases in ith location

• stateData[i].active is the total number of active cases in ith location

• stateData[i].recovered is the total number of recovered cases in ith location

• stateData[i].deaths is the total number of deaths in ith location

@media (min-width: 1000px){
    ......
}

are some special settings applied for desktop computers

@media (max-width: 1000px){
    .......
}

are some special settings applied for mobile view