Skip to content

Commit 6064fbc

Browse files
sahandghavidelsahandghavidel
committedMar 2, 2023
add weather app
1 parent 65b1889 commit 6064fbc

File tree

4 files changed

+227
-0
lines changed

4 files changed

+227
-0
lines changed
 

‎projects/dad-jokes-generator/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,4 @@ async function getJoke() {
3333
}
3434

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

‎projects/weather-app/index.html

Lines changed: 38 additions & 0 deletions
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>

‎projects/weather-app/script.js

Lines changed: 71 additions & 0 deletions
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.

‎projects/weather-app/style.css

Lines changed: 117 additions & 0 deletions
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)