SHRI DHARMASTHALA MANJUNATHESHWARA

COLLEGE OF ENGINEERING & TECHNOLOGY

AGILE PROJECT REPORT

Module : How to provide details of type of vaccine and dose for the user?

Submitted by

NAME USN
Aishwarya S Salunke 2SD18CS006
Apoorva Pai 2SD18CS019
Tejaswini P Angadi 2SD18CS117
Usha Nandini V 2SD18CS118
Pratiksha Hallad 2SD18IS033

Under the Guidance of

Prof. Vasudev K Parvati
Dept. of ISE, SDMCET, Dharwad

S.D.M. COLLEGE OF ENGINEERING & TECHNOLOGY,

DHARWAD-580002
2021
 ABSTRACT

This module aims to provide details of different vaccines available in India to

the user and the number of doses of each vaccine and time interval between them.
Also, the side effects of the vaccines will be provided so that the person getting
vaccinated can be prepared. The user has an option of choosing the vaccine he
wants to take so that the hospitals having the selected vaccines can be displayed
further. He also has to choose the dose number he wants to take. There are also
some graphical representations of what the module portrays so that it is easier to
look at the picture and understand what the module has and later dig into the
details. In today's time taking the vaccine is very important and having the
knowledge of vaccine the person is going to take is equally important.
 PLATE DISTRIBUTION SYSTEM

Table of Contents

PROBLEM STATEMENT ......................................................................................1

CHAPTER 1: INTRODUCTION ............................................................................3
CHAPTER 2: DETAILED DESIGN ......................................................................4
CHAPTER 3: PROJECT SPECIFIC REQUIREMENTS .......................................5
CHAPTER 4: IMPLEMENTATION ......................................................................6
CHAPTER 5: RESULTS .......................................................................................15
CHAPTER 6: EXPECTED OUTCOMES………………………………………16
CHAPTER 7: CONCLUSION ..............................................................................17

Page 1 of 17
PROBLEM STATEMENT

To provide details of different vaccines available to the user and also to mention
the number of doses each vaccine has and the time interval between the doses. To
also mention the side effects of the vaccine and give an option to the user to
choose the vaccine they want.

Department of Information Science and Engineering, SDMCET, Dharwad. 2

CHAPTER 1: INTRODUCTION

The best COVID-19 vaccine is the first one that is available to you.
There are three vaccines available in India:

Department of Information Science and Engineering, SDMCET, Dharwad. 3

CHAPTER 2: DETAILED DESIGN

Design is the first step in the development phase. Once the software requirements
have been analysed and specified the software design involves three technical
activities - design, coding, implementation and testing that are required to build
and verify the software.

Department of Information Science and Engineering, SDMCET, Dharwad. 4

CHAPTER 3: PROJECT SPECIFIC REQUIREMENTS

Hardware Requirements:

i3 Processor
256 MB Ram
512 KB Cache Memory
Hard Disk 10GB

Software Requirements:
Operating System : Windows
Web-Technology : HTML,CSS

Non-functional Requirements:

• Maintainability
• Portability
• Readability
• Sufficiency and Completeness
• Consistency
• Adaptability

Department of Information Science and Engineering, SDMCET, Dharwad. 5

CHAPTER 4: IMPLEMENTATION

Implementation is the stage where the theoretical design is turned into a working
system.

Step 1: Pictorial Representation of why taking a vaccine is important using HTML.

Step 2: To provide details about the vaccine and the doses using HTML.
Step 3: To mention the side effects of the vaccine.
Step 4: To provide details of the statistics of the number of people who have been
vaccinated and which vaccine they’ve taken using HTML. Also, to provide
updated details of the statistics using web scraping techniques using Python.
Step 5: Allowing the user to choose their vaccine and the dose using radio buttons
in HTML.

Sample Code

1)NUMBER OF DOSES (HTML PART)

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- Google Fonts Link -->
<link

href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700;800&disp
lay=swap"

Department of Information Science and Engineering, SDMCET, Dharwad. 6

 rel="stylesheet"
/>
<!-- Line Awesome CDN Link -->
<link
rel="stylesheet"
href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-
awesome/1.3.0/css/line-awesome.min.css"
/>

<link rel="stylesheet" href="styles.css">

</head>
<body>
<div class="main-container">
<h2>Which Dose?</h2>
<div class="radio-buttons">
<label class="custom-radio">
<input type="radio" name="radio" checked />
<span class="radio-btn">
<i class="las la-check"></i>
<div class="number-of-dose">
<h1>I</h1>
</div>
</span>
</label>
<label class="custom-radio">
<input type="radio" name="radio" />
<span class="radio-btn">
<i class="las la-check"></i>
<div class="number-of-dose">
<h1>II</h1>
</div>

Department of Information Science and Engineering, SDMCET, Dharwad. 7

 </span>
</label>
</div>
</div>
</body>
</html>

2)NUMBER OF DOSES(CSS PART)

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
}

.main-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.main-container h2 {
margin: 0 0 80px 0;
color: black;

Department of Information Science and Engineering, SDMCET, Dharwad. 8

 font-size: 60px;
font-family: "Raleway", sans-serif;
font-weight: 400;
}

.radio-buttons {
width: 100%;
margin: 0 auto;
text-align: center;
}

.custom-radio input {
display: none;
}

.radio-btn {
margin: 10px;
width: 180px;
height: 200px;
border: 3px solid transparent;
display: inline-block;
border-radius: 10px;
position: relative;
text-align: center;
box-shadow: 0 0 20px #c3c3c367;
cursor: pointer;
}

.radio-btn > i {
color: #ffffff;
background-color: #a29dc0;

Department of Information Science and Engineering, SDMCET, Dharwad. 9

 font-size: 20px;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%) scale(4);
border-radius: 50px;
padding: 3px;
transition: 0.2s;
pointer-events: none;
opacity: 0;
}

.radio-btn .number-of-dose {
width: 80px;
height: 80px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}

.radio-btn .number-of-dose i {
color: black;
line-height: 80px;
font-size: 60px;
}

.radio-btn .number-of-dose h3 {
color: black;
font-family: "Raleway", sans-serif;
font-size: 16px;

Department of Information Science and Engineering, SDMCET, Dharwad. 10

 font-weight: 400;
text-transform: uppercase;
}

.custom-radio input:checked + .radio-btn {

border: 3px solid black;
}

.custom-radio input:checked + .radio-btn > i {

opacity: 1;
transform: translateX(-50%) scale(1);
}

.main-container h1{
font-size:80px;
}

3)TYPE OF VACCINE(HTML PART)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles.css" />
<title>Vaccines</title>
</head>
<body>

Department of Information Science and Engineering, SDMCET, Dharwad. 11

 <h1>Please select your vaccine</h1>

<div class="radio-container">
<input type="radio" id="covishield" name="medicine" />
<label for="covishield">Covishield</label>

<input type="radio" id="covaxin" name="medicine" />

<label for="covaxin">Covaxin</label>

<input type="radio" id="sputnik" name="medicine" />

<label for="sputnik">Sputnik</label>
</div>
</body>
</html>

4)TYPE OF VACCINE(CSS PART)

*{
margin:0;
}

body {
height: 100vh;
display: flex;
flex-direction: column;
background: #eee;
align-items: center;
justify-content: center;
font-family: "Roboto Thin", sans-serif;
}

Department of Information Science and Engineering, SDMCET, Dharwad. 12

h1 {
margin: 48px;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 8px;
text-align: center;
}

.radio-container {
font-size: 24px;
padding: 8px;
}

input[type="radio"] {
display: none;
}

label {
position: relative;
cursor: pointer;
font-weight: bold;
padding-right: 32px;
}

label:nth-last-child(1) {
padding-right: 0;
}

label::before {
content: "";

Department of Information Science and Engineering, SDMCET, Dharwad. 13

 border: 2px solid #222;
display: inline-block;
width: 30px;
height: 30px;
margin: -8px 20px;
margin-left: 0;
border-radius: 50%;
}

label::after {
content: "";
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
background: rgba(34, 34, 34, 0);
left: 7px;
top: 12px;
margin: -8px 20px;
margin-left: 0;
border-radius: 50%;

transition: all 0.4s;

}

input[type="radio"]:checked + label::after {
background: rgba(34, 34, 34, 1);
}

Department of Information Science and Engineering, SDMCET, Dharwad. 14

CHAPTER 5: RESULTS

The best COVID-19 vaccine is the first one that is available to you.

Department of Information Science and Engineering, SDMCET, Dharwad. 15

CHAPTER 6: EXPECTED OUTCOMES

• Information regarding the vaccines will be provided.

• The number of doses will be mentioned and also the time interval between
the doses.
• The side effects of the vaccine will also be mentioned so that the person can
be prepared.
• The person will also get to choose which vaccine he wants to take.
• We will also mention about the importance of taking the vaccine and how
effective it is.

Department of Information Science and Engineering, SDMCET, Dharwad. 16

CHAPTER 6: CONCLUSION

• COVID 19-vaccines are effective. They can keep you from getting and
spreading the virus that causes COVID-19.
• COVID-19 vaccines also help to keep you from getting seriously ill even if
you do get COVID-19.
• Getting vaccinated yourself may also protect people around you.
So, taking the vaccine is very important and knowing everything about the
vaccine you take is equally important.

Department of Information Science and Engineering, SDMCET, Dharwad. 17