Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6064fbc

Browse files
add weather app
1 parent65b1889 commit6064fbc

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+
<metacharset="UTF-8"/>
5+
<title>Weather App</title>
6+
<linkrel="stylesheet"href="style.css"/>
7+
</head>
8+
<body>
9+
<divclass="container">
10+
<h1>Weather App</h1>
11+
<form>
12+
<inputtype="text"id="city-input"placeholder="Enter city"/>
13+
<inputtype="submit"value="Get Weather"/>
14+
</form>
15+
<divid="weather-data">
16+
<divclass="icon"></div>
17+
<divclass="temperature"></div>
18+
<divclass="description"></div>
19+
<divclass="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+
<scriptsrc="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+
constapiKey="ec24604fb141c0188e07713025f2b7b8";
3+
4+
// Get the element that will display the weather data on the page
5+
constweatherData=document.getElementById("weather-data");
6+
7+
// Get the input element for the city from the HTML form
8+
constcityInput=document.getElementById("city-input");
9+
10+
// Get the HTML form element
11+
constform=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+
constcity=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+
asyncfunctiongetWeatherData(city){
22+
try{
23+
// Make a request to the OpenWeatherMap API to get weather data for the specified city
24+
constresponse=awaitfetch(`
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+
thrownewError("Network response was not ok");
30+
}
31+
32+
// Parse the response from the API as JSON
33+
constdata=awaitresponse.json();
34+
35+
// Check if the API returned an error message
36+
if(data.cod==="404"){
37+
thrownewError(data.message);
38+
}
39+
40+
// Extract the temperature, description, icon, and other weather details from the API response
41+
consttemperature=Math.round(data.main.temp);
42+
constdescription=data.weather[0].description;
43+
consticon=data.weather[0].icon;
44+
constdetails=[
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:0020pxrgba(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+
forminput[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+
forminput[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:10px20px;/* 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-color0.3s ease;/* add transition effect for background color change */
44+
}
45+
46+
forminput[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:20px0;/* 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+
forminput[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)
[8]ページ先頭
©2009-2025 Movatter.jp