Added Corona tracker app - take input from user

deep100x · deep100x · commit ccd26c294445 · 2024-02-10T23:58:36.000+05:30
diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
 		<a href="./api/dogRandom/index.html">dog-Random</a>
 		<a href="./api/superHero/index.html">super-Hero</a>
 		<a href="./projects/netflix/index.html">Netflix fetch-movies (WORK IN PROGRESS)</a>
+		<a href="./projects//corona-tracker/index.html">Corona tracker app (WORK IN PROGRESS)</a>
 
 		<p style="font-size: 1.2rem">projects</p>
 		<a href="./projects/addtocart/index.html">add-to-cart</a>
diff --git a/projects/corona-tracker/index.html b/projects/corona-tracker/index.html
@@ -0,0 +1,52 @@
+<!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" />
+		<title>Corona API</title>
+		<!-- Bootstrap CSS -->
+		<link
+			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+			rel="stylesheet"
+			integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+			crossorigin="anonymous"
+		/>
+	</head>
+	<body class="bg-light">
+		<div class="background m-0">
+			<div class="main position-relative p-2">
+				<div class="covidbg-img"></div>
+				<div class="container py-5">
+					<div class="row justify-content-center align-items-center">
+						<div class="col-6">
+							<div class="content text-center">
+								<h2 class="fw-bold bk-clr">Current Covid-19 Status Of India</h2>
+								<div class="input-section py-3 position-relative text-center">
+									<form action="" id="form" class="d-flex">
+										<select class="form-select fw-bold" id="inputdata">
+											<option value="">Select State</option>
+										</select>
+										<button type="submit" class="btn btn-primary fw-bold ms-2" id="special">Submit</button>
+									</form>
+								</div>
+							</div>
+						</div>
+						<div class="col-6">
+							<div class="main-img text-center"></div>
+						</div>
+					</div>
+					<div class="container py-5 bg-white shadow-lg bg-small" id="detail" style="display: none">
+						<h2 id="state"></h2>
+						<div id="confirm"></div>
+						<div id="active"></div>
+						<div id="death"></div>
+						<div id="recovered"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="jquery-3.6.3.min.js"></script>
+		<script src="main.js"></script>
+	</body>
+</html>
diff --git a/projects/corona-tracker/jquery-3.6.3.min.js b/projects/corona-tracker/jquery-3.6.3.min.js
diff --git a/projects/corona-tracker/main.js b/projects/corona-tracker/main.js
@@ -0,0 +1,46 @@
+let state = document.getElementById('state');
+let confirm = document.getElementById('confirm');
+let active = document.getElementById('active');
+let death = document.getElementById('death');
+let recover = document.getElementById('recovered');
+
+document.getElementById('detail').style.display = "none";
+
+let form = document.getElementById('form');
+form.addEventListener('submit',function (e) {
+    e.preventDefault();
+    fetchData();
+});
+
+document.addEventListener('DOMContentLoaded',function () {
+    fetchData();
+});
+
+
+function fetchData () {
+    let input = document.getElementById('inputdata').value;
+    console.log(input);
+
+    $.ajax({
+        url: `https://data.covid19india.org/data.json`,
+        dataType: "json",
+        method: "GET",
+        success: function (res) {
+
+            document.getElementById('inputdata').innerHTML = "<option value=''>Select State</option>";
+            console.log("All State Names:");
+            res.statewise.forEach(state => {
+                console.log(state.state);
+
+                let option = document.createElement('option');
+                option.value = state.state.toLowerCase();
+                option.textContent = state.state;
+                document.getElementById('inputdata').appendChild(option);
+                console.log();
+
+            });
+
+            updateData(res,input);
+        }
+    });
+}
