Displayed No results found message (#1015)

index.html

@@ -2500,6 +2500,10 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
                 </div>
             </div>
         </div>
+
+        <br><br><br><br><br>
+        <div id="noResults" style="color: white; font-weight: bold; font-size: 18px;"><p>No results found 🙃</p></div>
+
     </div>
 
     <!-- Calculator Section Ends Here  -->

script.js

@@ -111,8 +111,8 @@ function filterCalculators() {
     input = document.getElementById('calculatorSearch');
     filter = input.value.toUpperCase();
     calculators = document.querySelectorAll('.container .box');
-    console.log(filter)
-    console.log(calculators)
+    var noResults = document.getElementById('noResults');
+    var hasResults = false;
 
     for (i = 0; i < calculators.length; i++) {
         var calculator = calculators[i];
@@ -121,12 +121,23 @@ function filterCalculators() {
 
         if (calculatorName.toUpperCase().indexOf(filter) > -1) {
             calculator.style.display = "flex";
+            hasResults = true;
         } else {
             calculator.style.display = "none";
         }
     }
+
+    if (hasResults) {
+        noResults.style.display = 'none';
+    } else {
+        noResults.style.display = 'block';
+    }
 }
 
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('noResults').style.display = 'none';
+});
+
 // Voice command in search bar feature
 const searchBar = document.querySelector("#searchBar");
 const searchBarInput = searchBar.querySelector("input");