generated from BuildforSDG-Cohort1-Assessment/covid-19-estimator-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (79 loc) · 4.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Author: Odinaka Joy,
Description: This is a simple application that helps user calculate the impact and servere impact of corona-virus based on specified region">
<link rel="stylesheet" href="./ui/css/style.css">
<title>COVID19ImpactEstimator | Build For SDG</title>
</head>
<body>
<header class="header">
<h1 class="title">Build For SDG Challenge</h1>
<section class="description">
<span>Description: </span>
The assessment empowers me to <strong>attempt</strong> helping society and leaders prepare for the <strong>real big problem</strong> of COVID-19, which is <strong>its impact on lives, health systems, supply chains, and the economy</strong>
<ol type="1">
<li>Too many patients, not enough hospitals and beds. A serious shortage of ventilators, masks and other PPE - if we donʼt practice social distancing.</li>
<li>Job losses or freezes, low cash flow and low production (even for essentials like food). These and more from too many people being sick, a sizable number dying (including some of the best people in many fields), and many others affected by the impact of losing loved ones or a world operating in slow motion</li>
</ol>
</section>
</header>
<main class="main">
<section class="form" id="form">
<h2 class="form-title">Please Fill In The Form To Get Accurate Details Of Impact In Your Region</h2>
<form action="" method="post">
<p>All Fields with asterisks are compulsory</p>
<div class="form-group">
<label for="country">Country: </label>
<input type="text" name="country" data-country id="country">
</div>
<div class="form-group">
<label for="averageAge">Average Age: </label>
<input type="number" step="any" name="averageAge" data-average-age id="averageAge">
</div>
<div class="form-group">
<label for="averageDailyIncomeInUSD">Average Daily Income In USD: </label>
<input type="number" step="any" name="averageDailyIncomeInUSD" data-average-daily-income-in-usd id="averageDailyIncomeInUSD">
</div>
<div class="form-group">
<label for="averageDailyIncomePopulation">Average Daily Income Population: </label>
<input type="number" step="any" name="averageDailyIncomePopulation" data-average-daily-income-population id="averageDailyIncomePopulation">
</div>
<div class="form-group">
<label for="periodType">Period Type: *</label>
<select name="periodType" data-period-type id="periodType">
<option value="days" selected>Days</option>
<option value="weeks">Weeks</option>
<option value="months">Months</option>
</select>
</div>
<div class="form-group">
<label for="timeToElapse">Time To Elapse: *</label>
<input type="number" name="timeToElapse" data-time-to-elapse id="timeToElapse" required>
</div>
<div class="form-group">
<label for="reportedCases">Reported Cases: *</label>
<input type="number" name="reportedCases" data-reported-cases id="reportedCases" required>
</div>
<div class="form-group">
<label for="population">Population: *</label>
<input type="number" name="population" data-population id="population" required>
</div>
<div class="form-group">
<label for="totalHopitalBeds">Total Hopital Beds: *</label>
<input type="number" name="totalHopitalBeds" data-total-hospital-beds id="totalHopitalBeds" required>
</div>
<br />
<input id="data-go-estimate" data-go-estimate type="submit" value="Submit">
</form>
</section>
<div class="output" id="output"></div>
</main>
<footer class="footer">
<small>Developed By Odinaka Joy - #BuildforSDG Challenge 2020</small>
</footer>
<script type="module" src="./ui/js/main.js"></script>
</body>
</html>