Html,Css 및 Javascript를 사용하는 날씨 앱(날씨 앱 소스 코드)

Html,Css 및 Javascript를 사용하는 날씨 앱(날씨 앱 소스 코드)

2022-10-19 last update

6 minutes reading javascript beginners programming webdev
날씨 앱용 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</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>


날씨 앱에 대한 모든 HTML 코드가 있습니다. 우리는 사용자로부터 위치 데이터를 수집하기 위해 HTML 양식을 사용하고 있습니다. 사용자 입력에서 받은 위치에 따라 요소 내부에 날씨 정보를 표시합니다.

다음은 CSS로 스타일을 지정하기 전의 프로젝트 출력입니다.

검토 - 해당 사항 없음
홈페이지에서 미리보기 가능
Click here

날씨 앱용 CSS 코드

@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];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); } */


CSS 섹션 날씨 앱을 완성했습니다. 다음은 업데이트된 출력 CSS입니다. 디스플레이 플렉스와 함께 몇 가지 기본 CSS 스타일을 사용합니다.

홈페이지에서 미리보기 가능
Click here

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

onst 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)
        }

     });


이 프로젝트를 실행하려면 API 키가 필요하므로 API 키를 얻은 후 내가 작성자가 있는 프로젝트에 붙여넣고 API 키를 입력하십시오.

API 키 생성 단계
1단계 – API 키 정보 – 구글 검색 OpenWeatherMap API로 이동하여 첫 번째 링크를 클릭하고 여기에서 계정을 만들고 가입합니다. 회원가입을 하시면 홈페이지가 보입니다.

2단계 – 이 openweather API 웹사이트에 가입한 후 홈페이지에 표시되는 모든 내용을 확인하세요. 때로는 홈페이지에 API 키가 표시되고 API 섹션에서 시간이 걸리므로 API를 클릭합니다. (메뉴에서 이미지 API를 볼 수 있습니다. ) API를 클릭합니다.

3단계 – API 양식 메뉴를 클릭하면 많은 API가 있는 것을 볼 수 있지만 API 메인 페이지를 시작하면 이러한 유형의 상자( API 정보 상자)가 이미지에서 아래에 표시되는 것을 볼 수 있습니다. 따라서 API 문서를 클릭하십시오.

4단계 – 이 API를 클릭한 후 새 페이지가 표시되므로 조금 스크롤하면 이 API를 연결하는 방법에 대한 API 문서와 코드가 있음을 알 수 있습니다. 이 API 키워드는 아래 이미지에서 쉽게 볼 수 있습니다. API 키를 클릭하면 API 키를 얻을 수 있습니다.

이제 자바스크립트 섹션을 완료했으므로 자바스크립트로 업데이트된 출력은 다음과 같습니다. 음성 인식 자바스크립트가 마음에 드셨으면 합니다. 출력 비디오와 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오. 고맙습니다

Html, css 및 Javascript 출력을 사용하는 날씨 앱

홈페이지에서 미리보기 가능
Click here

날씨 앱 프로젝트의 스크린샷을 찍을 수 있습니다. 이 게시물에서는 간단한 HTML 및 CSS와 자바스크립트를 사용하여 날씨 앱을 만드는 방법을 배웁니다.

우리가 실수하거나 혼란을 일으켰다면 댓글을 남겨 답장을 보내거나 쉬운 학습을 도와주세요.

작성자 – Random/Anki가 있는 코드

일부 관련 주제 -

weather-app-javascript-weather-app-using-html-css-javascript

create-header-html-create-header-html-css/

otp-input-field-html-css-otp-input-using-html-css-javascript

multi-step-form-multi-step-form-html-css-javascript-multi-step-form