Create a Weather App with HTML, CSS, and JavaScript

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

You may like these:-

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 

       Weather App - InCoder    
 
 
 
 
 Clouds
 
 
 Humidity 
Humidity
 
 
  
Wind Speed
Enter fullscreen mode

Exit fullscreen mode

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
Enter fullscreen mode

Exit fullscreen mode

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=$&appid=$`) .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 $`) > 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();
Enter fullscreen mode

Exit fullscreen mode

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.