Scribd
Upload
14 views2 pages

Weaither

The document is an HTML template for a Weather App that allows users to input a location and retrieve current weather information. It includes embedded CSS for styling and JavaScript for fetching weather data from an API. The app displays the temperature and weather condition for the specified location, handling errors if the location is not found.

Uploaded by

vivek gautam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views2 pages

Weaither

The document is an HTML template for a Weather App that allows users to input a location and retrieve current weather information. It includes embedded CSS for styling and JavaScript for fetching weather data from an API. The app displays the temperature and weather condition for the specified location, handling errors if the location is not found.

Uploaded by

vivek gautam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Weather App</title>

<!-- Embedded CSS -->


<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to top right, #74ebd5, #acb6e5);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
text-align: center;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

input {
padding: 10px;
width: 200px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px 20px;
background-color: #3498db;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #2980b9;
}

#weatherResult {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>Weather App</h1>
<input type="text" id="locationInput" placeholder="Enter location..." />
<button onclick="getWeather()">Get Weather</button>
<div id="weatherResult"></div>
</div>

<!-- Embedded JavaScript -->


<script>
function getWeather() {
const location = document.getElementById('locationInput').value;
const apiKey = '6105f2cf03a04f53b5f104041253105';
const url = `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=$
{location}&aqi=yes`;

fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Location not found');
}
return response.json();
})
.then(data => {
const tempC = data.current.temp_c;
const condition = data.current.condition.text;
const weatherResult = document.getElementById('weatherResult');
weatherResult.innerHTML = `
<strong>${data.location.name}, ${data.location.country}</strong><br/>
Temperature: ${tempC}°C<br/>
Condition: ${condition}
`;
})
.catch(error => {
document.getElementById('weatherResult').innerHTML = `Error: $
{error.message}`;
});
}
</script>
</body>
</html>

You might also like