Building a Simple Weather App with HTML, CSS, and JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WeatherApp</title>
</head>
<style type="text/css">
body{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #eee;
font-family: Arial;
}
.weather{
background: #fff;
padding: 20px;
border: 1px solid deepskyblue;
border-radius: 5px;
}
.weather input,button{
background: skyblue;
border: none;
padding: 10px;
border-radius: 5px;
font-size: 12pt;
}
.error{
color: red;
}
h1{
color: navy;
}
</style>
<body>
<h1>Weather APP</h1>
<div class="weather">
<div>
<h2 id="city"></h2>
<span id="wIcon"></span>
<p id="tmp"></p>
<p id="desc"></p>
</div>
<div>
<input id="search" type="text" placeholder="Search City">
<button onclick="weather()">Check Weather</button>
</div>
</div>
<script type="text/javascript">
function weather(){
const city=document.querySelector("#city");
const tmp=document.querySelector("#tmp");
const desc=document.querySelector("#desc");
const search=document.querySelector("#search").value;
const wIcon=document.querySelector("#wIcon");
const url="https://api.openweathermap.org/data/2.5/weather?q="+search+"&APPID=2f86e0e73c4c925a3bcb7ff13a763fff";
fetch(url)
.then(function(xyz){
return xyz.json();
})
.then(function(result){
console.log(result);
city.innerText=result.name;
tmp.innerText="Temperature: "+Math.floor(result.main.temp-273.15)+"°C";
desc.innerText="Description: "+result.weather[0].description;
const icon="https://openweathermap.org/img/w/"+result.weather[0].icon+".png";
wIcon.innerHTML="<img src='"+icon+"'>";
})
.catch(function(error){
city.innerHTML="<span class='error'>City Not Found</span>";
tmp.innerText="";
desc.innerText="";
})
}
</script>
</body>
</html>
HTML Structure:
The HTML structure defines the document type, sets up metadata, and includes a title for the Weather App. The document is organized into sections, such as <head> for metadata and <body> for the page content.
CSS Styling:
CSS styles are applied to enhance the visual presentation of the Weather App. Styles include layout adjustments, color settings, and font choices to create a clean and user-friendly interface.
Body Content:
The body contains the main content of the Weather App. An <h1> heading introduces the app, and a <div> with the class “weather” encompasses the weather-related elements, including city name, weather icon, temperature, and description.
JavaScript Code:
The JavaScript code handles the dynamic functionality of the Weather App. When the “Check Weather” button is clicked, the weather() function is triggered. It fetches real-time weather data from the OpenWeatherMap API using the Fetch API method. An API key is included in the URL to authenticate and authorize the request. The fetched data is then displayed on the page, including the city name, temperature, and weather description. In case of an error or if the city is not found, appropriate messages are displayed.
Download Link:
This project provides a hands-on introduction to web development, incorporating HTML for structure, CSS for styling, and JavaScript for dynamic interactions. Users can easily understand and customize the code, including the use of an API key for secure data retrieval through the Fetch API method, making it a practical learning experience.
