Skip to content

Commit af32991

Browse files
ArshadShaik07sumn2u
ArshadShaik07
authored and
sumn2u
committed
Add weather app to fetch and display weather by city name
1 parent 1efc1dc commit af32991

File tree

3 files changed

+245
-0
lines changed

3 files changed

+245
-0
lines changed

‎examples/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="./styles.css"/>
8+
</head>
9+
<body>
10+
<h1>Weather App</h1>
11+
<div class="parent-container" ><!-- main div -->
12+
<div class="inputs-container">
13+
<input placeholder="enter city name" class="city-name-input"/>
14+
<button class="srch-btn">Search weather</button>
15+
</div>
16+
<div class="outputs-container">
17+
<div class="city-name-output">city</div>
18+
<div class="temp-container">Temp<p class="temperature"></p></div>
19+
<div class="text-container-parent">
20+
<div >Feels like<p class="feels-like"></p></div>
21+
<div >Humidity<p class="humidity"></p></div>
22+
<div>Windspeed<p class="windspeed"></p></div>
23+
</div>
24+
</div>
25+
</div>
26+
<script src="./script.js"></script>
27+
</body>
28+
</html>

‎examples/script.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
const city = document.querySelector(".city-name-input");
2+
const temp = document.querySelector(".temperature");
3+
const feels_like = document.querySelector(".feels-like");
4+
const humidity = document.querySelector(".humidity");
5+
const windspeed = document.querySelector(".windspeed");
6+
const btn = document.querySelector(".srch-btn");
7+
const cityOp = document.querySelector(".city-name-output");
8+
9+
const apiKey = "6244ab888f079565d5ce1deabddc3f77";
10+
async function getWeatherInfo(city) {
11+
try {
12+
console.log(city);
13+
if (city.length === 0) {
14+
throw Error("Enter city name correctly");
15+
}
16+
17+
let res = await fetch(
18+
`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`
19+
);
20+
console.log(res);
21+
if (!res.ok) {
22+
throw Error("Error occured.Could not find the city ");
23+
}
24+
res = await res.json();
25+
console.log(res);
26+
//wind speed , feels like, temp,humidity
27+
const { feels_like, temp, humidity } = res.main;
28+
const { speed } = res.wind;
29+
const name = res.name;
30+
assignWeatherDetails(speed, temp, humidity, feels_like, name);
31+
} catch (e) {
32+
document.querySelector(".city-name-input").value = "";
33+
console.log(e);
34+
alert(e.message);
35+
}
36+
}
37+
38+
btn.addEventListener("click", () => getWeatherInfo(city.value.trim()));
39+
city.addEventListener("keydown", (event) => {
40+
if (event.key === "Enter") {
41+
getWeatherInfo(city.value.trim());
42+
}
43+
});
44+
45+
function assignWeatherDetails(s, t, h, fl, n) {
46+
windspeed.innerHTML = s;
47+
temp.innerHTML = t + "<sup>o</sup>C";
48+
humidity.innerHTML = h;
49+
feels_like.innerHTML = fl + "<sup>o</sup>C";
50+
cityOp.innerHTML = n;
51+
city.value = "";
52+
}
53+
54+
window.addEventListener("load", () => {
55+
getWeatherInfo("kurnool");
56+
});

‎examples/styles.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
/* ---------- Base styles ---------- */
2+
body {
3+
background-color: #f2f4f7;
4+
color: #1e1e1e;
5+
font-family: "Poppins", sans-serif;
6+
display: flex;
7+
flex-direction: column;
8+
min-height: 100vh;
9+
justify-content: center;
10+
align-items: center;
11+
margin: 0;
12+
}
13+
14+
h1 {
15+
text-align: center;
16+
margin-bottom: 1.5rem;
17+
color: #2d6cdf;
18+
font-weight: 600;
19+
letter-spacing: 0.5px;
20+
}
21+
22+
/* ---------- Containers ---------- */
23+
.parent-container {
24+
background-color: #ffffff;
25+
border: 2px solid #e2e8f0;
26+
display: flex;
27+
flex-direction: column;
28+
border-radius: 12px;
29+
padding: 1.5rem;
30+
width: 360px;
31+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
32+
margin: 3rem;
33+
transform: scale(1.2);
34+
}
35+
36+
.inputs-container {
37+
display: flex;
38+
flex-direction: row;
39+
gap: 0.5rem;
40+
margin-bottom: 1.2rem;
41+
}
42+
43+
/* ---------- Input + Button ---------- */
44+
.city-name-input {
45+
flex: 1;
46+
padding: 0.6rem;
47+
border: 2px solid #cbd5e1;
48+
border-radius: 8px;
49+
background-color: #f9fafb;
50+
color: #1e293b;
51+
outline: none;
52+
font-size: 0.95rem;
53+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
54+
}
55+
56+
.city-name-input:focus {
57+
border-color: #b1b1b1;
58+
box-shadow: 0 2px 5px 3px #9097a133;
59+
}
60+
61+
.srch-btn {
62+
background-color: #3b82f6;
63+
color: white;
64+
border: none;
65+
padding: 0.6rem 0.9rem;
66+
border-radius: 8px;
67+
cursor: pointer;
68+
font-weight: 600; /* <-- Bold text */
69+
font-size: 0.9rem;
70+
transition: background-color 0.2s ease, transform 0.1s ease;
71+
}
72+
73+
.srch-btn:hover {
74+
background-color: #2563eb;
75+
}
76+
77+
.srch-btn:active {
78+
transform: scale(0.97);
79+
}
80+
81+
/* ---------- Outputs ---------- */
82+
.outputs-container {
83+
border: 2px solid #e2e8f0;
84+
display: flex;
85+
flex-direction: column;
86+
justify-content: center;
87+
align-items: center;
88+
padding: 1rem;
89+
border-radius: 10px;
90+
background-color: #f9fafb;
91+
}
92+
93+
.city-name-output {
94+
text-align: center;
95+
font-size: 1.3rem;
96+
margin-bottom: 0.5rem;
97+
color: #2563eb;
98+
}
99+
100+
.temp-container {
101+
text-align: center;
102+
margin-bottom: 1rem;
103+
}
104+
105+
.temperature {
106+
font-size: 2rem;
107+
font-weight: 600;
108+
color: #1e1e1e;
109+
}
110+
111+
/* ---------- Text data boxes ---------- */
112+
.text-container-parent {
113+
display: flex;
114+
flex-direction: row;
115+
justify-content: space-around;
116+
width: 100%;
117+
gap: 0.6rem;
118+
}
119+
120+
.text-container-parent div {
121+
flex: 1;
122+
border: 2px solid #e2e8f0;
123+
background-color: #ffffff;
124+
border-radius: 10px;
125+
padding: 0.8rem;
126+
display: flex;
127+
flex-direction: column;
128+
align-items: center;
129+
gap: 0.3rem;
130+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
131+
}
132+
133+
134+
135+
.text-container-parent div p {
136+
margin: 0;
137+
font-weight: 600;
138+
color: #0f172a;
139+
font-size: 1rem;
140+
}
141+
142+
.text-container-parent div span {
143+
color: #475569;
144+
font-size: 0.9rem;
145+
}
146+
147+
/* Medium screens (tablets) */
148+
@media (max-width: 768px) {
149+
.parent-container {
150+
transform: scale(1); /* normal size */
151+
margin-top: 1.5rem;
152+
}
153+
}
154+
155+
/* Small screens (mobiles) */
156+
@media (max-width: 480px) {
157+
.parent-container {
158+
transform: scale(0.80); /* smaller size */
159+
margin-top: 1rem;
160+
}
161+
}

0 commit comments

Comments
 (0)