INDUSTRIAL TRAINING REPORT

ON
PROJECT “Create a dynamic website and host in a
real time server for monitoring COVID-19 cases and
visualize the case data on maps”
AT
INVENTIVE CORE INTEGRATION Pvt. Ltd.
Submitted in partial fulfilment of the requirements
For the award of degree of
Bachelor of technology
In
Computer Science and Engineering

Guru Jambheshwar University

of Science and Technology,
Hisar
Submitted to:- Submitted by:- Diksha
Mr. Ashwani 190010130036
B. Tech. CSE - 1

Project Report - Diksha 1

 DECLARATION
I, Diksha, Student of B. Tech. (CSE) declare that the project titled
“Create a dynamic website and host in a real time server for
monitoring COVID-19 cases and visualize the case data on
maps” undertaken during internship is submitted to Department of
Computer Science and Engineering, Guru Jambheshwar University
of Science and Technology, Hisar.

Date: 21st Jan 2022

Diksha
 Table of Contents:-
Sr. No. Title Page Number
1 Acknowledgement 4
2 Certificate 5
3
4
5
6
7
8
 Acknowledgement
“Tell me and I will forget, teach me and I may remember, involve
me and I learn” a quote by Benjamin Franklin most appropriately
describes involvement as best way to learn. Working on projects is
the true learning as we learn through involvement.
The successful completion of this project marks the beginning of an
ever - going learning experience of converting ideas and concepts
into real life, practical system. This project was a quite a learning
experience for me at each and every step. At the same time it has
given me confidence to work in professional setup. It was a
learning experience for me to work on IOT Projects, as the projects
involved many different spheres of life in which IOT practices are
extremely useful. I feel the experience gained during the project
will lead me to gain the bright prospect in the future. First of all I
would like to give thanks to Organiser Mr. Syed Azgar, for giving
me the opportunity to work in this esteemed organisation, which
not only has increased our awareness about various IOT domains
but also taught me the importance of team building. I express my
sincere thanks to Mr Sk Moinuddin Sir, for her active support and
continuous guidance without which it would have been difficult for
me to complete this project. I also express my sincere thanks to my
teams members for their constant support.

Diksha
CERTIFICATE
OF
COMPLETION
Certificate
 Abstract
Tim Berners-Lee, a British scientist, invented the World Wide Web (WWW) in
1989, while working at CERN. The Web was originally conceived and
developed to meet the demand for automated information-sharing between
scientists in universities and institutes around the world. The beginning of the
Web as a publicly available service on the Internet arrived on August 6, 1991,
when Berners The first web page address
was http://info.cern.ch/hypertext/WWW/TheProject.html.-Lee published the
first-ever webs
1. Introduction :
In this project , the proposed system will deal with the live website that shows
data regarding the covid cases in india.

In the home page you will see the total count of active, recovered, deaths and
confirmed cases all over India. Below that there is a density map that shows
the cases in different states and some other info.

In the statics page you will see all the data in a tabular format containing the
confirmed, active, recovered and deaths in number of all the states and union
territories.

In the last page there are few info sections like precautions, symptoms,
vaccines related info and news section where you will get the updated info
regarding the coronavirus.

OUR  PROJECT : COVID CASES VISUALIZER 

2.Existing System :
There are some systems that are already present showing the data regarding
the number of cases in India like https://www.mygov.in/covid-19,
https://www.covid19india.org/. They provide all the necessary data.
Representation of data is in a pictorial way also and with many other good
features. But they lack in some features that are added in our website which
you will see next.

3. Proposed System :
So, basically our website too includes all the necessary information like the
number of cases and all. But in our website we are including modules like, a
module that will show the news regarding the coronavirus that too live which is
fetched by some api. We have also included some info about the different
vaccines available in India and info like precautions and symptoms of
coronavirus. It also contains various links to the different government website
links so that you can easily go to that particular site without even searching. We
will get this data through APIs from some official government sites, our server
will fetch this data in json format and this data will be converted into readable
format using javascript and will present it on our website. This is how the whole
system is going to work. 

4.Objective :
The objective of this website is to make the user experience more comfortable,
we are trying to make the UI of the website as simple as possible and elegant.
Avoiding the unnecessary add ons and providing the useful features that will
increase the user experience in a positive way. We want that all the people
across India should be able to find and understand the data regarding this
pandemic easily and can have updated info. 
 5. Requirements :
We need an IDE(Integrated development environment) to write the code for
development of this website and a hosting platform where we can deploy it so
people can use it from any part of the world. 

There are many different ide available like visual studio code, sublime text,
atom, notepad++ and many others. Here we are going to use visual studio
code, the most popular one. 

And for the server we are using Netlify platform which is a cloud computing
company that offers hosting and serverless backend services for web
applications and static websites. This platform is simple to use and you can
upload your website by just drag and drop method.

Other than the software requirement we also need some knowledge of some
languages which are used to create websites like HTML, CSS, JAVASCRIPT.

6. Languages :
HTML
Html stands for hypertext markup language. It is used to create the structure of
the webpage, including the headings , text , paragraphs , inputs, buttons and
many other things. 
Here is the link to a documentation regarding HTML. You can learn more about
html in this documentation.

CSS 
Css stands for cascading style sheet. It is a style sheet language used for
describing the presentation of a document written in a markup language such
as HTML. CSS is a cornerstone technology of the World Wide Web, alongside
HTML and JavaScript. Basically it is used to add styles to your html code and it
gives the website a beautiful look and makes it eye-catching.
         Here is the link to a documentation regarding CSS.

    
JAVASCRIPT
    JavaScript, often abbreviated as JS, is a programming language that conforms to
the ECMAScript specification. JavaScript is high-level, often just-in-time compiled,
and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based
object-orientation, and first-class functions. It provides functionality to the website
like clicking a button will land you to a different page and many other powerful
features.
    Here is the documentation regarding JAVASCRIPT.

7. Code Implementation :
To begin with we need to create 3 files in a folder named as you want, file files
will be for html, css , javascript. Name the file name as index.html , style.css,
script.js , you can write any name but the extension should be the same in
order to work the files according to their functions. Open these files in vs code
to write in them.

We will start with the html code :

Write the basic html code ie html, head, title, body.   

  <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title> 
  </head>
  <body>
    
  </body>
</html>

Now start writing in the body tags, for the home page the code is as follows.
This is the code for nav bar.
         <div class="navbar">
      <div class="corona-title">COVID-19</div>
      <div class="nav-btn-box">
        <button class="nav-btn home-btn active-btn">Home</button>
        <button class="nav-btn stats-btn">News</button>
        <a href="#map" class="nav-btn">Map</a>
        <button class="nav-btn news-btn">About</button>
      </div>
    </div>
 
      Now this container contains count of total cases and and some contact info
<div class="total-records">
          <div class="total-active-cases total-box">
            <p class="total-heading">Total Active Cases</p>
            <p class="total-values active">300000000</p>
          </div>
          <div class="total-confirm-cases total-box">
            <p class="total-heading">Total Confirmed Cases</p>
            <p class="total-values confirm">300000000</p>
          </div>
          <div class="total-deaths total-box">
            <p class="total-heading">Total Deaths</p>
            <p class="total-values death">300000000</p>
          </div>
          <div class="total-recoveries total-box">
            <p class="total-heading">Total Recoveries</p>
            <p class="total-values recover">300000000</p>
          </div>
        </div>

        Here is the code for the map

        <div class="map" id="map">
          <div class="block">
            <!-- <i class="fab fa-whatsapp" id="whatsapp"></i> -->
          </div>
          <div class="block-two"></div>
          <iframe src="https://maps.mapmyindia.com/covid-19?graph"
class="iframe"></iframe>
        </div>

     Footer of the home page

<div class="footer">
          <p class="copyright-text">
            Created by Diksha, Hardik, Nishkarsh, Vaibhav, Yash
          </p>
        </div>

Now for the about section , here is the code and what it does.
This is the first container of about page which shows about the vaccines.
<div class="symptoms">
          <p class="symptom-title">
            <a href="https://youtu.be/IVu5ceymH-8"
target="_blank">VACCINES:</a>
          </p>
          <div class="symp-box">
            <div class="symp">
              <img src="covishield.png" alt="symptoms img" class="sym-
pics" />
              <p class="sym-name">EFFICIENCY: 90%|| GAP: 84 days</p>
            </div>
            <div class="symp">
              <img src="covaxin.png" alt="symptoms img" class="sym-
pics" />
              <p class="sym-name">EFFICIENCY: 80%|| GAP: 28 days</p>
            </div>
            <div class="symp">
              <img src="sputnik.png" alt="symptoms img" class="sym-
pics" />
              <p class="sym-name">EFFICIENCY: 91%|| GAP: 180 days</p>
            </div>
          </div>
        </div>

       This is the second container which shows the symptoms.

<div class="symptoms" id="symptoms">
          <p class="symptom-title">
            <a href="https://youtu.be/BDlE4aUT9tw" target="_blank"
            >COMMON SYMPTOMS:</a
            >
          </p>
          <div class="symp-box">
            <div class="symp">
              <img src="fever.png" alt="symptoms img" class="sym-pics"
/>
              <p class="sym-name">FEVER</p>
            </div>
                Add here more images as you can see in the website and then close the container.

Prevention section:
<div class="symp-box">
            <div class="symp">
              <img src="crowed.png" alt="symptoms img" class="sym-
pics" />
              <p class="sym-name">AVOID CROWD</p>
            </div>
            <div class="symp">
              <img src="distancing.png" alt="symptoms img" class="sym-
pics" />
              <p class="sym-name">SOCIAL DISTANCING</p>
            </div>
            <div class="symp">
              <img src="touching.png" alt="symptoms img" class="sym-
pics" />
              <p class="sym-name">AVOID TOUCHING FACE</p>
            </div>
            <div class="symp">
              <img src="mask.png" alt="symptoms img" class="sym-
pics" />
              <p class="sym-name">WEAR MASK</p>
            </div>
            <div class="symp">
              <img src="hand wash.png" alt="symptoms img" class="sym-
pics" />
              <p class="sym-name">WASH YOUR HANDS</p>
            </div>
            <div class="symp">
              <img src="sanitizer.png" alt="symptoms img" class="sym-
pics" />
              <p class="sym-name">USE SANITIZER</p>
            </div>
          </div>
        </div>

Here is the link for the complete html file.

HTML FILE

Now we are starting with javascript to add functionality to web site.

Starting with declaring variables.
const home_btn = document.querySelector('.home-btn');
const stats_btn = document.querySelector('.stats-btn');
const news_btn = document.querySelector('.news-btn');
const home_section = document.querySelector('.home');
const stats_section = document.querySelector('.statistics');
const news_section = document.querySelector('.news');
const total_active_cases = document.querySelector('.active');
const total_confirm_cases = document.querySelector('.confirm');
const total_death_cases = document.querySelector('.death');
const total_recover_cases = document.querySelector('.recover');
const nav_btn = document.querySelectorAll('.nav-btn');

Changing sections on click like home , about , map, about.

home_btn.addEventListener('click', function () {
  home_section.classList.remove('hidden-section');
  stats_section.classList.add('hidden-section');
  news_section.classList.add('hidden-section');
  nav_btn.forEach(el => {
    el.classList.remove('active-btn');
  });
  home_btn.classList.add('active-btn');
});
stats_btn.addEventListener('click', function () {
  home_section.classList.add('hidden-section');
  stats_section.classList.remove('hidden-section');
  news_section.classList.add('hidden-section');
  nav_btn.forEach(el => {
    el.classList.remove('active-btn');
  });
  stats_btn.classList.add('active-btn');
});
news_btn.addEventListener('click', function () {
  home_section.classList.add('hidden-section');
  stats_section.classList.add('hidden-section');
  news_section.classList.remove('hidden-section');
  nav_btn.forEach(el => {
    el.classList.remove('active-btn');
  });
  news_btn.classList.add('active-btn');
});

Code showing the statistics table.

data.statewise.forEach(el => {
      if (i != 0) {
        let html = `<tr>
        <td>${i}</td>
        <td class="state-bold">${el.state}</td>
        <td>${el.active}</td>
        <td>${el.confirmed}</td>
        <td>${el.recovered}</td>
        <td>${el.deaths}</td>
        </tr>`;
        table.insertAdjacentHTML("beforeend", html);
      }
      i++;
    });
Here is the link to the complete javascript file.
JAVASCRIPT FILE

Now coming to the css file, it does not require any explanation because it only
provides the style to our website.
Here is the link
CSS FILE
 8. API code implementation.
An API is a set of definitions and protocols for building and integrating
application software. API stands for application programming interface. APIs let
your product or service communicate with other products and services without
having to know how they're implemented.
Basically api are used to fetch data from the official sites on the internet
that are updated by the developer , here in our case we used an api that
fetches the number of covid cases and other info in India.
The server fetches the data from the official site in json format and this is
converted in readable format by javascript.

API for the state wise data . 

let table = document.querySelector('.tbody');
let i = 0;
fetch("https://api.covid19india.org/data.json")
  .then((response) => response.json())
  .then(function (data) {
    console.log(data);

API for the map.

loadNearbyCovidCentresMapmyIndiaDiv(document.getElementById("near
by-covid-places-mapmyindia"), { css:
"https://maps.mapmyindia.com/covid-places/css/custom.css" });
MapmyIndia.covidRemove();

API for the news part.

fetch("https://newsapi.org/v2/top-headlines?
 q=corona&language=en&apiKey=f1814df9fc244815928ae354b29c5783").th
en((res) => res.json()).then(function (data) {
  for (let i = 0; i < 4; i++) {
    console.log(data.articles[i].title)
    content_news.insertAdjacentHTML("afterbegin",
data.articles[i].title);
  }
  console.log(data.articles);
});

9. Deployment.
       To deploy this website we need a hosting platform, here we are using netlify
cloud computing platform .
To upload the project you just need to make an account and in the upload section
just drag and drop the complete folder of the website including all the images and all
the language files.
NETLIFY

  

10. Conclusion 
The website is aimed at augmenting the initiatives of the Government of India,
particularly the department of health, in proactively reaching out to and
informing the users of this website pertaining to containment of COVID -19. 
1.