Hugging Face's logo

Spaces:
bhumika007
/
Weather.App
Running

App Files Community
bhumika007 commited on
Commit
524bbfc
·
verified ·
1 Parent(s): 8f6c71c

Upload index.html

Browse files

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Weather App</title>
<style>
body {
font-family: Arial, sans-serif;
background: #87CEEB;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.weather-container {
background: white;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
text-align: center;
width: 300px;
}
input[type="text"] {
width: 80%;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 15px;
}
button {
padding: 10px 20px;
font-size: 16px;
background: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
.result {
margin-top: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="weather-container">
<h2>Weather App</h2>
<input type="text" id="location" placeholder="Enter Location (City or Zip)" />
<button onclick="getWeather()">Get Temperature</button>
<div class="result" id="result"></div>
</div>

<script>
async function getWeather() {
const location = document.getElementById('location').value;
const resultDiv = document.getElementById('result');
if (!location) {
resultDiv.textContent = 'Please enter a location.';
return;
}

const apiKey = '4b0669fa25fd4d5292b93938251311';
const url = `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${encodeURIComponent(location)}&aqi=yes`;

resultDiv.textContent = 'Loading...';

try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Location not found');
}
const data = await response.json();

const tempC = data.current.temp_c;
const condition = data.current.condition.text;

resultDiv.innerHTML = `
<p><strong>Location:</strong> ${data.location.name}, ${data.location.region}, ${data.location.country}</p>
<p><strong>Temperature:</strong> ${tempC} °C</p>
<p><strong>Condition:</strong> ${condition}</p>
`;
} catch (error) {
resultDiv.textContent = 'Could not retrieve weather data. Please check the location and try again.';
}
}
</script>
</body>
</html>

Files changed (1) hide show
  1. index.html +94 -13
index.html CHANGED
@@ -1,13 +1,94 @@
1
- <!DOCTYPE html>
2
- <html lang="">
3
- <head>
4
- <meta charset="UTF-8">
5
- <link rel="icon" href="/favicon.ico">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Vite App</title>
8
- </head>
9
- <body>
10
- <div id="app"></div>
11
- <script type="module" src="/src/main.ts"></script>
12
- </body>
13
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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" />
6
+ <title>Weather App</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background: #87CEEB;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ height: 100vh;
15
+ margin: 0;
16
+ }
17
+ .weather-container {
18
+ background: white;
19
+ padding: 20px 30px;
20
+ border-radius: 10px;
21
+ box-shadow: 0 0 15px rgba(0,0,0,0.2);
22
+ text-align: center;
23
+ width: 300px;
24
+ }
25
+ input[type="text"] {
26
+ width: 80%;
27
+ padding: 10px;
28
+ font-size: 16px;
29
+ border-radius: 5px;
30
+ border: 1px solid #ccc;
31
+ margin-bottom: 15px;
32
+ }
33
+ button {
34
+ padding: 10px 20px;
35
+ font-size: 16px;
36
+ background: #007BFF;
37
+ color: white;
38
+ border: none;
39
+ border-radius: 5px;
40
+ cursor: pointer;
41
+ }
42
+ button:hover {
43
+ background: #0056b3;
44
+ }
45
+ .result {
46
+ margin-top: 20px;
47
+ font-size: 20px;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <div class="weather-container">
53
+ <h2>Weather App</h2>
54
+ <input type="text" id="location" placeholder="Enter Location (City or Zip)" />
55
+ <button onclick="getWeather()">Get Temperature</button>
56
+ <div class="result" id="result"></div>
57
+ </div>
58
+
59
+ <script>
60
+ async function getWeather() {
61
+ const location = document.getElementById('location').value;
62
+ const resultDiv = document.getElementById('result');
63
+ if (!location) {
64
+ resultDiv.textContent = 'Please enter a location.';
65
+ return;
66
+ }
67
+
68
+ const apiKey = '4b0669fa25fd4d5292b93938251311';
69
+ const url = `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${encodeURIComponent(location)}&aqi=yes`;
70
+
71
+ resultDiv.textContent = 'Loading...';
72
+
73
+ try {
74
+ const response = await fetch(url);
75
+ if (!response.ok) {
76
+ throw new Error('Location not found');
77
+ }
78
+ const data = await response.json();
79
+
80
+ const tempC = data.current.temp_c;
81
+ const condition = data.current.condition.text;
82
+
83
+ resultDiv.innerHTML = `
84
+ <p><strong>Location:</strong> ${data.location.name}, ${data.location.region}, ${data.location.country}</p>
85
+ <p><strong>Temperature:</strong> ${tempC} °C</p>
86
+ <p><strong>Condition:</strong> ${condition}</p>
87
+ `;
88
+ } catch (error) {
89
+ resultDiv.textContent = 'Could not retrieve weather data. Please check the location and try again.';
90
+ }
91
+ }
92
+ </script>
93
+ </body>
94
+ </html>