Hey friends, today in this blog, you’ll learn how to Build A Weather App in HTML CSS & JavaScript. And, now it’s time to create a weather app in JavaScript.
Weather applications are software programs or mobile apps that provide users with information about the current and forecasted weather conditions for a specific location. These apps can access real-time data from weather stations, satellites, and other sources to provide users with current temperature, humidity, wind speed, and other information. Some weather apps also provide users with forecasts for the next several days, as well as alerts for severe weather conditions such as thunderstorms or hurricanes. Additionally, some weather apps also provide weather information for outdoor activities such as hiking, biking and fishing. Weather apps can be useful for planning outdoor activities or for staying safe during severe weather.
You might like this:
Weather App Using HTML, CSS And JavaScript
Creating a weather application using HTML, CSS, and JavaScript can be a fun and rewarding project for anyone with a basic understanding of web development. In this post, we will walk through the process of building a simple weather application, from start to finish, using these three technologies.
First, let's start with the HTML. This is the backbone of our application and will provide the structure for our user interface. We will create a simple layout that includes a header, a section for displaying the current weather, and a section for displaying the forecast for the day. Create an HTML file with the name of index.html and paste the given codes in your HTML file. You’ve to create a file with .html extension.
<!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" />
<script src="script.js" defer></script>
</head>
<body>
<form id="form">
<input type="text"id="search"placeholder="Search by location"autocomplete="off"/>
</form>
<main id="main"></main>
</body>
</html>
The header will include the name of our application and a form for the user to enter their location. The current weather section will display the current temperature, and an icon representing the current conditions. The forecast section will display the temperature, and icon for the day.
Next, we will add some CSS to style our application. We will use a CSS, to make it easy to create a responsive layout that works well on different screen sizes. We will also use CSS to add some basic styling to our layout, such as colors and font styles. Create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background: linear-gradient(300deg, #ced1d6, #bfc0c0);
font-family: "Poppins", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
input {
background-color: #fff;
border: none;
border-radius: 25px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
font-family: inherit;
font-size: 1rem;
padding: 1rem;
min-width: 300px;
}
input:focus {
outline: none;
}
.weather {
font-size: 2rem;
text-align: center;
}
.weather h2 {
display: flex;
align-items: center;
margin-bottom: 0;
}
Once our HTML and CSS are in place, we will add the JavaScript to make our application interactive. We will use the JavaScript Fetch API to make a request to a weather API, such as OpenWeatherMap, to retrieve the current weather and forecast data. We will then use JavaScript to display this data on our page and to update the page when the user enters a new location. Create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. You’ve to create a file with .js extension and remember you have to pass your API key in the API URL otherwise this weather app won’t work and it returns “something went wrong” error. You can get this key from the official OpenWeatherMap site for free.
const apikey = "3265874a2c77ae4a04bb96236a642d2f";
const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");
const url = (city) =>
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apikey}`;
async function getWeatherByLocation(city) {
const resp = await fetch(url(city), { origin: "cors" });
const respData = await resp.json();
console.log(respData);
addWeatherToPage(respData);
}
function addWeatherToPage(data) {
const temp = KtoC(data.main.temp);
const weather = document.createElement("div");
weather.classList.add("weather");
weather.innerHTML = `
<h2><img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" /> ${temp}°C <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" /></h2>
<small>${data.weather[0].main}</small>
`;
// cleanup
main.innerHTML = "";
main.appendChild(weather);
}
function KtoC(K) {
return Math.floor(K - 273.15);
}
form.addEventListener("submit", (e) => {
e.preventDefault();
const city = search.value;
if (city) {
getWeatherByLocation(city);
}
});
Finally, we will add some error handling to our application. For example, we will show an error message if the user enters an invalid location or if there is an error with the weather API. We will also add a loading animation to let the user know that their request is being processed.
In conclusion, creating a weather application using HTML, CSS, and JavaScript is a great way to learn web development and to create a useful tool that can be shared with others. With a basic understanding of these technologies and a little bit of creativity, you can create a weather application that is both functional and visually appealing.