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)