Skip to content

Commit 6064fbc

Browse files
sahandghavidelsahandghavidel
committed
add weather app
1 parent 65b1889 commit 6064fbc

File tree

4 files changed

+227
-0
lines changed

4 files changed

+227
-0
lines changed

Diff for: ‎projects/dad-jokes-generator/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,4 @@ async function getJoke() {
3333
}
3434

3535
btnEl.addEventListener("click", getJoke);
36+

Diff for: ‎projects/weather-app/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Weather App</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<div class="container">
10+
<h1>Weather App</h1>
11+
<form>
12+
<input type="text" id="city-input" placeholder="Enter city" />
13+
<input type="submit" value="Get Weather" />
14+
</form>
15+
<div id="weather-data">
16+
<div class="icon"></div>
17+
<div class="temperature"></div>
18+
<div class="description"></div>
19+
<div class="details"></div>
20+
</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+
-->
35+
</div>
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

Diff for: ‎projects/weather-app/script.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// Set the API key to be used for making requests to the OpenWeatherMap API
2+
const apiKey = "ec24604fb141c0188e07713025f2b7b8";
3+
4+
// Get the element that will display the weather data on the page
5+
const weatherData = document.getElementById("weather-data");
6+
7+
// Get the input element for the city from the HTML form
8+
const cityInput = document.getElementById("city-input");
9+
10+
// Get the HTML form element
11+
const form = document.querySelector("form");
12+
13+
// Add a submit event listener to the form, which will get the value from the city input field and use it to get weather data
14+
form.addEventListener("submit", (event) => {
15+
event.preventDefault(); // Prevent the default form submission behavior
16+
const city = cityInput.value; // Get the value from the city input field
17+
getWeatherData(city); // Call the function to get weather data for the specified city
18+
});
19+
20+
// Define an async function to get weather data for a given city
21+
async function getWeatherData(city) {
22+
try {
23+
// Make a request to the OpenWeatherMap API to get weather data for the specified city
24+
const response = await fetch(`
25+
https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
26+
27+
// Check if the response from the API is not ok (e.g. 404 error)
28+
if (!response.ok) {
29+
throw new Error("Network response was not ok");
30+
}
31+
32+
// Parse the response from the API as JSON
33+
const data = await response.json();
34+
35+
// Check if the API returned an error message
36+
if (data.cod === "404") {
37+
throw new Error(data.message);
38+
}
39+
40+
// Extract the temperature, description, icon, and other weather details from the API response
41+
const temperature = Math.round(data.main.temp);
42+
const description = data.weather[0].description;
43+
const icon = data.weather[0].icon;
44+
const details = [
45+
`Feels like: ${Math.round(data.main.feels_like)}°C`,
46+
`Humidity: ${data.main.humidity}%`,
47+
`Wind speed: ${data.wind.speed} m/s`,
48+
];
49+
50+
// Set the HTML content of the weather data display elements to the retrieved weather data
51+
weatherData.querySelector(
52+
".icon"
53+
).innerHTML = `<img src="http://openweathermap.org/img/wn/${icon}.png" alt="Weather Icon">`;
54+
weatherData.querySelector(".temperature").textContent = `${temperature}°C`;
55+
weatherData.querySelector(".description").textContent = description;
56+
weatherData.querySelector(".details").innerHTML = details
57+
.map((detail) => `<div>${detail}</div>`)
58+
.join("");
59+
} catch (error) {
60+
console.log(error);
61+
62+
// If there was an error fetching weather data, clear the HTML content of the weather data display elements and display an error message
63+
weatherData.querySelector(".icon").innerHTML = "";
64+
weatherData.querySelector(".temperature").textContent = "";
65+
weatherData.querySelector(".description").textContent =
66+
"Error fetching weather data. Please try again.";
67+
weatherData.querySelector(".details").innerHTML = "";
68+
}
69+
}
70+
71+
// The above code uses the Fetch API to retrieve weather data from the OpenWeatherMap API, and the async/await syntax to handle the asynchronous nature of the API call. The code also dynamically updates the HTML content of the weather data display elements with the retrieved weather data.

Diff for: ‎projects/weather-app/style.css

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
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 */
5+
}
6+
7+
.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 */
16+
}
17+
18+
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 */
23+
}
24+
25+
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 */
32+
}
33+
34+
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 */
44+
}
45+
46+
form input[type="submit"]:hover {
47+
background-color: #0062cc; /* set background color on hover */
48+
}
49+
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 */
57+
}
58+
59+
.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 */
63+
}
64+
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 */
68+
}
69+
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 */
75+
}
76+
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 */
87+
}
88+
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+
}
112+
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+
}
117+
}

0 commit comments

Comments
 (0)