From 2d32145f95e32144b19b0ca02f959c8afd9a2dbe Mon Sep 17 00:00:00 2001 From: rohinee18tech Date: Mon, 14 Oct 2024 16:20:50 +0530 Subject: [PATCH 1/3] Update index.html --- index.html | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index ffddd8d..2b3ff68 100644 --- a/index.html +++ b/index.html @@ -4,20 +4,24 @@ Weather App - -
+ +
+ + +
+
-

Invalid City name

+

Invalid City name

@@ -41,11 +45,16 @@

New Delhi

- - - + +
+

Favorite Locations

+ +
+ + + - \ No newline at end of file + From 2d9279e5607ff1bb7e142f01eb2c1639310295b2 Mon Sep 17 00:00:00 2001 From: rohinee18tech Date: Mon, 14 Oct 2024 16:21:37 +0530 Subject: [PATCH 2/3] Update script.js --- script.js | 112 +++++++++++++++++++++++++++++------------------------- 1 file changed, 60 insertions(+), 52 deletions(-) diff --git a/script.js b/script.js index 3aefd91..37d604b 100644 --- a/script.js +++ b/script.js @@ -1,73 +1,81 @@ -// Assigning all the variables and the api Key and Url - +// Assigning all the variables and the API Key and URL const apiKey = "19f175c397782f927e89a4261b9f3ac5"; const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q="; const searchBox = document.querySelector(".searchbox input"); -const searchBtn = document.querySelector(".searchbox button") +const searchBtn = document.querySelector(".searchbox button"); const weatherIcon = document.querySelector(".weather-icon"); +const favoritesList = document.getElementById("favorites-list"); +const lightThemeBtn = document.getElementById("light-theme"); +const darkThemeBtn = document.getElementById("dark-theme"); -// Function for the main task (getting the data from API and displaying it) - -async function checkWeather(city){ - - +// Function to check weather and update the UI +async function checkWeather(city) { const response = await fetch(apiUrl + city + `&appid=${apiKey}`); - if(response.status == 404){ + if (response.status == 404) { document.querySelector(".error").style.display = "block"; document.querySelector(".weather").style.display = "none"; searchBox.value = ""; - } - else{ + } else { document.querySelector(".error").style.display = "none"; + var data = await response.json(); + + document.querySelector(".city").innerHTML = data.name; + document.querySelector(".temperature").innerHTML = Math.round(data.main.temp) + "°c"; + document.querySelector(".humidity").innerHTML = data.main.humidity + "%"; + document.querySelector(".wind").innerHTML = data.wind.speed + " kmph"; + + // Conditions to display the correct weather icon + if (data.weather[0].main == "Clouds") { + weatherIcon.src = "images/clouds.png"; + } else if (data.weather[0].main == "Clear") { + weatherIcon.src = "images/sun.png"; + } else if (data.weather[0].main == "Rain") { + weatherIcon.src = "images/rain.png"; + } else if (data.weather[0].main == "Haze") { + weatherIcon.src = "images/haze.png"; + } else if (data.weather[0].main == "Drizzle") { + weatherIcon.src = "images/drizzle.png"; + } else if (data.weather[0].main == "Mist") { + weatherIcon.src = "images/mist.png"; + } + + document.querySelector(".weather").style.display = "block"; + searchBox.value = ""; // Clear search input + + // Add the city to favorites + addToFavorites(data.name); } - var data = await response.json(); - - document.querySelector(".city").innerHTML = data.name; - - document.querySelector(".temperature").innerHTML = Math.round(data.main.temp) + "°c"; - - document.querySelector(".humidity").innerHTML = data.main.humidity + "%"; - - document.querySelector(".wind").innerHTML = data.wind.speed + " kmph"; - - // Conditions for to check and display relevant image according to the weather conditions +} - if(data.weather[0].main == "Clouds"){ - weatherIcon.src = "images/clouds.png"; +// Function to add cities to favorites +function addToFavorites(city) { + const existingFavorites = Array.from(favoritesList.children).map(item => item.textContent); + if (!existingFavorites.includes(city)) { + const li = document.createElement("li"); + li.textContent = city; + favoritesList.appendChild(li); } - else if(data.weather[0].main == "Clear"){ - weatherIcon.src = "images/sun.png"; - } - else if(data.weather[0].main == "Rain"){ - weatherIcon.src = "images/rain.png"; - } - else if(data.weather[0].main == "Haze"){ - weatherIcon.src = "images/haze.png"; - } - else if(data.weather[0].main == "Drizzle"){ - weatherIcon.src = "images/drizzle.png"; - } - else if(data.weather[0].main == "Mist"){ - weatherIcon.src = "images/mist.png"; - } - - document.querySelector(".weather").style.display = "block"; - - // Making the searchBox's value empty once searched - searchBox.value = ""; - } -// Event listener for the button - -searchBtn.addEventListener("click", ()=>{ +// Event listener for search button click +searchBtn.addEventListener("click", () => { checkWeather(searchBox.value); -}) - -// Enter button(keyCode = 13) event listener +}); +// Event listener for Enter key press searchBox.addEventListener('keyup', function(event) { if (event.keyCode === 13) { checkWeather(searchBox.value); } -}); \ No newline at end of file +}); + +// Theme switching functionality +lightThemeBtn.addEventListener("click", () => { + document.body.classList.remove("dark"); + document.querySelector(".w-card").classList.remove("dark"); +}); + +darkThemeBtn.addEventListener("click", () => { + document.body.classList.add("dark"); + document.querySelector(".w-card").classList.add("dark"); +}); From 5dbda17b74d0df47be7d9672e95646b62b6c7a55 Mon Sep 17 00:00:00 2001 From: rohinee18tech Date: Mon, 14 Oct 2024 16:22:04 +0530 Subject: [PATCH 3/3] Update style.css --- style.css | 111 +++++++++++++++++------------------------------------- 1 file changed, 34 insertions(+), 77 deletions(-) diff --git a/style.css b/style.css index 6a87fe0..50ddc68 100644 --- a/style.css +++ b/style.css @@ -1,99 +1,56 @@ -*{ - padding: 0; - margin: 0; - font-family: 'Josefin Sans', sans-serif; - font-family: 'Roboto', sans-serif; -} +/* Existing styles */ -body{ - background-color: rgb(23, 23, 23); -} - -.w-card{ - width: 90%; - max-width: 455px; - background: linear-gradient(135deg, rgb(18, 28, 43), rgb(1, 46, 69)); - color: white; - margin: 70px auto; - border-radius: 22px; - padding: 44px 38px; - text-align: center; +.theme-toggle { + margin-bottom: 20px; } -.searchbox{ - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - -} -.searchbox input{ - outline: none; - border: none; +.theme-toggle button { background: lightcyan; - padding: 10px 28px; - flex: 1; - font-size: 16px; - border-radius: 28px; -} - -button{ border: none; - outline: none; - background: lightcyan; - border-radius: 28px; - padding: 10px 28px; - margin-left: 18px; + padding: 10px 20px; + margin-right: 10px; cursor: pointer; - transition: 0.3s; + border-radius: 5px; } -button:hover{ + +.theme-toggle button:hover { background-color: rgb(166, 254, 254); } -.weather-icon{ - width: 200px; +/* Styles for favorites list */ +.favorites { margin-top: 20px; -} -#temp{ - font-size: 70px; - font-weight: 500; -} -#city-name{ - font-size: 56px; - font-weight: 400; + text-align: left; } -.additional-details{ - display: flex; - align-items: center; - justify-content: space-between; - padding: 4px 28px; - margin-top: 45px; +.favorites h3 { + margin-bottom: 10px; } -.column{ - display: flex; - align-items: center; - text-align: left; +#favorites-list { + list-style: none; + padding: 0; } -.column img{ - width: 50px; - margin-right: 12px + +#favorites-list li { + background: lightcyan; + margin: 5px 0; + padding: 8px; + border-radius: 5px; } -.humidity, .wind{ - font-size: 22px; - font-weight: 500; +/* Dark Theme */ +body.dark { + background-color: rgb(23, 23, 23); + color: white; } -.weather{ - display: none; +.w-card.dark { + background: linear-gradient(135deg, rgb(18, 28, 43), rgb(1, 46, 69)); + color: white; } -.error{ - font-size: 16px; - text-align: left; - margin: 8px 0px; - display: none; -} \ No newline at end of file +.searchbox input.dark, +button.dark { + background: #333; +}