Create a Weather App Using HTML, CSS, JAVASCRIPT
As a programmer or front-end developer, you may have come across the need to Create a Weather App Using HTML, CSS, JAVASCRIPT. In this tutorial, we will walk you through the step-by-step process of writing the code for a weather app. Create a Weather App Using HTML, CSS, JAVASCRIPT:
Step 1: Set up the HTML Structure
To begin, open any text editor of your choice and create a new HTML file. Create a Weather App Using HTML, CSS, JAVASCRIPT.Save it with a suitable name, such as "index.html". Now, let's set up the basic HTML structure for our weather app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App With JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="search-box">
<input type="text" placeholder="Enter your location" class="input-box">
<button class="fa-solid fa-magnifying-glass" id="searchBtn"></button>
</div>
</div>
<div class="location-not-found">
<h1>Sorry, Location not found!!!</h1>
<img src="/assets/404.png" alt="404 Error">
</div>
<div class="weather-body">
<img src="/assets/cloud.png" alt="Weather Image" class="weather-img">
<div class="weather-box">
<p class="temperature">0 <sup>°C</sup></p>
<p class="description">light rain</p>
</div>
<div class="weather-details">
<div class="humidity">
<i class="fa-sharp fa-solid fa-droplet"></i>
<div class="text">
<span id="humidity">45%</span>
<p>Humidity</p>
</div>
</div>
<div class="wind">
<i class="fa-solid fa-wind"></i>
<div class="text">
<span id="wind-speed">12Km/H</span>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/595a890311.js" crossorigin="anonymous"></script>
</body>
</html>
This code defines the basic structure of our weather app. It includes various elements such as a search box, weather information display, and icons for humidity and wind speed. We have also included external CSS and JavaScript files for styling and functionality.Create a Weather App Using HTML, CSS, JAVASCRIPT.
Step 2: Style Your Weather App
To make our weather app visually appealing, we need to style it using CSS. Create a new file in the same directory as your HTML file and name it "style.css". Add the following CSS code to it:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.container{
width: 400px;
height: min-content;
background-color: #fff;
border-radius: 12px;
padding: 28px;
}
.search-box{
width: 100%;
height: min-content;
display: flex;
justify-content: space-between;
align-items: center;
}
.search-box input{
width: 84%;
font-size: 20px;
text-transform: capitalize;
color: #000;
background-color: #e6f5fb;
padding: 12px 16px;
border-radius: 14px;
}
.search-box input::placeholder{
color: #000;
}
.search-box button{
width: 46px;
height: 46px;
background-color: #e6f5fb;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
}
.search-box button:hover{
color: #fff;
background-color: #ababab;
}
.weather-body{
justify-content: center;
align-items: center;
flex-direction: column;
margin-block: 20px;
display: none;
}
.weather-body img{
width: 60%;
}
.weather-box{
margin-block: 20px;
text-align: center;
}
.weather-box .temperature{
font-size: 40px;
font-weight: 800;
position: relative;
}
.weather-box .temperature sup{
font-size: 20px;
position: absolute;
font-weight: 600;
}
.weather-box .description{
font-size: 20px;
font-weight: 700;
text-transform: capitalize;
}
.weather-details{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.humidity, .wind{
display: flex;
align-items: center;
}
.humidity{
margin-left: 20px;
}
.wind{
margin-right: 20px;
}
.weather-details i{
font-size: 36px;
}
.weather-details .text{
margin-left: 10px;
font-size: 16px;
}
.text span{
font-size: 20px;
font-weight: 700;
}
.location-not-found{
margin-top: 20px;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
}
.location-not-found h1{
font-size: 20px;
color: #6b6b6b;
margin-block-end: 15px;
}
.location-not-found img{
width: 80%;
}
Feel free to customize the styles according to your preferences. You can target specific classes and IDs to modify their appearance.Create a Weather App Using HTML, CSS, JAVASCRIPT.
Step 3: Add JavaScript Functionality
Now, let's add JavaScript functionality to our weather app. Create another file in the same directory and name it "script.js". We will write our JavaScript code in this file.
const inputBox = document.querySelector('.input-box');
const searchBtn = document.getElementById('searchBtn');
const weather_img = document.querySelector('.weather-img');
const temperature = document.querySelector('.temperature');
const description = document.querySelector('.description');
const humidity = document.getElementById('humidity');
const wind_speed = document.getElementById('wind-speed');
const location_not_found = document.querySelector('.location-not-found');
const weather_body = document.querySelector('.weather-body');
async function checkWeather(city){
const api_key = "4cd0eee81294c867b4bc4cfc64e998c5";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`;
const weather_data = await fetch(`${url}`).then(response => response.json());
if(weather_data.cod === `404`){
location_not_found.style.display = "flex";
weather_body.style.display = "none";
console.log("error");
return;
}
console.log("run");
location_not_found.style.display = "none";
weather_body.style.display = "flex";
temperature.innerHTML = `${Math.round(weather_data.main.temp - 273.15)}°C`;
description.innerHTML = `${weather_data.weather[0].description}`;
humidity.innerHTML = `${weather_data.main.humidity}%`;
wind_speed.innerHTML = `${weather_data.wind.speed}Km/H`;
switch(weather_data.weather[0].main){
case 'Clouds':
weather_img.src = "/assets/cloud.png";
break;
case 'Clear':
weather_img.src = "/assets/clear.png";
break;
case 'Rain':
weather_img.src = "/assets/rain.png";
break;
case 'Mist':
weather_img.src = "/assets/mist.png";
break;
case 'Snow':
weather_img.src = "/assets/snow.png";
break;
}
console.log(weather_data);
}
searchBtn.addEventListener('click', ()=>{
checkWeather(inputBox.value);
});
In this file, you can implement various functionalities like fetching weather data from an API, updating the UI based on the retrieved data, and handling user interactions.Create a Weather App Using HTML, CSS, JAVASCRIPT.
Step 4: Include External Libraries
If you need to include any external libraries or APIs to enhance the functionality of your weather app, you can do so by adding script tags with the appropriate source URLs. Replace "https://kit.fontawesome.com/595a890311.js" in the HTML code with the actual URL of the library or API you want to include.
Step 5: Test and Refine
Once you have completed the above steps, save all your files and open the HTML file in a web browser. Test your weather app by entering a location in the search box and verifying if the weather information is displayed correctly.
If you encounter any issues or want to add more features to your weather app, you can refine your code accordingly. Debugging and testing are crucial to ensure your app functions smoothly.Create a Weather App Using HTML, CSS, JAVASCRIPT.
Conclusion
Congratulations! You have successfully created a weather app using JavaScript. By following this step-by-step guide, you can build upon this foundation and further enhance the app's features and functionalities. Keep exploring and experimenting with different technologies to create even more impressive web applications. Happy coding!
