Weather App Using Html,Css And Javascript (Weather App Source Code )

Weather App Using Html,Css And Javascript (Weather App Source Code )

Welcome to Code With Random blog. In this article, we create a weather app using html, css, and javascript code.

We share the complete source code of the weather app so you can create your own weather app with only some changes and your weather app ready.

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.

Video Tutorial Of Weather App Using Html,Css And Javascript

Hope you enjoy our blog so let’s start with a basic HTML structure for weather app javascript.

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>

 

There is all the HTML code for the weather app. We are using HTML forms to collect location data from the users. According to the location received from user input, we will display the weather information inside the <main> element.

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

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

 

@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); } */

We have completed our CSS section weather app,  Here is our updated output CSS. We use some basic css styling with display flex.

Learn Css In Easy Way

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 In 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.

weather app using html css and javascript
Setp 1

 

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

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

weather app using html css and javascript
Step 2

 

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.

weather app using html css and javascript
Step 3

 

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.

weather app using html css and javascript
API KEY

 

weather app using html css and javascript

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. Thank you

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

Coding Language Used Name of Coding language
1 Html
2 Css
3 Javascript

What Coding language do you use for this weather app?

I use Html for creating the structure of the weather app and for styling I use css. And for the main functionality, I use javascript code and an API code for a weather app.

Does this app show weather of only a specific country or state or something like this?

No, it shows the whole world’s weather including their states and city but you can’t find village weather in this project.

Share on:

31 thoughts on “Weather App Using Html,Css And Javascript (Weather App Source Code )”

    • 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

      Reply
    • 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

      Reply
    • 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

      Reply
  1. 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

    Reply
  2. 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

    Reply
    • 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

      Reply
      • 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

        Reply
  3. 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

    Reply
  4. 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

    Reply
    • 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

      Reply
    • 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

      Reply
  5. 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 🤗

    Reply
  6. 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 🤗

    Reply
  7. 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 🤗

    Reply
    • 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

      Reply
  8. 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

    Reply
    • 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

      Reply
    • 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

      Reply

Leave a Comment