Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

User Customization #41 #69

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

User Customization #41 #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d32145
Update index.html
rohinee18tech Oct 14, 2024
2d9279e
Update script.js
rohinee18tech Oct 14, 2024
5dbda17
Update style.css
rohinee18tech Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,24 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>

<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="w-card">

<!-- Theme toggle buttons -->
<div class="theme-toggle">
<button id="light-theme">Light Theme</button>
<button id="dark-theme">Dark Theme</button>
</div>

<div class="searchbox">
<input type="text" placeholder="Enter city name" spellcheck="false">
<button>Search</button>
</div>
<div class="error">
<p>Invalid City name </p>
<p>Invalid City name</p>
</div>

<div class="weather">
Expand All @@ -41,11 +45,16 @@ <h2 class="city" id="city-name">New Delhi</h2>
</div>
</div>
</div>

</div>
</div>

<script src="script.js"></script>
<!-- Favorites section -->
<div class="favorites">
<h3>Favorite Locations</h3>
<ul id="favorites-list"></ul>
</div>

</div>

<script src="script.js"></script>
</body>
</html>
</html>
112 changes: 60 additions & 52 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
});
});

// 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");
});
111 changes: 34 additions & 77 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
.searchbox input.dark,
button.dark {
background: #333;
}