Telegram Group Join Now

Weather App Using HTML, CSS, And JavaScript (Source Code)

The Code With Random blog is pleased to have you. The HTML, CSS, and JavaScript codes used in this tutorial are used to develop a weather app.

100+ Front-end Projects for Web developers (Source Code)

we will discuss how to create a Javascript Weather App. For this project, we will use HTML, CSS, and Javascript.

Code by	N/A
Project Download	Link Available below
Language used	HTML, CSS and JavaScript
External link / Dependencies	No
Responsive	Yes

Weather App Using HTML, CSS And JavaScript Table

Video Tutorial Of Weather App Using Html, CSS, And Javascript

I hope you enjoyed and understood the topic from the video, so let’s get started with a basic HTML structure for a javascript weather app.

HTML Code For A 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</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <form id="form">
        <input type="text" id="search" placeholder="Search By Loaction" autocomplete="off">
    </form>
    <main id="main">

    </main>

    <script src="app.js"></script>
</body>

</html>

The entire HTML code for the weather app is present. To obtain users’ location information, we employ HTML forms. We will display the weather data inside the main> element according to the location determined by user input.

Create a Simple Portfolio Website Using Html Css (Portfolio Source Code)

Here’s the output of our project before styling it with CSS.

Weather app javascript | Weather app using HTML CSS Javascript

CSS Code for a Weather app

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    background-color: linear-gradiet(300deg, #757b87, #909d9d);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}
input {
    padding: 1rem;
    border-radius: 25px;
    border: none;
    background-color: #fff;
    font-family: inherit;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    min-width: 300px;
    font-size: 1rem;
}
input:focus {
    outline: none;
}
.weather {
    text-align: center;
    font-size: 2rem;
}
.weather h2 {
    margin-bottom: 0;
    display: flex;
    align-items: center;
} /* .weather img{ transform: scale(2); } */

For the weather app, we have finished the CSS part. Here is the revised CSS for our output. Using some fundamental CSS styling with display flex, we will centre the elements by setting the background colour as a gradient colour and using the align property. Using the class selector, all of this styling will be applied.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

Now add javascript for the weather app!

Javascript Code for Weather app

 const apiKey = "ENTER YOUR API KEY";

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: "cros" });
         const respData = await resp.json();
     
           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)
        }

     });

You Need API Key To Run This Project So After Getting Your API Key Paste it Into Project Where I Writer Enter Your API Key

Steps to create API Key

Step 1 – API key info – Go to google search OpenWeatherMap API, click on 1st link and make your account here and sign up. After signing up, you see the home page.

Step 2 -After signing up on this open weather API website whatever you see on the home page because sometimes you get an API key on the home page and sometimes in the API section so click on API ( In their menu you can see in the image API) so click on API.

10+ Javascript Project Ideas For Beginners( Project Source Code)

Step 3 – After clicking on the API form menu, you can see there are lots of APIs but on the API Maine page starting you get this type of box ( API information box) you can see below in the image. So click on API Doc.

Step 4 – After clicking on this API you get a new page so scroll a little bit and you see there is an API document and code that how we connect this API you see the API keyword (in the below image you can see it easily) so click on API key and you get your API key.

Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like speech recognition javascript; you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

DOWNLOAD CODE NOW

Weather App Using Html, CSS, And Javascript output

You can screenshot of our weather app project. In this post, we learn how to create a weather app using simple HTML & CSS, and javascript.

Ecommerce Website Using Html Css And Javascript Source Code

If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Faq For Javascript Weather App

FaQ For Weather App Using HTML, CSS And JavaScript

Which code editor do you use for this Weather App project coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

Telegram Group Join Now

31 thoughts on “Weather App Using HTML, CSS And JavaScript (Source Code)”

ADVERTISEMENT
Unknown

September 21, 2021 at 12:57 pm

not working
Yashraj Maher

September 22, 2021 at 6:01 am

It doesn't work .
Why ?
- admin
  
  September 21, 2022 at 1:43 am
  
  Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you
Unknown

September 22, 2021 at 7:15 am

it is not working
- admin
  
  September 21, 2022 at 1:43 am
  
  Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you
Code With Random

September 23, 2021 at 5:06 am

brother give details on our mail id or contact on ig – codewithrandom
Unknown

September 25, 2021 at 8:06 am

it is not working
Danish-Blogs-9

October 3, 2021 at 10:31 am

not working
Unknown

October 11, 2021 at 1:48 pm

not working dear
- admin
  
  September 21, 2022 at 1:43 am
  
  Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you
Code With Random

October 12, 2021 at 12:24 pm

Hey thank you for coming and try out to make this🤗 there is 2 error if you copy this code 1. You make your own api key so basically people try to copy full code and that's why project doesn't work . 2. If everything perfect even api key so i think you can't link files in right way
Code With Random

October 12, 2021 at 12:25 pm

Hey thank you for coming and try out to make this🤗 there is 2 error if you copy this code 1. You make your own api key so basically people try to copy full code and that's why project doesn't work . 2. If everything perfect even api key so i think you can't link files in right way
- Code With Aditya
  
  September 4, 2022 at 6:46 am
  
  No bro I have pasted my own API key – API_KEY = `c1b724d4a8b26f8f2bf3bd5cbd950b10`;
  API = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
  IMG_URL = `https: //openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`
  but it is not working .
  And I have make my code also and it works on my pc if I don’t publish. But when I it on Github or Sololearn it prints “Failed To Fetch ”
  Here’s the Link – https://github.com/adiyadav123/website_landingpage
  - admin
    
    September 21, 2022 at 1:42 am
    
    Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you
Code With Random

October 12, 2021 at 12:25 pm

Hey thank you for coming and try out to make this🤗 there is 2 error if you copy this code 1. You make your own api key so basically people try to copy full code and that's why project doesn't work . 2. If everything perfect even api key so i think you can't link files in right way
Code With Random

October 12, 2021 at 12:25 pm

Hey thank you for coming and try out to make this🤗 there is 2 error if you copy this code 1. You make your own api key so basically people try to copy full code and that's why project doesn't work . 2. If everything perfect even api key so i think you can't link files in right way
Olajide Niniola

October 25, 2021 at 4:34 am

even after generating my own api key it still does not work?
- admin
  
  September 21, 2022 at 1:43 am
  
  Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you
Olajide Niniola

October 27, 2021 at 8:44 pm

Hey the problem is coming from the origin. It is cors and not cros.
- admin
  
  September 21, 2022 at 1:42 am
  
  Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you
Code With Random

October 28, 2021 at 8:42 am

Sorry for the bugs in the project I don't find any bugs but I re-updated all javascript and HTML css code so now you can taste it, and please create your API key as I describe in the article. and now if you have any questions or issues related to this project you can message me on my Instagram account. thank you 🤗
Code With Random

October 28, 2021 at 8:42 am

Sorry for the bugs in the project I don't find any bugs but I re-updated all javascript and HTML css code so now you can taste it, and please create your API key as I describe in the article. and now if you have any questions or issues related to this project you can message me on my Instagram account. thank you 🤗
Code With Random

October 28, 2021 at 8:43 am

Sorry for the bugs in the project I don't find any bugs but I re-updated all javascript and HTML css code so now you can taste it, and please create your API key as I describe in the article. and now if you have any questions or issues related to this project you can message me on my Instagram account. thank you 🤗
- yaswanth
  
  June 22, 2022 at 5:41 pm
  
  man where is the article
- admin
  
  September 21, 2022 at 1:42 am
  
  Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you
Unknown

April 21, 2022 at 11:06 am

not working
- admin
  
  September 21, 2022 at 1:42 am
  
  Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you
soumili

June 26, 2022 at 6:17 am

Hello , as u mentioned in the article we need to copy and paste api key from the navbar. so where and what xactly do we need to copy and paste
- admin
  
  September 21, 2022 at 1:42 am
  
  Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you
Sachin gupta

July 26, 2022 at 12:40 pm

Still not working
- admin
  
  September 21, 2022 at 1:42 am
  
  Hey coder, there is any issue in article so create this project form scratch and update api section that how you get api key and all this thing so try to create now this weather app❤Thank you

Telegram Group Join Now

Weather App Using HTML, CSS, And JavaScript (Source Code)

Video Tutorial Of Weather App Using Html, CSS, And Javascript

HTML Code For A Weather App

CSS Code for a Weather app

Javascript Code for Weather app

Weather App Using Html, CSS, And Javascript output

Which code editor do you use for this Weather App project coding?

is this project responsive or not?

Do you use any external links to create this project?

Telegram Group Join Now

31 thoughts on “Weather App Using HTML, CSS And JavaScript (Source Code)”

Leave a Comment Cancel reply