Restyle location display+ add flag images, restyle background

index.html

@@ -12,12 +12,13 @@
     <header>
         <div id='logo'></div>  
         <form id="search-bar">                             
-            <label><input type="text" id="search-input" class="search-field" placeholder="City" value="Ghent"/><p id="errorInput"></p></label>
+            <label><input type="text" id="search-input" class="search-field" placeholder="City"/><p id="errorInput"></p></label>
             <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></i></button>
+            <div class="empty" style="display: none" id="location-display"></div>
          </form>    
+
     </header>
     <main>
-         <div class="empty" style="display: none" id="location-display"></div>
          <div id="weather-display">
             <div id="locationInfo">
 

scripts.js

@@ -22,7 +22,7 @@ const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Frida
 
 
 const getLocationList = (location) => {
-    fetch("https://geocoding-api.open-meteo.com/v1/search?name=" + location + "&count=10&language=en&format=json")
+    fetch("https://geocoding-api.open-meteo.com/v1/search?name=" + location + "&count=20&language=en&format=json")
         .then(response => response.json())
         .then(data => {
             locationDisplay.innerHTML = "";
@@ -34,29 +34,43 @@ const getLocationList = (location) => {
         .catch(error => {
             console.log(error);
             locationDisplay.style.display = "none";
+            searchBarForm.style.borderRadius = "1rem";
             return false;
         });
 }
 
 const displayLocations = (location) => {
     locationDisplay.style.display = "flex";
-    const locationItem = document.createElement('div');
-    locationItem.textContent = location.name + " in " + location.admin1 + ", " + location.country;
-    locationItem.classList.add("location-item");
+    const locationDiv = document.createElement('div');
+        locationDiv.className = "location-item";
+    const locationFlag = document.createElement('img');
+        locationFlag.src = "https://hatscripts.github.io/circle-flags/flags/" + location.country_code.toLowerCase() + ".svg";
+        locationFlag.className = 'location-flag';
+        console.log(locationFlag.src)
+
+    locationDiv.appendChild(locationFlag);
+
+    const locationItem = document.createElement('span');
+    locationItem.textContent += location.name + " in " + location.admin1 + ", " + location.country;
+
     locationItem.longitude = location.longitude;
     locationItem.latitude = location.latitude;
     locationItem.timeZone = location.timezone;
     locationItem.name = location.name;
     locationItem.area = location.admin1;
     locationItem.country = location.country;
+    searchBarForm.style.borderRadius = "1rem 1rem 0 0";
+
+    locationDiv.appendChild(locationItem);
     locationItem.addEventListener('click', () => {
         locationInfo.innerHTML = "";
         cardContainer.innerHTML = "";
         locationDisplay.style.display = "none";
+        searchBarForm.style.borderRadius = "1rem";
         console.log("test");
         getWeatherForLocation(locationItem.longitude, locationItem.latitude, locationItem.name, locationItem.area, locationItem.country);
     })
-    locationDisplay.appendChild(locationItem);
+    locationDisplay.appendChild(locationDiv);
 }
 
 const getWeatherForLocation = (longitude, latitude, name, area, country) => {
@@ -78,7 +92,7 @@ const displayWeatherForLocation = (locationData, name, area, country) => {
     locationInfo.appendChild(locationHeader);
     locationInfo.appendChild(locationArea);
 
-    for (let i = 0; i < locationData.temperature_2m_max.length; i++) {
+    for (let i = 0; i < locationData.time.length; i++) {
         const cardElement = document.createElement('div');
             cardElement.className = "card";
         const cardDay = document.createElement('h3');
@@ -90,14 +104,17 @@ const displayWeatherForLocation = (locationData, name, area, country) => {
         const imgSrc = weatherCodes[locationData.weather_code[i]].day.image;
             cardImage.src = imgSrc;
 
+        const cardDesc = document.createElement('span');
+            cardDesc.textContent = weatherCodes[locationData.weather_code[i]].day.description;
+
         const cardTemp = document.createElement('span');
         let meanTemp = (locationData.temperature_2m_max[i] + locationData.temperature_2m_min[i]) / 2;
-            cardTemp.textContent = "°C " + meanTemp.toFixed(2);
+            cardTemp.textContent =meanTemp.toFixed(2) + "°C ";
 
-
         cardElement.appendChild(cardDay);
         cardElement.appendChild(cardImage);
-        cardElement.appendChild(cardTemp)
+        cardElement.appendChild(cardDesc);
+        cardElement.appendChild(cardTemp);
         cardContainer.appendChild(cardElement);
 
     }
@@ -108,6 +125,7 @@ async function getWeatherOnSubmit(location) {
     const response = await fetch("https://geocoding-api.open-meteo.com/v1/search?name=" + location + "&count=10&language=en&format=json")
     const data = await response.json();
     locationDisplay.style.display = "none";
+    searchBarForm.style.borderRadius = "1rem";
     locationInfo.innerHTML = "";
     cardContainer.innerHTML = "";
     getWeatherForLocation(data.results[0].longitude, data.results[0].latitude, data.results[0].name, data.results[0].admin1, data.results[0].country);
@@ -132,3 +150,5 @@ searchBarForm.addEventListener('keyup', (e) => {
         }
     }
 })
+
+getWeatherOnSubmit("Ghent");

styles.css

@@ -3,22 +3,28 @@
 }
 
 body{
-    height: 100dvh;
+    min-height: 100dvh;
     padding: 1rem;
+    margin: 0;
     background: rgb(28,125,177);
     /* background: linear-gradient(180deg, rgba(28,125,177,1) 0%, rgba(212,234,237,1) 100%); */
-
+    background-image: url('images/background.jpeg');
+    background-size: cover;
+    backdrop-filter: blur(50px);
     color: var(--font-color);
+    overflow-y: scroll;
 }
 
 header{
     display: flex;
     gap: 1rem;
+    width: 100%;
 }
 
 #search-bar{
     display: flex;
     justify-content: space-between;
+    position: relative;
     align-items: center;
     min-height: 5vh;
     border: 1px solid whitesmoke;
@@ -75,37 +81,56 @@ header{
 }
 
 #location-display{
+    position: absolute;
+    z-index: 5;
+    top: 2rem;
+    left: -1px;
+    width: 100%;
+    background-color: #2280B1;
+    backdrop-filter: blur(100px);
     display: flex;
     flex-direction: column;
-    margin-left: 3rem;
     border: 1px solid whitesmoke;
     border-top: none;
     padding-bottom: .5rem;
-    border-radius: 1rem;
+    border-radius: 0 0 1rem 1rem;
     max-height: 40vh;
     overflow-y: scroll;
 }
 
+.location-flag{
+    width: 1rem;
+    height: 1rem;
+}
 
 .location-item{
-    padding-left: .75rem;
-    margin-top: .5rem;
-    height: 1.5rem;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    min-height: 2rem;
+    gap: 1rem;
+    padding-left: .5rem;
+    border-top: 1px solid whitesmoke;
 }
 
+.location-item:hover{
+    cursor: pointer;
+}
 
 #weather-display{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
+    margin-top: 2rem;
 }
 
 #cards-container{
     display: grid;
     width: 100%;
     gap: 1rem;
+    margin-top: 2rem;
 }
 
 .card{
@@ -122,10 +147,20 @@ header{
     margin-top: 1rem;
 }
 
+.card img{
+    /* filter: saturate(1); */
+    width: 50%;
+    object-fit: cover;
+}
+
 .card:hover{
     cursor: pointer;
 }
 
+h3{
+    margin: 0;
+}
+
 @media (min-width: 750px){
     #cards-container{
     grid-template-columns: repeat(4, 1fr);