Skip to content

Commit d51b3e3

Browse files
sahandghavidelsahandghavidel
committed
update weather app
1 parent 6064fbc commit d51b3e3

File tree

4 files changed

+134
-176
lines changed

4 files changed

+134
-176
lines changed

‎projects/weather-app/index.html

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,32 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
57
<title>Weather App</title>
68
<link rel="stylesheet" href="style.css" />
79
</head>
810
<body>
911
<div class="container">
1012
<h1>Weather App</h1>
1113
<form>
12-
<input type="text" id="city-input" placeholder="Enter city" />
14+
<input type="text" id="city-input" placeholder="Enter City" />
1315
<input type="submit" value="Get Weather" />
1416
</form>
1517
<div id="weather-data">
16-
<div class="icon"></div>
18+
<div class="icon">
19+
<!-- <img src="http://openweathermap.org/img/wn/01d.png" alt="Weather Icon"> -->
20+
</div>
1721
<div class="temperature"></div>
1822
<div class="description"></div>
19-
<div class="details"></div>
23+
<div class="details">
24+
<!-- <div>Feels like: 23°C</div>
25+
<div>Humidity: 40%</div>
26+
<div>Wind speed: 5 m/s</div> -->
27+
</div>
2028
</div>
21-
22-
<!-- <div id="weather-data">
23-
<div class="icon">
24-
<img src="http://openweathermap.org/img/wn/01d.png" alt="Weather Icon">
25-
</div>
26-
<div class="temperature">22°C</div>
27-
<div class="description">Sunny</div>
28-
<div class="details">
29-
<div>Feels like: 23°C</div>
30-
<div>Humidity: 40%</div>
31-
<div>Wind speed: 5 m/s</div>
32-
</div>
33-
</div>
34-
-->
3529
</div>
36-
<script src="script.js"></script>
30+
<script src="index.js"></script>
3731
</body>
3832
</html>

‎projects/weather-app/index.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
const apikey = "46f80a02ecae410460d59960ded6e1c6";
2+
3+
const weatherDataEl = document.getElementById("weather-data");
4+
5+
const cityInputEl = document.getElementById("city-input");
6+
7+
const formEl = document.querySelector("form");
8+
9+
formEl.addEventListener("submit", (event) => {
10+
event.preventDefault();
11+
const cityValue = cityInputEl.value;
12+
getWeatherData(cityValue);
13+
});
14+
15+
async function getWeatherData(cityValue) {
16+
try {
17+
const response = await fetch(
18+
`https://api.openweathermap.org/data/2.5/weather?q=${cityValue}&appid=${apikey}&units=metric`
19+
);
20+
21+
if (!response.ok) {
22+
throw new Error("Network response was not ok");
23+
}
24+
25+
const data = await response.json();
26+
27+
const temperature = Math.round(data.main.temp);
28+
29+
const description = data.weather[0].description;
30+
31+
const icon = data.weather[0].icon;
32+
33+
const details = [
34+
`Feels like: ${Math.round(data.main.feels_like)}`,
35+
`Humidity: ${data.main.humidity}%`,
36+
`Wind speed: ${data.wind.speed} m/s`,
37+
];
38+
39+
weatherDataEl.querySelector(
40+
".icon"
41+
).innerHTML = `<img src="http://openweathermap.org/img/wn/${icon}.png" alt="Weather Icon">`;
42+
weatherDataEl.querySelector(
43+
".temperature"
44+
).textContent = `${temperature}°C`;
45+
weatherDataEl.querySelector(".description").textContent = description;
46+
47+
weatherDataEl.querySelector(".details").innerHTML = details
48+
.map((detail) => `<div>${detail}</div>`)
49+
.join("");
50+
} catch (error) {
51+
weatherDataEl.querySelector(".icon").innerHTML = "";
52+
weatherDataEl.querySelector(".temperature").textContent = "";
53+
weatherDataEl.querySelector(".description").textContent =
54+
"An error happened, please try again later";
55+
56+
weatherDataEl.querySelector(".details").innerHTML = "";
57+
}
58+
}

‎projects/weather-app/script.js

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎projects/weather-app/style.css

Lines changed: 63 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,94 @@
11
body {
2-
margin: 0; /* Reset default margin */
3-
font-family: "Montserrat", sans-serif; /* Use Montserrat font for all text */
4-
background-color: #f7f7f7; /* Set light gray background color */
2+
margin: 0;
3+
font-family: "Montserrat", sans-serif;
4+
background-color: #f7f7f7;
55
}
66

77
.container {
8-
max-width: 600px; /* Set maximum width of container */
9-
margin: 0 auto; /* Center container horizontally */
10-
padding: 20px; /* Add padding inside container */
11-
border-radius: 5px; /* Add rounded corners to container */
12-
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Add shadow effect to container */
13-
background-color: #fff; /* Set white background color for container */
14-
margin-top: 50px; /* Add margin to the top of the container */
15-
text-align: center; /* Center align the content inside container */
8+
background-color: #fff;
9+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
10+
margin: 0 auto;
11+
margin-top: 50px;
12+
text-align: center;
13+
max-width: 600px;
14+
border-radius: 5px;
15+
padding: 20px;
1616
}
1717

1818
form {
19-
display: flex; /* Use flexbox for layout */
20-
justify-content: center; /* Center children horizontally */
21-
align-items: center; /* Center children vertically */
22-
margin-bottom: 20px; /* Add margin to bottom */
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
margin-bottom: 20px;
2323
}
2424

2525
form input[type="text"] {
26-
padding: 10px; /* Add padding to all sides */
27-
border: none; /* Remove border */
28-
border-radius: 5px; /* Add rounded corners */
29-
font-size: 18px; /* Set font size */
30-
width: 60%; /* Set width */
31-
outline: none; /* Remove outline */
26+
padding: 10px;
27+
border: none;
28+
outline: none;
29+
font-size: 18px;
30+
width: 60%;
3231
}
3332

3433
form input[type="submit"] {
35-
background-color: #007bff; /* set background color for the submit button */
36-
color: #fff; /* set text color for the submit button */
37-
border: none; /* remove border from the submit button */
38-
padding: 10px 20px; /* set padding for the submit button */
39-
border-radius: 5px; /* set border radius for the submit button */
40-
font-size: 18px; /* set font size for the submit button text */
41-
cursor: pointer; /* change cursor to pointer on hover */
42-
outline: none; /* remove outline on focus */
43-
transition: background-color 0.3s ease; /* add transition effect for background color change */
34+
background-color: #007bff;
35+
color: #fff;
36+
border: none;
37+
padding: 10px 20px;
38+
border-radius: 5px;
39+
font-size: 18px;
40+
cursor: pointer;
41+
outline: none;
42+
transition: background-color 0.3s ease;
4443
}
4544

4645
form input[type="submit"]:hover {
47-
background-color: #0062cc; /* set background color on hover */
46+
background-color: #0062cc;
4847
}
4948

50-
.icon {
51-
width: 100px; /* set width of the icon */
52-
height: 100px; /* set height of the icon */
53-
margin: 0 auto; /* center the icon horizontally */
54-
background-size: contain; /* scale the background image to fit within the container */
55-
background-repeat: no-repeat; /* prevent the background image from repeating */
56-
background-position: center center; /* center the background image within the container */
49+
.icon img {
50+
width: 100px;
51+
height: 100px;
52+
background-size: contain;
53+
background-repeat: no-repeat;
54+
background-position: center center;
5755
}
5856

5957
.temperature {
60-
font-size: 48px; /* set font size for the temperature display */
61-
font-weight: bold; /* set font weight for the temperature display */
62-
margin: 20px 0; /* add margin to the top and bottom of the temperature display */
58+
font-size: 48px;
59+
font-weight: bold;
60+
margin: 20px 0;
6361
}
6462

65-
.description {
66-
font-size: 24px; /* set font size for the weather description */
67-
margin-bottom: 20px; /* add margin to the bottom of the weather description */
63+
.description{
64+
font-size: 24px;
65+
margin-bottom: 20px;
6866
}
6967

70-
.details {
71-
display: flex; /* set display property to flex */
72-
justify-content: center; /* center the child elements horizontally */
73-
align-items: center; /* center the child elements vertically */
74-
flex-wrap: wrap; /* allow the child elements to wrap onto a new line if needed */
68+
.details{
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
flex-wrap: wrap;
7573
}
7674

77-
.details > div {
78-
flex: 1; /* Use the remaining available space for each div */
79-
margin: 10px; /* Add margin around each div */
80-
padding: 20px; /* Add padding inside each div */
81-
background-color: #f1f1f1; /* Set background color for each div */
82-
border-radius: 5px; /* Round the corners of each div */
83-
text-align: center; /* Center the content horizontally */
84-
min-height: 45px; /* Set a minimum height for each div */
85-
align-items: center; /* Center the content vertically */
86-
justify-content: center; /* Center the content horizontally */
75+
.details > div{
76+
padding: 20px;
77+
background-color: #f1f1f1;
78+
margin: 10px;
79+
flex: 1;
80+
border-radius: 5px;
81+
text-align: center;
82+
min-height: 45px;
8783
}
8884

89-
.details > div > h3 {
90-
margin-top: 0; /* Remove the top margin of the heading */
91-
font-size: 18px; /* Set the font size for the heading */
92-
font-weight: bold; /* Set the font weight for the heading */
93-
}
94-
95-
.details > div > p {
96-
margin-bottom: 0; /* Remove the bottom margin of the paragraph */
97-
font-size: 16px; /* Set the font size for the paragraph */
98-
}
99-
100-
.details > div > p:first-child {
101-
font-weight: bold; /* Set the font weight for the first paragraph */
102-
}
103-
104-
.details > div > p:last-child {
105-
margin-top: 10px; /* Add margin to the top of the last paragraph */
106-
}
107-
108-
@media (max-width: 768px) {
109-
form {
110-
flex-direction: column; /* Change the direction of the flex items to column */
111-
}
85+
@media (max-width: 768px){
86+
form {
87+
flex-direction: column;
88+
}
11289

113-
form input[type="text"] {
114-
width: 100%; /* Set the width of the input field to 100% */
115-
margin-bottom: 10px; /* Add margin to the bottom of the input field */
116-
}
90+
form input[type="text"]{
91+
width: 100%;
92+
margin-bottom: 10px;
93+
}
11794
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy