From b8aff5d68310ce40e66d2eb6ceeee8934c283d17 Mon Sep 17 00:00:00 2001 From: Dien973 Date: Fri, 25 Oct 2024 13:27:41 +0700 Subject: [PATCH 1/4] update --- index.html | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/index.html b/index.html index 7886581..4cb1c47 100644 --- a/index.html +++ b/index.html @@ -45,22 +45,6 @@
-
- - -

Cities

    From af3fd359346ed6068202e0d1425fb0ab00ff5098 Mon Sep 17 00:00:00 2001 From: Dien973 Date: Fri, 25 Oct 2024 13:29:32 +0700 Subject: [PATCH 2/4] update sidebar --- index.html | 53 ----------------------------------------------------- 1 file changed, 53 deletions(-) diff --git a/index.html b/index.html index 4cb1c47..aa54096 100644 --- a/index.html +++ b/index.html @@ -45,19 +45,6 @@
    -

    Cities

    -
    -
      -
    • New York
      • -
    • California
      • -
    • Paris
      • -
    • Tokyo
      • -
    • Bali
      • -
    • Sydney
      • -
    • Dubai
      • -
    -
    -

    Last Visited

      Empty.. @@ -76,46 +63,6 @@

      Last Visited

      Clear History
      -

      More Information

      -
        -
      • -
        -

        Sunrise

        -

        6:37 AM

        -
        -
        • -
      • -
        -

        Sunset

        -

        6:21 PM

        -
        -
        • -
      • -
        -

        Wind Speed

        -

        14km/h

        -
        -
        • -
      • -
        -

        Humidity

        -

        21%

        -
        -
        • -
      • -
        -

        Precipitation

        -

        0%

        -
        -
        • -
      • -
        -

        Cloudy

        -

        69%

        -
        -
        • -
      -

      Version 1.1

    From aa7632dced5eff0ad34ff0243589de43caba9291 Mon Sep 17 00:00:00 2001 From: Dien973 Date: Fri, 25 Oct 2024 14:53:55 +0700 Subject: [PATCH 3/4] update search bar --- css/style.css | 3 +-- index.html | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 6da66e8..3f44693 100644 --- a/css/style.css +++ b/css/style.css @@ -24,7 +24,7 @@ body { } .sidebar { - width: 25%; + width: 10%; background: rgba(0, 0, 0, 0.1); border-right: 0.2px solid #adadad; backdrop-filter: blur(25px); @@ -37,7 +37,6 @@ body { scroll-behavior: smooth; } - .sidebar::-webkit-scrollbar { width: 12px; height: 12px; diff --git a/index.html b/index.html index aa54096..a1cea72 100644 --- a/index.html +++ b/index.html @@ -65,6 +65,22 @@

    Last Visited

    +
    + + +
    logo From 8b452ba462c0292554a10ece1e7b9bfa0bc0d5da Mon Sep 17 00:00:00 2001 From: Dien Tran Date: Fri, 1 Nov 2024 10:20:50 +0700 Subject: [PATCH 4/4] Update more info --- css/style.css | 15 ++- index.html | 122 ++++++++++++++++++++++ js/main.js | 259 ++++++++++++++++++++++------------------------- js/weatherApi.js | 62 ++++++------ 4 files changed, 290 insertions(+), 168 deletions(-) diff --git a/css/style.css b/css/style.css index 3f44693..11286a4 100644 --- a/css/style.css +++ b/css/style.css @@ -24,7 +24,7 @@ body { } .sidebar { - width: 10%; + width: 11%; background: rgba(0, 0, 0, 0.1); border-right: 0.2px solid #adadad; backdrop-filter: blur(25px); @@ -114,11 +114,24 @@ body { 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 index a1cea72..d2e97c4 100644 --- a/index.html +++ b/index.html @@ -63,6 +63,128 @@

    Last Visited

    Clear History
    + +

    More Information

    +
      +
    • +
      +
      + + + +
      +

      Sunrise

      +

      6:37 AM

      +
      +
      • +
    • +
      +
      + + + +
      +

      Sunset

      +

      6:21 PM

      +
      +
      • +
    • +
      +
      + + + +
      +

      Wind Speed

      +

      14km/h

      +
      +
      • +
    • +
      +
      + + + +
      +

      Humidity

      +

      21%

      +
      +
      • +
    • +
      +
      + + + + +
      +

      Precipitation

      +

      0%

      +
      +
      • +
    • +
      +
      + + + +
      +

      Cloudy

      +

      69%

      +
      +
      • +
    +

    Version 1.1

    diff --git a/js/main.js b/js/main.js index 345a7ce..c5c5ace 100644 --- a/js/main.js +++ b/js/main.js @@ -1,52 +1,48 @@ -import { dayOfTheWeek, getMonth } from './utils.js'; +import { dayOfTheWeek, getMonth } 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'; +} 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', + "New York", + "California", + "Paris", + "Tokyo", + "Bali", + "Sydney", + "Dubai", ]; async function updateWeatherDisplay(city = cityInput) { @@ -59,114 +55,105 @@ document.addEventListener('DOMContentLoaded', function () { const time = date.substr(11); const theDate = `${y}-${m}-${d}`; - // Update UI elements - temp.innerHTML = `${weatherData.current.temp_c}°C / ${weatherData.current.temp_f}°F`; - dateOutput.innerHTML = `${getMonth(d, m, y)} ${d}, ${y}`; - timeOutput.innerHTML = time; - dayOutput.innerHTML = dayOfTheWeek(d, m, y); - nameOutput.innerHTML = ` ${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), - ]); - - sunriseOutput.innerHTML = - astronomyData.astronomy.astro.sunrise; - sunsetOutput.innerHTML = - astronomyData.astronomy.astro.sunset; - tomorrowOutput.innerHTML = `Tomorrow's Temperature: ${forecastData.current.temp_c}°C / ${forecastData.current.temp_f}°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'; - } + // Update UI elements + temp.innerHTML = `${weatherData.current.temp_c}°C / ${weatherData.current.temp_f}°F`; + dateOutput.innerHTML = `${getMonth(d, m, y)} ${d}, ${y}`; + timeOutput.innerHTML = time; + dayOutput.innerHTML = dayOfTheWeek(d, m, y); + nameOutput.innerHTML = ` ${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), + ]); + + sunriseOutput.innerHTML = astronomyData.astronomy.astro.sunrise; + sunsetOutput.innerHTML = astronomyData.astronomy.astro.sunset; + tomorrowOutput.innerHTML = `Tomorrow's Temperature: ${forecastData.current.temp_c}°C / ${forecastData.current.temp_f}°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 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); - } + function handleCityClick(e) { + cityInput = e.target.innerHTML; + updateWeatherDisplay(cityInput); + } - // Event Listeners - exploreBtn.addEventListener('click', () => { - cityInput = - exploreCities[ - Math.floor(Math.random() * exploreCities.length) - ]; - updateWeatherDisplay(); - }); + // Event Listeners + exploreBtn.addEventListener("click", () => { + cityInput = exploreCities[Math.floor(Math.random() * exploreCities.length)]; + updateWeatherDisplay(); + }); - clrHistory.addEventListener('click', () => { - clearLastVisited(); - displayLastVisited(); - }); + 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 = ""; + } + }); - 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(); + // Initial load + updateWeatherDisplay(); + displayLastVisited(); }); diff --git a/js/weatherApi.js b/js/weatherApi.js index 54791b3..1064cd0 100644 --- a/js/weatherApi.js +++ b/js/weatherApi.js @@ -1,40 +1,40 @@ -const API_KEY = '7c742b695b3243f3864123423232302'; +const API_KEY = "7c742b695b3243f3864123423232302"; export async function fetchWeatherData(city) { - try { - const response = await fetch( - `http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}&aqi=yes` - ); - const data = await response.json(); - return data; - } catch (error) { - console.error('Error fetching weather data:', error); - throw error; - } + try { + const response = await fetch( + `http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}&aqi=yes` + ); + const data = await response.json(); + return data; + } catch (error) { + console.error("Error fetching weather data:", error); + throw error; + } } export async function fetchAstronomyData(city, date) { - try { - const response = await fetch( - `http://api.weatherapi.com/v1/astronomy.json?key=${API_KEY}&q=${city}&dt=${date}` - ); - const data = await response.json(); - return data; - } catch (error) { - console.error('Error fetching astronomy data:', error); - throw error; - } + try { + const response = await fetch( + `http://api.weatherapi.com/v1/astronomy.json?key=${API_KEY}&q=${city}&dt=${date}` + ); + const data = await response.json(); + return data; + } catch (error) { + console.error("Error fetching astronomy data:", error); + throw error; + } } export async function fetchForecastData(city) { - try { - const response = await fetch( - `http://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${city}&days=1&aqi=yes&alerts=no` - ); - const data = await response.json(); - return data; - } catch (error) { - console.error('Error fetching forecast data:', error); - throw error; - } + try { + const response = await fetch( + `http://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${city}&days=1&aqi=yes&alerts=no` + ); + const data = await response.json(); + return data; + } catch (error) { + console.error("Error fetching forecast data:", error); + throw error; + } }