Added icons

README.md

@@ -12,4 +12,7 @@ In addition, users can search for a specific country that they want information
 
 ## Data Sources
 For retrieving the country the user is located in, the website uses the OpenStreetMap [Nominatim](https://nominatim.openstreetmap.org/reverse) API.
-The data for the emergency contact information is from the source from [EmergencyNumberAPI](https://emergencynumberapi.com/).
+The data for the emergency contact information is from the source from [EmergencyNumberAPI](https://emergencynumberapi.com/).
+
+## GitHub Pages
+The site is currently running on [GitHub Pages](https://nienananas.github.io/EmergencyInfo/) (as of 07.01.2025).

css/style.css

@@ -51,6 +51,21 @@ header h1 {
     padding-left: 6px;
 }
 
+/* Style for the icons */
+#locationIcon {
+    width: 30px;
+    position: absolute;
+    left: 91%;
+    top: 6px;
+}
+
+#searchIcon {
+    width: 50px;
+    position: absolute;
+    left: 88%;
+    top: -1px;
+}
+
 /* Style for an wrapper element on the website */
 .wrapper-element {
     margin: 5px 3px;
@@ -59,6 +74,7 @@ header h1 {
     border: #3489eb solid 3px;
     border-radius: 5px;
     width: 97%;
+    position: relative;
 }
 
 /* Style for the emergency contact sections */
@@ -104,19 +120,7 @@ dd {
     display: none;
 }
 
-/* Styles for the country search */
-#countrySearch {
-    margin-top: 4px;
-    padding: 4px;
-    height: 40px;
-    width: 95%;
-    border: black solid 2px;
-    border-radius: 5px;
-    position: relative;
-    list-style-position: outside;
-}
-
-/* Styles for the dropdown */
+/* Styles for the country search dropdown */
 .dropdownBox {
     display: inline-block;
 
@@ -159,7 +163,7 @@ dd {
 .dropdownBox .dropdownContent {
     box-shadow: 0 5px 15px black;
     border-radius: 5px;
-    max-height: 370px;
+    max-height: 260px;
     overflow-y: auto;
     display: none;
     position: absolute;
@@ -184,6 +188,7 @@ dd {
 .dropdownBox .dropdownContent ul li {
     padding: 2px 5px;
     cursor: pointer;
+    font-size: 25px;
 }
 
 .dropdownBox .dropdownContent ul li.hidden {
@@ -199,6 +204,13 @@ dd {
     color: midnightblue;
 }
 
+#dropdownFieldLabel {
+    font-weight: bold;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
 /* Responsive Design for tablets */
 @media screen and (min-width: 768px) {
 
@@ -212,7 +224,6 @@ dd {
         padding-left: 10px;
     }
 
-
     .wrapper-element {
         flex: 1;
         width: 48%;
@@ -225,6 +236,24 @@ dd {
     #selectedLocation {
         float: right;
     }
+
+    #dropdownFieldLabel {
+        padding-top: 3px;
+    }
+
+    #locationIcon {
+        width: 40px;
+        position: absolute;
+        left: 87%;
+        top: 7px;
+    }
+
+    #searchIcon {
+        width: 55px;
+        position: absolute;
+        left: 85%;
+        top: 1px
+    }
 }
 
 /* Responsive Design for laptops/computers */
@@ -271,4 +300,12 @@ dd {
         font-weight: bold;
         font-size: 40px;
     }
+
+    .dropdownBox .dropdownContent ul li {
+        font-size: 30px;
+    }
+
+    .dropdownBox .dropdownContent {
+        max-height: 500px;
+    }
 }

index.html

@@ -21,6 +21,7 @@ <h1>
     </h1>
 </header>
 <div id="currentLocation" class="wrapper-element">
+    <img src="resources/location-icon.svg" alt="Location Icon" class="icon" id="locationIcon">
     <p class="errorMessage" id="locationError"></p>
     <div>
         <p class="headerText">Your Country:</p>
@@ -35,6 +36,7 @@ <h1>
     </button>
 </div>
 <div id="selectedLocation" class="wrapper-element">
+    <img src="resources/search-icon.svg" alt="Search Icon" class="icon" id="searchIcon">
     <p class="errorMessage" id="selectedError"></p>
     <div>
         <div class="dropdownBox" id="countryDropdown">
@@ -48,7 +50,6 @@ <h1>
                     <input type="text" id="searchBox">
                 </div>
                 <ul>
-                    <li class="dropdownItem selected">Select</li>
                     <li class="dropdownItem">Afghanistan</li>
                     <li class="dropdownItem">Albania</li>
                     <li class="dropdownItem">Algeria</li>

js/dropdown-search.js

@@ -1,6 +1,6 @@
 window.addEventListener("load", () => {
 
-        //Adds an event listener for opening & closing the dropdown
+        // Adds an event listener for opening & closing the dropdown
         window.addEventListener("click", (click) => {
             const dropdownElement = document.querySelector(".dropdownContent");
             const dropdown = document.getElementById("countryDropdown");
@@ -14,15 +14,17 @@ window.addEventListener("load", () => {
             }
         })
 
-        //Adds a click event-listener to every dropdown item for selecting the item
+        // Adds a click event-listener to every dropdown item for selecting the item
         const dropdownItems = document.querySelectorAll(".dropdownItem");
         dropdownItems.forEach(dropdownItem => {
             dropdownItem.addEventListener("click", () => {
                 const dropdownField = document.getElementById("dropdownField");
 
-                //Deselecting the previous item
+                // Deselecting the previous item
                 const selectedItem = document.querySelector(".selected");
-                selectedItem.classList.remove("selected");
+                if (selectedItem != null) {
+                    selectedItem.classList.remove("selected");
+                }
 
 
                 dropdownItem.classList.add("selected");
@@ -51,7 +53,7 @@ function closeDropdown() {
     const dropdown = document.getElementById("countryDropdown");
     dropdown.classList.remove("active");
 
-    //Reverses the previous filter
+    // Reverses the previous filter
     dropdownSearch.value = "";
     const hiddenElements = document.querySelectorAll(".hidden");
     hiddenElements.forEach(hiddenElement => {