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

Commitd51b3e3

Browse files
update weather app
1 parent6064fbc commitd51b3e3

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+
<htmllang="en">
33
<head>
44
<metacharset="UTF-8"/>
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
57
<title>Weather App</title>
68
<linkrel="stylesheet"href="style.css"/>
79
</head>
810
<body>
911
<divclass="container">
1012
<h1>Weather App</h1>
1113
<form>
12-
<inputtype="text"id="city-input"placeholder="Entercity"/>
14+
<inputtype="text"id="city-input"placeholder="EnterCity"/>
1315
<inputtype="submit"value="Get Weather"/>
1416
</form>
1517
<divid="weather-data">
16-
<divclass="icon"></div>
18+
<divclass="icon">
19+
<!-- <img src="http://openweathermap.org/img/wn/01d.png" alt="Weather Icon"> -->
20+
</div>
1721
<divclass="temperature"></div>
1822
<divclass="description"></div>
19-
<divclass="details"></div>
23+
<divclass="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-
<scriptsrc="script.js"></script>
30+
<scriptsrc="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+
constapikey="46f80a02ecae410460d59960ded6e1c6";
2+
3+
constweatherDataEl=document.getElementById("weather-data");
4+
5+
constcityInputEl=document.getElementById("city-input");
6+
7+
constformEl=document.querySelector("form");
8+
9+
formEl.addEventListener("submit",(event)=>{
10+
event.preventDefault();
11+
constcityValue=cityInputEl.value;
12+
getWeatherData(cityValue);
13+
});
14+
15+
asyncfunctiongetWeatherData(cityValue){
16+
try{
17+
constresponse=awaitfetch(
18+
`https://api.openweathermap.org/data/2.5/weather?q=${cityValue}&appid=${apikey}&units=metric`
19+
);
20+
21+
if(!response.ok){
22+
thrownewError("Network response was not ok");
23+
}
24+
25+
constdata=awaitresponse.json();
26+
27+
consttemperature=Math.round(data.main.temp);
28+
29+
constdescription=data.weather[0].description;
30+
31+
consticon=data.weather[0].icon;
32+
33+
constdetails=[
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:0auto;/* 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 */
8+
background-color:#fff;
9+
box-shadow:0020pxrgba(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
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 */
26+
padding:10px;
27+
border: none;
28+
outline: none;
29+
font-size:18px;
30+
width:60%;
3231
}
3332

3433
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 */
34+
background-color:#007bff;
35+
color:#fff;
36+
border: none;
37+
padding:10px20px;
38+
border-radius:5px;
39+
font-size:18px;
40+
cursor: pointer;
41+
outline: none;
42+
transition: background-color0.3s ease;
4443
}
4544

4645
forminput[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+
.iconimg {
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:20px0;/* add margin to the top and bottom of the temperature display */
58+
font-size:48px;
59+
font-weight: bold;
60+
margin:20px0;
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;/* setdisplay property toflex */
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-
forminput[type="text"]{
114-
width:100%;/* Set thewidth of the input field to100% */
115-
margin-bottom:10px;/* Add margin to thebottom of the input field */
116-
}
90+
forminput[type="text"]{
91+
width:100%;
92+
margin-bottom:10px;
93+
}
11794
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp