🌤️ Weather Forecast App Using HTML, CSS & JavaScript
Weather impacts our day-to-day decisions — from what to wear, to when to travel, or how to plan a weekend. So I built a lightweight, responsive Weather Forecast App using HTML, CSS, JavaScript, and an open weather API. This app allows users to check the current weather conditions for any city around the world in real time.
This weather app is a great beginner-to-intermediate level frontend project that demonstrates API integration, form handling, and dynamic DOM updates with pure JavaScript.
🔧 Features
- ☁️ Real-time weather data
- 🌍 Global city search support
- 📱 Responsive and mobile-friendly layout
- 🔁 Dynamic weather icon, temperature, humidity, etc.
💻 HTML Code
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="dis_row">
<img src="https://static.vecteezy.com/system/resources/previews/026/571/030/non_2x/weather-icon-with-sun-and-cloud-on-transparent-background-free-png.png" height="50px">
<h1>Weather App</h1>
</div>
<input type="text" id="locationInput" placeholder="Enter a city">
<button id="searchButton">Search</button>
<div class="weather-info">
<h2 id="location"></h2>
<p id="temperature"></p>
<p id="description"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 CSS Code
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
max-width: 400px;
margin: 0 auto;
text-align: center;
padding: 20px;
background-color: rgba(255, 255, 255, 0.5); /* Set the background color to be transparent */
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adjust the alpha value here for the box shadow transparency */
margin-top: 105px;
}
h1 {
font-size: 24px;
}
input[type="text"] {
width: 90%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007BFF;
color: #fff;
border: none;
margin-top: 10px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.weather-info {
margin-top: 20px;
}
.dis_row{
display: flex;
flex-direction: row;
justify-content: center;
}
⚙️ JavaScript Code
const searchBtn=document.getElementById("searchButton")
let input=document.getElementById("locationInput")
let loc=document.getElementById("location")
let temp=document.getElementById("temperature")
let des=document.getElementById("description")
searchBtn.addEventListener("click",async ()=>{
inp=input.value;
let KEY="YOUR_KEY_FROM_WEATHER_API"
let URL=`http://api.weatherapi.com/v1/current.json?key=${KEY}&q=${inp}&aqi=yes`
result=await fetch(URL)
json_res=await result.json()
console.log(json_res)
loc.innerText=`${json_res.location.name} - ${json_res.location.region} - ${json_res.location.country}`
temp.innerText=`${json_res.current.temp_c} *C`
des.innerText=`${json_res.current.condition.text}`
})
🔗 Try It Now
I’ve hosted the project online for you to explore:
👉 Live Demo
📦 API Used
This app uses the WeatherAPI.com to fetch live weather data. You'll need to register and get your own API key to make it work.
🚀 Conclusion
Building this weather app taught me how to fetch external API data, handle user input, manage errors, and dynamically update content on a webpage. It's a perfect beginner-friendly project to master JavaScript and API integration.
Thank you for reading! ☀️ Happy Coding!
0 Comments