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

6026 단어 javascriptbeginnersprogrammingwebdev
날씨 앱용 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: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); } */


CSS 섹션 날씨 앱을 완성했습니다. 업데이트된 출력 CSS는 다음과 같습니다. display flex와 함께 몇 가지 기본 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 키 정보 – Google 검색 OpenWeatherMap API로 이동하여 첫 번째 링크를 클릭하고 여기에서 계정을 만들고 가입합니다. 회원가입을 하면 홈페이지가 보입니다.

2단계 – 이 openweather API 웹사이트에 가입한 후 홈 페이지에 표시되는 모든 항목은 때때로 홈 페이지에서 API 키를 받고 API 섹션에서 시간이 있으므로 API를 클릭합니다(메뉴에서 이미지 API에서 볼 수 있음) ) API를 클릭합니다.

3단계 – API 양식 메뉴를 클릭하면 많은 API가 있는 것을 볼 수 있지만 API Maine 페이지를 시작하면 이러한 유형의 상자(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
HTML CSS(소스 코드)를 사용하여 헤더 만들기
Otp 입력 필드 Html Css Javascript 만들기(소스 코드)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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