From e641ac9b6f1316854cd2e73484221a9ace31b5a4 Mon Sep 17 00:00:00 2001 From: VBsaini Date: Sun, 20 Oct 2024 17:43:20 +0530 Subject: [PATCH] issue #3 - Add localstorage to keep track of last-visited place and a list to showcase last 3 visited items --- css/style.css | 191 ++++++++++++---------- css/style.min.css | 2 +- index.html | 245 ++++++++++++++------------- js/main.js | 409 ++++++++++++++++++++++++++++------------------ 4 files changed, 484 insertions(+), 363 deletions(-) diff --git a/css/style.css b/css/style.css index 4cbf1fe..18a1fe2 100644 --- a/css/style.css +++ b/css/style.css @@ -1,174 +1,189 @@ html { - overflow-y: none; - overflow-x: none; + overflow-y: none; + overflow-x: none; } body { - font-family: 'Satoshi-Regular', sans-serif; - margin: 0px; - background: #000; + font-family: "Satoshi-Regular", sans-serif; + margin: 0px; + background: #000; } .whtrlive { - width: 100%; - display: flex; - flex-direction: row; - background: url('/img/background/day/clear.jpg'); - background-repeat: no-repeat; - background-size: cover; - min-height: 100vh; - max-height: 100vh; - opacity: 1; - transition: 500ms; + width: 100%; + display: flex; + flex-direction: row; + background: url("/img/background/day/clear.jpg"); + background-repeat: no-repeat; + background-size: cover; + min-height: 100vh; + max-height: 100vh; + opacity: 1; + transition: 500ms; } .sidebar { - width: 25%; - background: rgba(0, 0, 0, 0.1); - border-right: 0.2px solid #adadad; - backdrop-filter: blur(25px); - padding: 50px; - color: #fff; + width: 25%; + background: rgba(0, 0, 0, 0.1); + border-right: 0.2px solid #adadad; + backdrop-filter: blur(25px); + padding: 50px; + color: #fff; } #locationInput { - border-bottom: 1px solid #fff; - display: flex; - justify-content: space-between; - + border-bottom: 1px solid #fff; + display: flex; + justify-content: space-between; } #locationInput .search { - background: none; - border: none; - box-shadow: none; - margin: 0; - color: #fff; - font-family: 'Satoshi-Bold'; - font-size: 16px; - + background: none; + border: none; + box-shadow: none; + margin: 0; + color: #fff; + font-family: "Satoshi-Bold"; + font-size: 16px; } #locationInput .search:focus { - outline: none; + outline: none; } #locationInput .search::placeholder { - color: #ddd; - font-size: 16px; + color: #ddd; + font-size: 16px; } #locationInput button { - background: none; - color: #fff; - border: none; + background: none; + color: #fff; + border: none; } .cities { - list-style-type: none; - line-height: 3.3rem; - padding: 0px; + list-style-type: none; + line-height: 3.3rem; + padding: 0px; } .cities .city:hover { - font-family: 'Satoshi-Medium'; - transition: 0.5s ease; - transform: scale(1.05); - cursor: pointer; + font-family: "Satoshi-Medium"; + transition: 0.5s ease; + transform: scale(1.05); + cursor: pointer; } .sidebar hr { - border-color: rgba(255, 255, 255, 0.35); + border-color: rgba(255, 255, 255, 0.35); } .more-info { - list-style-type: none; - line-height: 3.3rem; - padding: 0px + list-style-type: none; + line-height: 3.3rem; + padding: 0px; } .more-info-item { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .more-info-item p { - margin: 0px + margin: 0px; } /*Container Starts */ .container { - width: 75%; - padding: 60px; - display: flex; - flex-direction: column; - justify-content: space-between; - color: #fff; - font-family: 'Satoshi-Bold'; + width: 75%; + padding: 60px; + display: flex; + flex-direction: column; + justify-content: space-between; + color: #fff; + font-family: "Satoshi-Bold"; } .container .top { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .container .top img { - width: 15%; + width: 15%; } .container .bottom { - display: flex; - justify-content: space-between; - align-items: end; + display: flex; + justify-content: space-between; + align-items: end; } .weather-temperature { - display: flex; - align-items: center; + display: flex; + align-items: center; } .weather-temperature .today-temperature { - font-size: 72px; - margin: 0px; - color: #D7E3FC; + font-size: 72px; + margin: 0px; + color: #d7e3fc; } .tomorrow-temperature { - margin: -10px 0px 0px 0px; + margin: -10px 0px 0px 0px; } .container .bottom .left h1, .container .bottom .left h2, .container .bottom .left h3 { - margin: 0px; + margin: 0px; } .container .bottom .day { - color: #D7E3FC; + color: #d7e3fc; } .sidebar h4 { - margin-bottom: 0px; + margin-bottom: 0px; } .time { - font-size: 60px; - margin: 0px; + font-size: 60px; + margin: 0px; } @media screen and (max-width: 500px) { - .weather-temperature .today-temperature, .time { - font-size: 30px; - } + .weather-temperature .today-temperature, + .time { + font-size: 30px; + } - html { - font-size: 12px; - } + html { + font-size: 12px; + } } @media screen and (max-height: 300px) { - .whtrlive { - min-height: 40em; - } -} \ No newline at end of file + .whtrlive { + min-height: 40em; + } +} +/* Codes for clear history button */ +#clearHistory { + background-color: transparent; + color: white; + font-family: "Satoshi"; + font-size: 20px; + border: 0.5px solid white; + padding: 10px; + margin-bottom: 10px; + cursor: pointer; + transition: all 0.25s; +} +#clearHistory:hover { + color: black; + background-color: white; +} diff --git a/css/style.min.css b/css/style.min.css index 0c53db7..416f627 100644 --- a/css/style.min.css +++ b/css/style.min.css @@ -1 +1 @@ -#locationInput .search,.container{color:#fff;font-family:Satoshi-Bold}html{overflow-y:none;overflow-x:none}body{font-family:Satoshi-Regular,sans-serif;margin:0;background:#000}.whtrlive{width:100%;display:flex;flex-direction:row;background:url('/img/background/day/clear.jpg') 0 0/cover no-repeat;min-height:100vh;max-height:100vh;opacity:1;transition:.5s}.sidebar{width:25%;background:rgba(0,0,0,.1);border-right:.2px solid #adadad;backdrop-filter:blur(25px);padding:50px;color:#fff}#locationInput{border-bottom:1px solid #fff;display:flex;justify-content:space-between}.container .top,.more-info-item{justify-content:space-between;display:flex}#locationInput .search{background:0 0;border:none;box-shadow:none;margin:0;font-size:16px}#locationInput .search:focus{outline:0}#locationInput .search::placeholder{color:#ddd;font-size:16px}#locationInput button{background:0 0;color:#fff;border:none}.cities,.more-info{list-style-type:none;line-height:3.3rem;padding:0}.cities .city:hover{font-family:Satoshi-Medium;transition:.5s;transform:scale(1.05);cursor:pointer}.sidebar hr{border-color:rgba(255,255,255,.35)}.container .bottom .left h1,.container .bottom .left h2,.container .bottom .left h3,.more-info-item p{margin:0}.container{width:75%;padding:60px;display:flex;flex-direction:column;justify-content:space-between}.container .top{align-items:center}.container .top img{width:15%}.container .bottom{display:flex;justify-content:space-between;align-items:end}.weather-temperature{display:flex;align-items:center}.weather-temperature .today-temperature{font-size:72px;margin:0;color:#d7e3fc}.tomorrow-temperature{margin:-10px 0 0}.container .bottom .day{color:#d7e3fc}.sidebar h4{margin-bottom:0}.time{font-size:60px;margin:0}@media screen and (max-width:500px){.time,.weather-temperature .today-temperature{font-size:30px}html{font-size:12px}}@media screen and (max-height:300px){.whtrlive{min-height:40em}} .mobile{display:none;} @media screen and (max-width:1000px){.whtrlive{display:none;} .mobile{display:inherit;} .mobile{display:flex; flex-direction:column; color:#fff; min-height: 100vh; justify-content: center; align-items: center;} .mobile h1,p{ margin:0px;}} \ No newline at end of file +#locationInput .search,.container{font-family:Satoshi-Bold;color:#fff}html{overflow-y:none;overflow-x:none}body{font-family:Satoshi-Regular,sans-serif;margin:0;background:#000}.whtrlive{width:100%;display:flex;flex-direction:row;background:url("/img/background/day/clear.jpg") 0 0/cover no-repeat;min-height:100vh;max-height:100vh;opacity:1;transition:.5s}.sidebar{width:25%;background:rgba(0,0,0,.1);border-right:.2px solid #adadad;backdrop-filter:blur(25px);padding:50px;color:#fff}#locationInput{border-bottom:1px solid #fff;display:flex;justify-content:space-between}.container .top,.more-info-item{justify-content:space-between;display:flex}#locationInput .search{background:0 0;border:none;box-shadow:none;margin:0;font-size:16px}#locationInput .search:focus{outline:0}#locationInput .search::placeholder{color:#ddd;font-size:16px}#locationInput button{background:0 0;color:#fff;border:none}.cities,.more-info{list-style-type:none;line-height:3.3rem;padding:0}.cities .city:hover{font-family:Satoshi-Medium;transition:.5s;transform:scale(1.05);cursor:pointer}.sidebar hr{border-color:rgba(255,255,255,.35)}.container .bottom .left h1,.container .bottom .left h2,.container .bottom .left h3,.more-info-item p{margin:0}.container{width:75%;padding:60px;display:flex;flex-direction:column;justify-content:space-between}.container .top{align-items:center}.container .top img{width:15%}.container .bottom{display:flex;justify-content:space-between;align-items:end}.weather-temperature{display:flex;align-items:center}.weather-temperature .today-temperature{font-size:72px;margin:0;color:#d7e3fc}.tomorrow-temperature{margin:-10px 0 0}.container .bottom .day{color:#d7e3fc}.sidebar h4{margin-bottom:0}.time{font-size:60px;margin:0}@media screen and (max-width:500px){.time,.weather-temperature .today-temperature{font-size:30px}html{font-size:12px}}@media screen and (max-height:300px){.whtrlive{min-height:40em}}#clearHistory{background-color:transparent;color:#fff;font-family:Satoshi;font-size:20px;border:.5px solid #fff;padding:10px;margin-bottom:10px;cursor:pointer;transition:.25s}#clearHistory:hover{color:#000;background-color:#fff} \ No newline at end of file diff --git a/index.html b/index.html index eea2da7..adb03db 100644 --- a/index.html +++ b/index.html @@ -5,145 +5,164 @@ - - + - - - - + + + + whtr.live - Minimalistic Weather Website - + - - - + + + - + - - + + - - - - - - - - - + + + + + + + + - +
-
-
- - -
-

Cities

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

More Information

-
    -
  • -
    -

    Sunrise

    -

    6:37 AM

    -
    -
    • -
  • -
    -

    Sunset

    -

    6:21 PM

    -
    -
    • -
  • -
    -

    Wind Speed

    -

    14km/h

    -
    -
    • -
  • -
    -

    Humidity

    -

    21%

    -
    -
    • -
  • -
    -

    Precipitation

    -

    0%

    -
    -
    • -
  • -
    -

    Cloudy

    -

    69%

    -
    -
    • -
-

Version 1.0

+
+
+ + +
+

Cities

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

Dev by Ato & Apixul

-
-

6:09 PM

-
-
-
-

February 25, 2023

-

Saturday

-

London

-
-
-
- weather status icon -

40°C / 104°F

-
-

Tommorow: 20°C / 68°F

- -
-
+
+

Last Visited

+
    + Empty.. +
+ +
+

More Information

+
    +
  • +
    +

    Sunrise

    +

    6:37 AM

    +
    +
    • +
  • +
    +

    Sunset

    +

    6:21 PM

    +
    +
    • +
  • +
    +

    Wind Speed

    +

    14km/h

    +
    +
    • +
  • +
    +

    Humidity

    +

    21%

    +
    +
    • +
  • +
    +

    Precipitation

    +

    0%

    +
    +
    • +
  • +
    +

    Cloudy

    +

    69%

    +
    +
    • +
+

Version 1.0

+
+
+
+
+ logo +

Dev by Ato & Apixul

+
+

6:09 PM

+
+
+

February 25, 2023

+

Saturday

+

London

+
+
+
+ weather status icon +

40°C / 104°F

+
+

+ Tommorow: 20°C / 68°F +

+
+
+
- +
- logo -

Site is Under Development

-

Check out Our site in Desktop

-

Version 1.0

+ logo +

Site is Under Development

+

Check out Our site in Desktop

+

Version 1.0

- - + diff --git a/js/main.js b/js/main.js index 948d5cb..b1262b9 100644 --- a/js/main.js +++ b/js/main.js @@ -1,175 +1,262 @@ -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 btn = document.querySelector('.searchbtn'); - 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') - +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 btn = document.querySelector(".searchbtn"); + const clrHistory = document.querySelector("#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"); + //Default City - let cityInput = 'London'; - - cities.forEach((city) => { - city.addEventListener('click', (e) => { + let cityInput = "London"; + + // Function to save data to local storage + function saveToLocalStorage(city) { + const storedData = localStorage.getItem("lastVisited"); + if (storedData) { + let data = JSON.parse(storedData); + const existingCityIndex = data.findIndex((item) => item.city == city); + if (existingCityIndex !== -1) { + data[existingCityIndex].city = city; + data.unshift(data.splice(existingCityIndex, 1)[0]); + } else { + data.unshift({ city }); + } + data = data.slice(0, 3); + localStorage.setItem("lastVisited", JSON.stringify(data)); + } else { + localStorage.setItem("lastVisited", JSON.stringify([{ city }])); + } + } + + // Function to Clear last visited cities + function clearLastVisitied() { + const storedData = localStorage.getItem("lastVisited"); + if (storedData) { + localStorage.removeItem("lastVisited"); + } + } + clrHistory.addEventListener("click", (e) => { + clearLastVisitied(); + displayLastVisited(); + }); + // Function to display last visited cities + function displayLastVisited() { + const storedData = localStorage.getItem("lastVisited"); + const lastVisitedList = document.getElementById("lastVisitedList"); + if (storedData) { + const data = JSON.parse(storedData); + lastVisitedList.innerHTML = ""; + data.forEach((item) => { + console.log(item); + const li = document.createElement("li"); + li.classList.add("city"); + li.addEventListener("click", (e) => { //Change to clicked city cityInput = e.target.innerHTML; - console.log(cityInput) - + console.log(cityInput); //def later fetchWeatherData(); - - app.style.opacity = '1'; + saveToLocalStorage(cityInput); + displayLastVisited(); + app.style.opacity = "1"; + }); + li.textContent = item.city; + lastVisitedList.appendChild(li); }); - }) - + } else { + lastVisitedList.innerHTML = "Empty.."; + } + } + + cities.forEach((city) => { + city.addEventListener("click", (e) => { + //Change to clicked city + cityInput = e.target.innerHTML; + console.log(city); + + //def later + fetchWeatherData(); + saveToLocalStorage(cityInput); + displayLastVisited(); + app.style.opacity = "1"; + }); + }); + //submission of the form - form.addEventListener('submit', (e) => { - if (search.value.length == 0) { - alert("Please type a proper City name") - } else { - cityInput = search.value; - fetchWeatherData(); - search.value = ""; - app.style.opacity = '1'; - - } - e.preventDefault(); + form.addEventListener("submit", (e) => { + if (search.value.length == 0) { + alert("Please type a proper City name"); + } else { + cityInput = search.value; + fetchWeatherData(); + saveToLocalStorage(cityInput); + displayLastVisited(); + search.value = ""; + app.style.opacity = "1"; + } + e.preventDefault(); }); - + function dayOfTheWeek(day, month, year) { - const weekday = [ - 'Sunday', - 'Monday', - 'Tuesday', - 'Wednesday', - 'Thursday', - 'Friday', - 'Saturday' - ]; - return weekday[new Date(`${year}-${month}-${day}`).getDay()]; - }; - + const weekday = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + ]; + return weekday[new Date(`${year}-${month}-${day}`).getDay()]; + } + function getMonth(day, month, year) { - const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; - - const d = new Date(new Date(`${year}-${month}-${day}`)); - return monthNames[d.getMonth()]; + const monthNames = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ]; + + const d = new Date(new Date(`${year}-${month}-${day}`)); + return monthNames[d.getMonth()]; + } + + let apiKey = "7c742b695b3243f3864123423232302"; + + const stored = localStorage.getItem("lastVisited"); + if (stored) { + const Lcity = JSON.parse(stored)[0].city; + cityInput = Lcity; + fetchWeatherData(); } - -let apiKey = '7c742b695b3243f3864123423232302' - + function fetchWeatherData() { - fetch(`http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${cityInput}&aqi=yes`) - .then(response => response.json()) - .then(data => { - temp.innerHTML = `${data.current.temp_c}°C / ${data.current.temp_f}°F`; - - const date = data.location.localtime; - const y = parseInt(date.substr(0, 4)); - const m = parseInt(date.substr(5, 2)); - const d = parseInt(date.substr(8, 2)); - const time = date.substr(11); - - dateOutput.innerHTML = `${getMonth(d, m, y)} ${d}, ${y}` - timeOutput.innerHTML = time; - dayOutput.innerHTML = `${dayOfTheWeek(d, m, y)}` - theDate = `${y}-${m}-${d}` - - nameOutput.innerHTML = ` ${data.location.name}, ${data.location.country}`; - const iconID = data.current.condition.icon.substr('//cdn.weatherapi.com/weather/64x64/'.length); - icon.src = './img/icons/' + iconID; - - fetch(`http://api.weatherapi.com/v1/astronomy.json?key=${apiKey}&q=${cityInput}&dt=${theDate}`) - .then(response => response.json()) - .then(astrodata => { - sunriseOutput.innerHTML = `${astrodata.astronomy.astro.sunrise}` - sunsetOutput.innerHTML = `${astrodata.astronomy.astro.sunset}` - }); - - fetch(`http://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${cityInput}&days=1&aqi=yes&alerts=no`) - .then(response => response.json()) - .then(tomorrowdata => { - tomorrowOutput.innerHTML = `Tomorrow's Temperature: ${tomorrowdata.current.temp_c}°C / ${tomorrowdata.current.temp_f}°F` - }); - - cloudOutput.innerHTML = data.current.cloud + '%'; - humidityOutput.innerHTML = data.current.humidity + '%'; - windOutput.innerHTML = data.current.wind_kph + 'km/h'; - PrecipitationOutput.innerHTML = data.current.precip_mm + "mm" - - let timeOfDay = 'day'; - const code = data.current.condition.code; - - if (!data.current.is_day) { - timeOfDay = 'night'; - } - if (code == 1000) { - app.style.backgroundImage = `url(./img/background/${timeOfDay}/clear.jpg)` - } - else if ( - code == 1003 || - code == 1006 || - code == 1009 || - code == 1030 || - code == 1069 || - code == 1087 || - code == 1135 || - code == 1273 || - code == 1276 || - code == 1279 || - code == 1282 - ) { - app.style.backgroundImage = `url(./img/background/${timeOfDay}/cloudy.jpg)`; - } - else if ( - code == 1063 || - code == 1069 || - code == 1072 || - code == 1150 || - code == 1153 || - code == 1180 || - code == 1186 || - code == 1189 || - code == 1192 || - code == 1195 || - code == 1204 || - code == 1207 || - code == 1240 || - code == 1243 || - code == 1246 || - code == 1249 || - code == 1252 - ) { - app.style.backgroundImage = `url(../img/background/${timeOfDay}/rainy.jpg)`; - btn.style.background = '#647d75'; - - } else { - app.style.backgroundImage = `url(../img/background/${timeOfDay}/snowy.jpg)`; - } - app.style.opacity = '1'; - - }) - .catch(() => { - alert('City not found') - app.style.opacity = '1'; + fetch( + `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${cityInput}&aqi=yes` + ) + .then((response) => response.json()) + .then((data) => { + temp.innerHTML = `${data.current.temp_c}°C / ${data.current.temp_f}°F`; + + const date = data.location.localtime; + const y = parseInt(date.substr(0, 4)); + const m = parseInt(date.substr(5, 2)); + const d = parseInt(date.substr(8, 2)); + const time = date.substr(11); + + dateOutput.innerHTML = `${getMonth(d, m, y)} ${d}, ${y}`; + timeOutput.innerHTML = time; + dayOutput.innerHTML = `${dayOfTheWeek(d, m, y)}`; + theDate = `${y}-${m}-${d}`; + + nameOutput.innerHTML = ` ${data.location.name}, ${data.location.country}`; + const iconID = data.current.condition.icon.substr( + "//cdn.weatherapi.com/weather/64x64/".length + ); + icon.src = "./img/icons/" + iconID; + + fetch( + `http://api.weatherapi.com/v1/astronomy.json?key=${apiKey}&q=${cityInput}&dt=${theDate}` + ) + .then((response) => response.json()) + .then((astrodata) => { + sunriseOutput.innerHTML = `${astrodata.astronomy.astro.sunrise}`; + sunsetOutput.innerHTML = `${astrodata.astronomy.astro.sunset}`; }); + + fetch( + `http://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${cityInput}&days=1&aqi=yes&alerts=no` + ) + .then((response) => response.json()) + .then((tomorrowdata) => { + tomorrowOutput.innerHTML = `Tomorrow's Temperature: ${tomorrowdata.current.temp_c}°C / ${tomorrowdata.current.temp_f}°F`; + }); + + cloudOutput.innerHTML = data.current.cloud + "%"; + humidityOutput.innerHTML = data.current.humidity + "%"; + windOutput.innerHTML = data.current.wind_kph + "km/h"; + PrecipitationOutput.innerHTML = data.current.precip_mm + "mm"; + + let timeOfDay = "day"; + const code = data.current.condition.code; + + if (!data.current.is_day) { + timeOfDay = "night"; + } + if (code == 1000) { + app.style.backgroundImage = `url(./img/background/${timeOfDay}/clear.jpg)`; + } else if ( + code == 1003 || + code == 1006 || + code == 1009 || + code == 1030 || + code == 1069 || + code == 1087 || + code == 1135 || + code == 1273 || + code == 1276 || + code == 1279 || + code == 1282 + ) { + app.style.backgroundImage = `url(./img/background/${timeOfDay}/cloudy.jpg)`; + } else if ( + code == 1063 || + code == 1069 || + code == 1072 || + code == 1150 || + code == 1153 || + code == 1180 || + code == 1186 || + code == 1189 || + code == 1192 || + code == 1195 || + code == 1204 || + code == 1207 || + code == 1240 || + code == 1243 || + code == 1246 || + code == 1249 || + code == 1252 + ) { + app.style.backgroundImage = `url(../img/background/${timeOfDay}/rainy.jpg)`; + btn.style.background = "#647d75"; + } else { + app.style.backgroundImage = `url(../img/background/${timeOfDay}/snowy.jpg)`; } - - - fetchWeatherData() - - app.style.opacity = '1'; - -}); + app.style.opacity = "1"; + }) + .catch(() => { + alert("City not found"); + app.style.opacity = "1"; + }); + } + + fetchWeatherData(); + + app.style.opacity = "1"; + // Initial display of last visited cities + displayLastVisited(); + }); + \ No newline at end of file