Improved UX

Author: programmerraja

coronatracker/country.html

@@ -62,7 +62,9 @@ <h2 id="title">All Over The World</h2>
     <div class="country-container d-flex flex-wrap"> 
 
     </div>
-   
+    <div class="search_result">
+      <p>No Result Found</p>
+    </div>   
 
 </body>
 	<!-- Optional JavaScript -->

coronatracker/country.js

@@ -1,3 +1,4 @@
+
 let country_name_array=[];
 function getTodayStatus()
 {
@@ -134,7 +135,8 @@ function getCountryStatus()
 function searchCountry()
 {
 	let search_val=$("#search-input").val().toLowerCase();
-	$("#search-input").val(search_val.toUpperCase());
+	$(".search_result").css("display","none");
+	let is_has=false;
 	$.each(country_name_array,function(index,country_name){
 				//split the class name if it has space 
 				let class_name=country_name.split(" ")[0].replace(".","")
@@ -148,6 +150,10 @@ function searchCountry()
 					$("."+class_name).addClass("hide");
 				}
 	});
+	if(!is_has)
+	{
+		$(".search_result").css("display","flex");
+	}
 
 }
 

coronatracker/index.html

@@ -67,7 +67,11 @@ <h2 id="title">All Over India</h2>
    </div>
 	<!-- ########################## Live Table ########################-->
 	 <div class="state-container">
+
 	 </div>
+   <div class="search_result">
+      <p>No Result Found</p>
+    </div>
 </body>
 	<!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->

coronatracker/script.js

@@ -340,12 +340,25 @@ function goToState(event)
 }
 function searchState()
 {
+	
 	let search_val=$("#search_input").val().toLowerCase();
+	$(".search_result").css("display","none");
+	let is_has;
+	if(state_name_array.length)
+	{
+		 is_has=false;
+	}
+	else
+	{
+		is_has=true;
+	}
+	let is_has=false;
 	$.each(state_name_array,function(index,state_name){
 				//split the class name if it has space 
 				let class_name=state_name.split(" ")[0]
 				if(state_name.startsWith(search_val))
 				{
+					is_has=true;
 					$("."+class_name).addClass("show");
 					$("."+class_name).removeClass("hide");
 				}
@@ -354,6 +367,10 @@ function searchState()
 					$("."+class_name).addClass("hide");
 				}
 	});
+	if(!is_has)
+	{
+		$(".search_result").css("display","flex");
+	}
 }
 
 function search()
@@ -468,6 +485,7 @@ function handleError()
 {
 	document.querySelector(".state-container").style.display="none";
 	document.querySelector(".error_container").style.display="flex";
+	document.querySelector(".loading__container").style.display="none";
 }
 search();
 

coronatracker/state.html

@@ -73,6 +73,9 @@
 	<div class="district-container">
 
     </div>
+     <div class="search_result">
+      <p>No Result Found</p>
+    </div>
 
 </body>
 <!-- Optional JavaScript -->

coronatracker/state.js

@@ -1,4 +1,4 @@
-ovar district_name_array=[];
+var district_name_array=[];
 var state_code;
 const API_CLOSED_DATE="2021-02-01";
 function getAllData(isspecific=0)
@@ -261,7 +261,7 @@ function addDataToTable(data_array,prev_data_array,isstatus,isold=0)
 			    }
 			    //retriving state value 
 			    let district_name=data_array[4]?data_array[4]:"unknown state";
-			     //push to array for search 
+				     //push to array for search 
 			    district_name_array.push(district_name.toLowerCase());
 			    //split with space and add only first one and remove dot from it 
 			    let class_name=district_name.split(" ")[0].toLowerCase();
@@ -283,11 +283,22 @@ function addDataToTable(data_array,prev_data_array,isstatus,isold=0)
 function searchDistrict()
 {
 	let search_val=$("#search_input").val().toLowerCase();
+	$(".search_result").css("display","none");
+	let is_has;
+	if(district_name_array.length)
+	{
+		 is_has=false;
+	}
+	else
+	{
+		is_has=true;
+	}
 	$.each(district_name_array,function(index,district_name){
 				//split the class name if it has space 
 				let class_name=district_name.split(" ")[0].replace(".","")
 				if(district_name.startsWith(search_val))
 				{
+					is_has=true;
 					$("."+class_name).addClass("show");
 					$("."+class_name).removeClass("hide");
 				}
@@ -296,6 +307,11 @@ function searchDistrict()
 					$("."+class_name).addClass("hide");
 				}
 	});
+	if(!is_has)
+	{
+		$(".search_result").css("display","flex");
+
+	}
 }
 function search()
 {
@@ -409,6 +425,7 @@ function handleError()
 {
 	document.querySelector(".district-container").style.display="none";
 	document.querySelector(".error_container").style.display="flex";
+	document.querySelector(".loading__container").style.display="none";
 }
 search();
 //added this at api closed on feb 6 2:47

coronatracker/style.css

@@ -179,7 +179,13 @@ nav  span
 	color:black;
 
 }
-
+.search_result
+{
+	display: none;
+	justify-content: center;
+	text-align: center;
+    color: red;
+}
 .hide
 {
 	display: none;