날씨 앱 자바스크립트 | HTML CSS Javascript를 사용하는 날씨 앱

4499 단어 webdevjavascriptreactprogramming
날씨 앱 자바스크립트 | HTML CSS Javascript를 사용하는 날씨 앱


Code With Random 블로그에 오신 것을 환영합니다. 이 블로그에서는 Javascript 날씨 앱을 만드는 방법에 대해 설명합니다. 이 프로젝트에서는 HTML, CSS 및 Javascript를 사용합니다. 날씨 앱 자바스크립트의 기본 HTML 구조부터 시작하겠습니다.

자바스크립트 날씨 앱용 HTML 코드

<!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>


날씨 앱에 대한 모든 HTML 코드가 있습니다. 우리는 HTML 양식을 사용하여 사용자로부터 위치 데이터를 수집하고 있습니다. 사용자 입력에서 받은 위치에 따라 요소 내부에 날씨 정보를 표시합니다.
Javascript 날씨 앱용 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);  
 } */


이제 날씨 앱에 자바스크립트를 추가하세요!
날씨 앱용 자바스크립트

 const apiKey = "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)  
     }  
    });


Click Here For this project output
Click Here For Website and get 300 free frontend Project

API 키 정보 - Google 검색 OpenWeatherMap API로 이동하여 첫 번째 링크를 클릭하고 여기에서 계정을 만들고 가입하십시오. 회원가입을 하면 홈페이지가 보이고 메뉴(navbar)에 API 키 옵션이 보입니다. 그냥 복사해서 붙여넣으세요. 문제가 있는 경우 댓글 섹션 💯📖📚📝을 작성해 주세요.

자바스크립트 섹션을 완료했으므로 다음은 자바스크립트로 업데이트된 출력입니다. 음성 인식 자바스크립트가 마음에 드셨으면 합니다. 출력 비디오 및 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프런트 엔드 개발에 대한 지식을 얻으십시오. 감사합니다🙏💕
Android Studio 마이그레이션 2.3.3 → 3.1.4
다단계 양식 | 다단계 양식 HTML CSS | 자바스크립트 다단계 양식

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage