Added loading

Author: programmerraja

coronatracker/State.html

@@ -50,6 +50,11 @@ <h2 id="title">All Over The World</h2>
     <div id="search">
 					<input type="text" name="search-input" id="search-input"  onkeyup="searchCountry()" placeholder="SEARCH HERE...">
 	</div>
+   <!-- ########################## LOADING ########################-->
+    <div class="loading__container">
+      <div class="loading"></div>
+      Loading...
+   </div>
      <div class="error_container">
         <p class="error-msg" style="margin:0;text-align: center;"></p>
     </div>

coronatracker/country.html

@@ -1,6 +1,8 @@
 let country_name_array=[];
 function getTodayStatus()
 {
+	let loading=document.querySelector(".loading__container");
+	loading.style["display"]="flex";	
 	let status_link="https://corona.lmao.ninja/v2/all";
 	$.getJSON(status_link,function(data)
 			{
@@ -51,6 +53,8 @@ function getTodayStatus()
 		    	$("#recovered-no").append(recovered+decreases+Math.abs(today_recovered)+"</span>");
 		    }
 		    $("#active-no").append(active);
+		    let loading=document.querySelector(".loading__container");
+			loading.style["display"]="none";	
 			}).fail(handleError);
 			getCountryStatus()
 
@@ -123,6 +127,7 @@ function getCountryStatus()
 						  				<div class='deaths-country'>Deaths<br><span id='active-no'>"+deaths+"</span></div><br>\
 						  			</div>"
 					$(".country-container").append(country_html);
+					
 				});
 			}).fail(handleError);
 }

coronatracker/country.js

@@ -60,9 +60,11 @@ <h2 id="title">All Over India</h2>
       But you can see the old data by using filter option<br>
     </p>
   </div>
-   <!-- ########################## FETCHING ########################-->
-   
-
+   <!-- ########################## LOADING ########################-->
+   <div class="loading__container">
+      <div class="loading"></div>
+      Loading...
+   </div>
 	<!-- ########################## Live Table ########################-->
 	 <div class="state-container">
 	 </div>

coronatracker/index.html

@@ -360,17 +360,22 @@ function search()
 {
 	let search_button=document.querySelector("#search_button");
 
-	search_button.addEventListener("click",function(){
+	search_button.addEventListener("click",async function(){
+		let loading=document.querySelector(".loading__container");
+		loading.style["display"]="flex";
 		let date=$("#search_date").val();
 		//if user requested date greater than API CLOSED DATE handle error
 		if(new Date(date)<new Date(API_CLOSED_DATE))
 		{
-			getSpecificData(date);
+			await getSpecificData(date);
 		}
 		else
 		{
+			loading.style["display"]="none";
 			handleError();
+
 		}
+		
 	});
 }
 
@@ -453,6 +458,8 @@ function getSpecificData(date)
 				addDataToTable(data_array,prev_data_array,0,1);
 			}
 			//calling the search state function to filter if user entered
+			let loading=document.querySelector(".loading__container");
+			loading.style["display"]="none";
 			searchState();
 		}).catch(handleError);
 

coronatracker/script.js

@@ -54,6 +54,12 @@
                 <input type="button" name="Search" value="Search"  id="search_button">
 	</div>
 
+     <!-- ########################## LOADING ########################-->
+    <div class="loading__container">
+      <div class="loading"></div>
+      Loading...
+   </div>
+   
     <div class="error_container">
        <img src="./image/error.png" class="error_img">
         <p class="error-msg" style="margin:0;text-align: center;">

coronatracker/state.html

@@ -1,4 +1,4 @@
-var district_name_array=[];
+ovar district_name_array=[];
 var state_code;
 const API_CLOSED_DATE="2021-02-01";
 function getAllData(isspecific=0)
@@ -302,13 +302,16 @@ function search()
 	let search_button=document.querySelector("#search_button");
 
 	search_button.addEventListener("click",function(){
-		let date=$("#search_date").val();		
+		let date=$("#search_date").val();	
+		let loading=document.querySelector(".loading__container");
+		loading.style["display"]="flex";	
 		if(new Date(date)<new Date(API_CLOSED_DATE))
 		{
 			getSpecificData(date);
 		}
 		else
 		{
+			loading.style["display"]="none";	
 			handleError();
 		}
 	});
@@ -318,6 +321,7 @@ function getSpecificData(date)
 {
 
 	$(".district-container").empty();
+	
 	document.querySelector(".district-container").style.display="flex";
 	document.querySelector(".error_container").style.display="none";
 	let link="https://api.covid19india.org/v3/data-"+date+".json";
@@ -391,6 +395,9 @@ function getSpecificData(date)
 				data_array[4]=district_name;
 				data_array[5]=date;
 				addDataToTable(data_array,prev_data_array,0,1);
+				let loading=document.querySelector(".loading__container");
+				loading.style["display"]="none";	
+
 			}
 
 		}).catch(handleError);

coronatracker/state.js

@@ -87,9 +87,33 @@ nav  span
 	font-size:1.5rem;
 	font-weight:500;
 }
+.loading__container
+{
+	display: none;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin: 10px;
+    
+}
+.loading
+{
+	height: 100px;
+	width:100px;
+	background-color:#03a9f4;
+	border-radius: 50%;
+	border-top: 5px solid #03a9f4;
+	border-left:5px solid black;
+	border-right: 5px solid black;
+	border-bottom: 5px solid black;
+	animation-name:spin;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+
+}
 .error_container
 {
-    display: flex;
+    display: none;
     flex-direction: column;
     height: auto;
     max-width: 300px;
@@ -245,6 +269,15 @@ nav  span
 		transform: translateX(0);
 	}
 }
+@keyframes spin
+{
+	0% {
+		transform: rotate(0);
+	}
+	100%{
+		transform: rotate(360deg);
+	}
+} 
 /* fro mobile device */
 @media  (max-width: 575.98px) {