whtrapp · Dien973 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024 · Nov 1, 2024
diff --git a/css/style.css b/css/style.css
@@ -67,7 +67,7 @@ input {
 }
 
 .sidebar {
-  width: 25%;
+  width: 11%;
   background: rgba(0, 0, 0, 0.1);
   border-right: 0.2px solid #adadad;
   backdrop-filter: blur(25px);
@@ -157,11 +157,24 @@ input {
   list-style-type: none;
   line-height: 3.3rem;
   padding: 0px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 15px;
 }
 
 .more-info-item {
   display: flex;
   justify-content: space-between;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px;
+  text-align: center;
+  transition: transform 0.3s;
+}
+
+.icon {
+  font-size: 24px;
+  margin-bottom: 4px;
 }
 
 .more-info-item p {

diff --git a/index.html b/index.html
@@ -129,40 +129,122 @@ <h4>Last Visited</h4>
           Clear History
         </button>
         <hr />
+
         <h4>More Information</h4>
         <ul class="more-info">
           <li>
             <div class="more-info-item">
+              <div class="icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="#FFA500"
+                  viewBox="0 0 256 256"
+                >
+                  <path
+                    d="M128 28a8 8 0 0 1 8 8v12a8 8 0 0 1-16 0V36a8 8 0 0 1 8-8zm0 168a40 40 0 1 0-40-40 40.04 40.04 0 0 0 40 40zm98.34-98.34a8 8 0 0 1 0 11.32l-8.49 8.48a8 8 0 1 1-11.32-11.32l8.48-8.49a8 8 0 0 1 11.33 0zm-176 8.48-8.49-8.48a8 8 0 0 1 11.32-11.32l8.49 8.48a8 8 0 1 1-11.32 11.32zM236 128a8 8 0 0 1-8 8h-12a8 8 0 0 1 0-16h12a8 8 0 0 1 8 8zm-180 0a8 8 0 0 1-8 8H36a8 8 0 0 1 0-16h12a8 8 0 0 1 8 8zm127.73 66.56a8 8 0 0 1 11.31 0l8.49 8.48a8 8 0 0 1-11.32 11.32l-8.48-8.49a8 8 0 0 1 0-11.31zm-125.46 0a8 8 0 0 1 0 11.31l-8.48 8.49a8 8 0 1 1-11.32-11.32l8.49-8.48a8 8 0 0 1 11.31 0zm61.73 25.12v12a8 8 0 0 1-16 0v-12a8 8 0 0 1 16 0z"
+                  />
+                </svg>
+              </div>
               <p>Sunrise</p>
               <p class="sunrise">6:37 AM</p>
             </div>
           </li>
           <li>
             <div class="more-info-item">
+              <div class="icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="#FF8C00"
+                  viewBox="0 0 256 256"
+                >
+                  <path
+                    d="M128 40a8 8 0 0 1 8 8v40a8 8 0 0 1-16 0V48a8 8 0 0 1 8-8zm-72.84 57.17a8 8 0 0 1 0 11.31l-8.49 8.49a8 8 0 1 1-11.32-11.32l8.48-8.48a8 8 0 0 1 11.33 0zm152.17 8.48-8.49-8.48a8 8 0 1 1 11.32-11.32l8.49 8.48a8 8 0 1 1-11.32 11.32zM228 128a8 8 0 0 1-8 8h-12a8 8 0 0 1 0-16h12a8 8 0 0 1 8 8zm-180 0a8 8 0 0 1-8 8H36a8 8 0 0 1 0-16h12a8 8 0 0 1 8 8zm45 50h96a48 48 0 0 1 0 96H93a48 48 0 1 1 0-96zm-9 88h114a32 32 0 0 0 0-64H84a32 32 0 0 0 0 64zm48-16h18v-8a8 8 0 0 1 16 0v8h18a8 8 0 0 1 0 16h-18v8a8 8 0 0 1-16 0v-8h-18a8 8 0 0 1 0-16z"
+                  />
+                </svg>
+              </div>
               <p>Sunset</p>
               <p class="sunset">6:21 PM</p>
             </div>
           </li>
           <li>
             <div class="more-info-item">
+              <div class="icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="#87CEEB"
+                  viewBox="0 0 256 256"
+                >
+                  <path
+                    d="M200 144a24 24 0 1 0-24-24 8 8 0 0 0 16 0 8 8 0 1 1 8 8H72a8 8 0 0 0 0 16h128zm24 32H104a8 8 0 0 0 0 16h120a24 24 0 0 0 0-48 8 8 0 1 0 16 0 8 8 0 1 1-8 8zm-16-88H48a8 8 0 0 0 0 16h160a16 16 0 0 1 0 32 8 8 0 1 0 0 16 32 32 0 0 0 0-64z"
+                  />
+                </svg>
+              </div>
               <p>Wind Speed</p>
               <p class="windspeed">14km/h</p>
             </div>
           </li>
           <li>
             <div class="more-info-item">
+              <div class="icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="#1E90FF"
+                  viewBox="0 0 256 256"
+                >
+                  <path
+                    d="M188 120a60 60 0 0 0-120 0 52 52 0 0 0 0 104h88a48 48 0 0 0 32-84.36 60.41 60.41 0 0 0 0-19.64zm-48 80a24 24 0 1 1 24-24 24.07 24.07 0 0 1-24 24zm72-48a36 36 0 1 0-36-36 36.04 36.04 0 0 0 36 36z"
+                  />
+                </svg>
+              </div>
               <p>Humidity</p>
               <p class="humidity">21%</p>
             </div>
           </li>
           <li>
             <div class="more-info-item">
+              <div class="icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="#fff"
+                  viewBox="0 0 256 256"
+                >
+                  <path
+                    d="M128,32a64,64,0,0,1,0,128,64,64,0,0,1,0-128m0,40a8,8,0,0,0-8,8v32H88a8,8,0,0,0,0,16h32v32a8,8,0,0,0,16,0V128h32a8,8,0,0,0,0-16H136V80A8,8,0,0,0,128,72Z"
+                  ></path>
+                  <path
+                    d="M64 184c-5 0-9 4-9 9v40c0 5 4 9 9 9s9-4 9-9v-40c0-5-4-9-9-9zm64-16c-5 0-9 4-9 9v56c0 5 4 9 9 9s9-4 9-9v-56c0-5-4-9-9-9zm64 24c-5 0-9 4-9 9v40c0 5 4 9 9 9s9-4 9-9v-40c0-5-4-9-9-9z"
+                  ></path>
+                </svg>
+              </div>
               <p>Precipitation</p>
               <p class="precipitation">0%</p>
             </div>
           </li>
           <li>
             <div class="more-info-item">
+              <div class="icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="#B0C4DE"
+                  viewBox="0 0 256 256"
+                >
+                  <path
+                    d="M168 112a56 56 0 0 0-56-56 56.26 56.26 0 0 0-37.91 15.27A80 80 0 1 0 32 240h136a72 72 0 0 0 0-144zm16 96H64a64 64 0 1 1 0-128 63.93 63.93 0 0 1 54.17 31.14 72.09 72.09 0 0 1 1.49 74.38A56.13 56.13 0 0 0 168 208z"
+                  />
+                </svg>
+              </div>
               <p>Cloudy</p>
               <p class="cloudy">69%</p>
             </div>
@@ -171,6 +253,22 @@ <h4>More Information</h4>
         <p><u>Version 1.1</u></p>
       </div>
       <div class="container">
+        <form id="locationInput">
+          <input type="text" class="search" placeholder="Search Location.." />
+          <button class="searchbtn">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              fill="#fff"
+              viewBox="0 0 256 256"
+            >
+              <path
+                d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"
+              ></path>
+            </svg>
+          </button>
+        </form>
         <div class="top" data-aos="fade-down">
           <div>
             <img src="img/logo.png" alt="logo" />

diff --git a/js/main.js b/js/main.js
@@ -1,13 +1,53 @@
+
+import { dayOfTheWeek, getMonth } from "./utils.js";
+
 import { dayOfTheWeek, getMonth, getCitiesList } from './utils.js';
 import {
   fetchWeatherData,
   fetchAstronomyData,
   fetchForecastData,
-} from './weatherApi.js';
+} from "./weatherApi.js";
 import {
   saveToLocalStorage,
   clearLastVisited,
   getLastVisitedCity,
+
+} from "./localStorage.js";
+import { updateUI } from "./uiController.js";
+
+document.addEventListener("DOMContentLoaded", function () {
+  const app = document.querySelector(".whtrlive");
+  const temp = document.querySelector(".today-temperature");
+  const dateOutput = document.querySelector(".date");
+  const timeOutput = document.querySelector(".time");
+  const nameOutput = document.querySelector(".place");
+  const icon = document.querySelector(".weather-icon");
+  const cloudOutput = document.querySelector(".cloudy");
+  const humidityOutput = document.querySelector(".humidity");
+  const windOutput = document.querySelector(".windspeed");
+  const PrecipitationOutput = document.querySelector(".precipitation");
+  const form = document.getElementById("locationInput");
+  const search = document.querySelector(".search");
+  const clrHistory = document.getElementById("clearHistory");
+  /*const cities = document.querySelectorAll(".city");*/
+  const dayOutput = document.querySelector(".day");
+  const sunriseOutput = document.querySelector(".sunrise");
+  const sunsetOutput = document.querySelector(".sunset");
+  const tomorrowOutput = document.querySelector(".tomorrow-temperature");
+  const lastVisitedList = document.getElementById("lastVisitedList");
+  const exploreBtn = document.getElementById("exploreBtn");
+
+  let cityInput = getLastVisitedCity() || "London";
+
+  const exploreCities = [
+    "New York",
+    "California",
+    "Paris",
+    "Tokyo",
+    "Bali",
+    "Sydney",
+    "Dubai",
+
 } from './localStorage.js';
 import { updateUI } from './uiController.js';
 import { autocomplete } from './searchAutocomplete.js';
@@ -43,6 +83,7 @@ document.addEventListener( 'DOMContentLoaded', function () {
 
   const exploreCities = [
     'New York', 'California', 'Paris', 'Tokyo', 'Bali', 'Sydney', 'Dubai',
+
   ];
 
   async function updateWeatherDisplay( city = cityInput ) {
@@ -57,6 +98,24 @@ document.addEventListener( 'DOMContentLoaded', function () {
       const time = date.substr( 11 );
       const theDate = `${y}-${m}-${d}`;
 
+
+      // Update UI elements
+      temp.innerHTML = `${weatherData.current.temp_c}&#176;C / ${weatherData.current.temp_f}&#176;F`;
+      dateOutput.innerHTML = `${getMonth(d, m, y)} ${d}, ${y}`;
+      timeOutput.innerHTML = time;
+      dayOutput.innerHTML = dayOfTheWeek(d, m, y);
+      nameOutput.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" viewBox="0 0 256 256"><path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"></path></svg> ${weatherData.location.name}, ${weatherData.location.country}`;
+
+      const iconID = weatherData.current.condition.icon.substr(
+        "//cdn.weatherapi.com/weather/64x64/".length
+      );
+      icon.src = "./img/icons/" + iconID;
+
+      const [astronomyData, forecastData] = await Promise.all([
+        fetchAstronomyData(city, theDate),
+        fetchForecastData(city),
+      ]);
+
       setInterval( () => displayTime( timeZone ), 1000 );
 
       temp.innerHTML = `${weatherData.current.temp_c}&#176;C / ${weatherData.current.temp_f}&#176;F`;
@@ -74,10 +133,92 @@ document.addEventListener( 'DOMContentLoaded', function () {
         fetchForecastData( city ),
       ] );
 
+
       sunriseOutput.innerHTML = astronomyData.astronomy.astro.sunrise;
       sunsetOutput.innerHTML = astronomyData.astronomy.astro.sunset;
       tomorrowOutput.innerHTML = `Tomorrow's Temperature: ${forecastData.current.temp_c}&#176;C / ${forecastData.current.temp_f}&#176;F`;
 
+      cloudOutput.innerHTML = weatherData.current.cloud + "%";
+      humidityOutput.innerHTML = weatherData.current.humidity + "%";
+      windOutput.innerHTML = weatherData.current.wind_kph + "km/h";
+      PrecipitationOutput.innerHTML = weatherData.current.precip_mm + "mm";
+
+      const timeOfDay = weatherData.current.is_day ? "day" : "night";
+      updateUI(app, weatherData, timeOfDay, exploreBtn);
+
+      saveToLocalStorage(weatherData.location.name);
+      displayLastVisited();
+      app.style.opacity = "1";
+    } catch (error) {
+      console.error("Error updating weather display:", error);
+      app.style.opacity = "1";
+    }
+  }
+
+  function displayLastVisited() {
+    const storedData = localStorage.getItem("lastVisited");
+    lastVisitedList.innerHTML = "";
+
+    if (storedData) {
+      try {
+        const data = JSON.parse(storedData);
+        const fragment = document.createDocumentFragment();
+        data.forEach((item) => {
+          const li = document.createElement("li");
+          li.classList.add("city");
+          li.textContent = item.city;
+          li.addEventListener("click", handleCityClick);
+          fragment.appendChild(li);
+        });
+        lastVisitedList.appendChild(fragment);
+      } catch (error) {
+        console.error("Error parsing stored data:", error);
+        lastVisitedList.innerHTML = "Error loading data.";
+      }
+    } else {
+      lastVisitedList.innerHTML = "Empty..";
+    }
+  }
+
+  function handleCityClick(e) {
+    cityInput = e.target.innerHTML;
+    updateWeatherDisplay(cityInput);
+  }
+
+  // Event Listeners
+  exploreBtn.addEventListener("click", () => {
+    cityInput = exploreCities[Math.floor(Math.random() * exploreCities.length)];
+    updateWeatherDisplay();
+  });
+
+  clrHistory.addEventListener("click", () => {
+    clearLastVisited();
+    displayLastVisited();
+  });
+
+  /*
+    cities.forEach((city) => {
+        city.addEventListener('click', (e) => {
+            cityInput = e.target.innerHTML;
+            updateWeatherDisplay();
+        });
+    });
+    */
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    if (search.value.length === 0) {
+      alert("Please type a proper City name");
+    } else {
+      cityInput = search.value;
+      updateWeatherDisplay();
+      search.value = "";
+    }
+  });
+
+  // Initial load
+  updateWeatherDisplay();
+  displayLastVisited();
+});
       cloudOutput.innerHTML = weatherData.current.cloud + '%';
       humidityOutput.innerHTML = weatherData.current.humidity + '%';
       windOutput.innerHTML = weatherData.current.wind_kph + 'km/h';
@@ -213,3 +354,4 @@ document.addEventListener( 'DOMContentLoaded', function () {
   }, 60 * 60 * 1000);
 } );
 
+