Hello friends, today in this blog, we will learn how to create a weather app with HTML, CSS, and JavaScript. In our previous blog, we saw a Cool sign-up page design using HTML, CSS, and Javascript. You can check my other javascript projects after reading this blog.
In today's world, weather updates are readily available at our fingertips. We can easily check the current temperature, humidity, and weather conditions through various mobile apps or websites. But have you ever wondered how these apps are built? In this blog post, we will learn how to create a weather app using HTML, CSS, and JavaScript. This project is a great way to learn the basics of front-end web development and APIs.
By the end of this tutorial, you will have built a functional weather app that retrieves weather data using an API and displays it in a visually appealing way. You'll learn how to structure the HTML for the app, style it with CSS, and use JavaScript to retrieve and display the weather data. Whether you're a beginner or an experienced developer, this tutorial will help you sharpen your skills and add a fun project to your portfolio.
So, let's get started and create a weather app from scratch!
1 - Setting up the project
To begin building our weather app, we need to set up our project structure. Here's a step-by-step guide on how to do that:
- Create a new folder on your computer and give it a name (e.g. "weather-app").
- Inside the folder, create three new files: "index.html", "main.css", and "script.js". These files will contain our HTML, CSS, and JavaScript code, respectively.
- Open "index.html" in a code editor of your choice (such as Visual Studio Code, Sublime Text, or Atom).
- Add the basic HTML structure to the file, including the <!DOCTYPE html> declaration, the and tags, and the tag.
- Link the "style.css" and "script.js" files to the HTML file by adding the following code to the section.
- Save the "index.html" file.
You may like these:-
- Responsive Animated Card Design
- Detect User Location Using Javascript
- Input Character Limit with counter
- Responsive Sidebar Menu Design
2 - Code of HTML, CSS, and JavaScript Files
Here's the good news: you don't have to write all the code for this weather app from scratch! I have created a Github repository that contains all the HTML, CSS, and JavaScript code needed to build the app. You can check it out and use it as a starting point for your own weather app project.
NOTE:
You Can Check Live Demo of this project and download code and image files from here.
HTML CODE </>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- --------------------- Created By InCoder --------------------- -->
<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 - InCoder</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
</head>
<body>
<div class="mainContainer">
<div class="searchInput">
<input type="text" placeholder="Enter City Name" id="searchInput" value="New York"/>
<button id="searchButton"><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
<div class="weatherDetails">
<div class="weatherIcon">
<img src="Images/sun.png" alt="Clouds" id="weatherIcon">
</div>
<div class="cityDetails">
<div class="weather" id="weather"></div>
<div class="desc"></div>
</div>
<div class="windDetails">
<div class="humidityBox">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgr7XehXJkOPXbZr8xL42sZEFYlS-1fQcvUMsS2HrrV8pcj3GDFaYmYmeb3vXfMrjGXpViEDVfvLcqI7pJ03pKb_9ldQm-Cj9SlGW2Op8rxArgIhlD6oSLGQQKH9IqH1urPpQ4EAMCs3KOwbzLu57FDKv01PioBJBdR6pqlaxZTJr3HwxOUlFhC9EFyw/s320/thermometer.png" alt="Humidity">
<div><p class="humidity"></p><span>Humidity</span></div>
</div>
<div class="windSpeed">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyaIguDPkbBMnUDQkGp3wLRj_kvd_GIQ4RHQar7a32mUGtwg3wHLIe0ejKqryX8dnJu-gqU6CBnDo47O7BlzCMCwRbB7u0Pj0CbtGwtyhd8Y8cgEMaSuZKrw5-62etXwo7UoY509umLmndsRmEqqO0FKocqTqjzHvJFC2AEEYjUax9tc1JMWxIWAQR4g/s320/wind.png">
<div><p id="windSpeed"></p><span>Wind Speed</span></div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS CODE </>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
/* --------------------- Created By InCoder --------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Ubuntu", sans-serif;
}
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-color: #9c9dde;
}
.mainContainer {
width: 20rem;
height: auto;
border-radius: 1rem;
background: #fff;
}
.searchInput {
width: 100%;
display: flex;
padding: 1rem 1rem;
justify-content: center;
}
.searchInput input {
width: 100%;
height: 2rem;
outline: none;
font-size: 0.8rem;
color: #525050;
padding: 0.2rem 0.5rem;
border-radius: 1.5rem;
border: 1px solid #b3b3b3;
}
.searchInput input:focus {
border: 1px solid #9c9dde;
}
.searchInput button {
width: 2.2rem;
height: 2rem;
cursor: pointer;
color: #9b9b9b;
border-radius: 50%;
margin-left: 0.4rem;
transition: all 0.3s ease;
background-color: #fff;
border: 1px solid #b3b3b3;
}
.searchInput button:hover {
color: #fff;
background-color: #9c9dde;
border: 1px solid #9c9dde;
}
.weatherIcon {
display: flex;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
justify-content: center;
}
.weatherIcon img {
max-width: 100%;
width: 8rem;
}
.cityDetails {
color: #323232;
font-size: 2.5rem;
text-align: center;
margin-bottom: 0.5rem;
}
.windDetails {
display: flex;
margin-top: 1rem;
margin-bottom: 1.5rem;
justify-content: space-around;
}
.windDetails .humidityBox {
display: flex;
font-size: 1rem;
color: #323232;
}
.windDetails .humidityBox img {
max-height: 3rem;
margin-right: 0.5rem;
}
.windDetails .windSpeed {
display: flex;
font-size: 1rem;
color: #323232;
}
.windDetails .windSpeed img {
max-height: 3rem;
margin-right: 0.5rem;
}
JavaScript CODE </>
const searchInput = document.querySelector("#searchInput")
searchButton = document.querySelector("#searchButton")
weatherIcon = document.querySelector("#weatherIcon")
windSpeed = document.querySelector("#windSpeed")
humidity = document.querySelector(".humidity")
weather = document.querySelector(".weather")
desc = document.querySelector(".desc")
API = "8cf5ac5621c8d0266298a149e49d7514";
// --------------------- Created By InCoder ---------------------
const setWeatherDetails = (data) => {
// console.log(data);
desc.innerHTML = data.weather[0].description;
weather.innerHTML = Math.round(data.main.temp - 273.15) + "°c";
humidity.innerHTML = data.main.humidity + "%";
windSpeed.innerHTML = data.wind.speed + "km/h";
switch (data.weather[0].main) {
case 'Clouds':
weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwFTkt5z_dxU6w1UnS1PxiZV3HDiPGsAW5Lrsp09MnlCmkQre9GzO8MnGytaaY1eZoqBN6SMJ4U578_uDtiuXswovr1T3o-Kt5KK0mlN_zC0RDodJFaKHQ3Uk-HIZ3vuMvAKNJi8DDFwWA7F6BOxz78Oh-UePwJTuc3PG0ZIZypPE1xlMPl5z46joaEw/s320/Clouds.png";
break;
case 'Clear':
weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7pmzNCftryAfpa1YBSzVeYtjgxDQnw09Ug0HVV47J8GEtHPYTH9hJgZ2M1k0YgE0pcZ1qekr4C14zyPCiVuQAfXLClK8Ww3hYB6v77yElP7Lo5BnUKo4n-w6yB17FAbw51WST6YKS0GMwyA4fYNxOZxEyNL6HhUfFRgVhOW0GyRdBRriMHFQ-qfh4cA/s320/sun.png";
break;
case 'Rain':
weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDW_NdwvxV796rkFf43qmUDiTQePn5dg7PDfn1SijfpjtB0AWJMBcifU6LWyW7iOtjZhfqIJnKEGQ1PwbbXS7NoKMSAmvy7i2ljWXMYLue3EBIBBR2qTFbs6QCe5eoFr2CU9WzCVJ8u0J3z3eAo3Ajv1LXamZASFtbj9sA_gD-Kp3hfgAk17Xh17RoLQ/s320/rainy.png";
break;
case 'Mist':
weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpL23l0t1U_ibWi01TFcHMF6J_t-9Ada5PavGlwG4M_mKIcx0pV1md9SN9ip1d84NaVowml5Do16XO3nsuttnM2-Ov05d-wCjEYjdzaOYfKvijw8k6Hfj9pOiPyEZTp2W20EPbTeONTgJE2Rdxs4KZUfg6f2PmbMF1094NcqJ7DwSFUQwYiRmVCNvuA/s320/mist.png";
break;
case 'Snow':
weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-P3iT_uQK95qFY4h7QGdEtbRc1aVQo9BZy0ZWyPBvCNrP-4wnRStw0xYj9e4xa4ZlYISeNZqVJ33UP4YukR4jBennDD_obIN4QxYNZHdzG_z6_MNL2U08wMXwdFhtfvitW5LGiHgrwMJFC8QJFqbSO3woGSBqOdagGxaEQ20_S31Gc-GYL4vYzPzaPw/s320/snow.png";
break;
case 'Haze':
weatherIcon.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjld66Ia5g_hpBn3Impi3zzOBHqWkjQInGLxTb2uXksuCsrkQU8HjlVyLobEJEGg8fRSIxeFzldGEHUmWcaiZBwAcRy4dGDpFX1BjTSB56qmBjW5tEW3RSC9_mCuLU_a8RuXchxGY7Oc8HLLl-IfaDW19Z0ZJJfNae9tECXRIyEu7rmJ3da08z8cI-phw/s320/haze.png";
break;
}
}
const callAPI = (id) => {
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${searchInput.value}&appid=${id}`)
.then(response => {
// indicates whether the response is successful (status code 200-299) or not
if (!response.ok) {
alert("Check spelling of City and try again or Something Went Wrong!");
throw new Error(`Request failed with status ${response.status}`)
}
return response.json()
})
.then(data => {
setWeatherDetails(data);
})
.catch(error => console.log(error))
}
searchButton.addEventListener("click", (e) => {
if (searchInput.value == "") {
alert("Please Enter City Name.");
} else {
callAPI(API);
}
})
searchInput.addEventListener("keypress", (e) => {
if (e.key === "Enter") {
e.preventDefault();
searchButton.click();
}
})
searchButton.click();
You can download code and image files from here after downloading file if you are facing any kind of problem feel free to ask me in the comment section and you can also contact me via e-mail. Thanks for giving your precious time for reading this blog.
Top comments (0)