Weather app javascript | Weather app using HTML CSS Javascript

Weather app javascript | Weather app using HTML CSS Javascript





weather app javascript | weather app using html css javascript

Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create weather app javascript. We use HTML & CSS and javascript for this weather app 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 App</title>  
   <link rel="stylesheet" href="indxe.css">  
 </head>  
 <body>  
  <form id="form"><input type="text" id="search" placeholder="Search By Loaction" autocomplete="off">  
 </form>  
 <main id="main">  
 </main>  
   <script src="index.js"></script>  
 </body>  

</html>

There is all HTML code for the weather app. Now, you can see output without CSS, then we write CSS for our weather app.


weather app javascript | weather app using html css javascript



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

Now we have completed our CSS section,  Here is our updated output CSS.

weather app javascript | weather app using html css javascript

Now add javascript for the weather app!

Javascript for a weather app

  const apiKey = "Enter your api key here(more info below ) ";  
 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)  
     }  
    });  

API key infoGo 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, and in their menu(navbar), you know the API key option. Just copy and paste it. If you have any problem, let fill comment section for knowledge💯📖📚📝.

Javascript project ideas with source code  by Code With Random

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


                       weather app javascript | weather app using html css javascript

weather app javascript | weather app using html css javascript

weather app javascript | weather app using html css javascript

weather app javascript | weather app using html css javascript





12 Comments

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

      Delete
  2. Replies
    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

      Delete
  3. Replies
    1. brother give details on our mail id or contact on ig - codewithrandom

      Delete
  4. Replies
    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

      Delete
  5. 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

    ReplyDelete
  6. even after generating my own api key it still does not work?

    ReplyDelete

Post a Comment

Previous Post Next Post