JavaScript를 사용하여 날씨 애플리케이션을 만드는 방법

이 문서에서는 JavaScript를 사용하여 날씨 응용 프로그램을 만드는 방법을 학습합니다.이 JavaScript 날씨 응용 프로그램은 장소의 날씨를 파악하는 데 도움을 줄 것입니다.
만약 이 입력 상자에 도시의 이름을 입력한다면, 온도, 풍속, 하늘 조건과 같은 모든 정보를 아래 상자에서 찾을 수 있습니다.
✅ 현장 미리보기 보기 보기👉👉 Weather App JavaScript
이 항목은 API 링크의 도움말 아래 작성되었습니다.이 링크를 통해 모든 정보는 "가져오기"방법으로 다른 곳에서 수집됩니다.먼저 HTML 및 CSS를 사용하여 기본 구조를 작성했습니다.그리고 나는 자바스크립트로 그것을 실현했다.
이 날씨 응용 프로그램을 만들려면 HTML CSS JavaScript에 대한 기본적인 지식이 필요합니다.여기서 나는 한 걸음 한 걸음 교과서와 동영상을 공유했다.
여기에 두 개의 상자가 있다.첫 번째 상자에서 도시 이름과 제출 단추를 입력할 수 있는 곳이 있습니다.결과는 두 번째 상자에서 볼 수 있다.
첫 번째 상자에는 입력 상자와 제출 단추가 포함되어 있습니다.이 상자에 도시 이름을 입력한 다음 '제출' 단추를 누르면 아래 상자에서 모든 정보를 볼 수 있습니다.

간단한 날씨 응용 프로그램의 HTML 코드

다음은 이 설계를 만드는 데 필요한 HTML 코드입니다.여기서 나는 한 걸음 한 걸음 비밀번호를 풀었다.코드를 원한다면 download source code 할 수 있습니다.
기본 구조
나는 아래 코드를 사용하여 기본 구조를 만들었다.기본 구조는 두 개의 상자가 있는 구역이다.

<div class="container-fluid">
   <section class="main">

   </section>
</div>

첫상자
이제 첫 번째 상자를 만드는 데 필요한 HTML 코드가 추가되었습니다.여기에 두 개의 입력 함수를 사용했다.첫 번째 입력은 도시 이름을 입력하고, 두 번째 입력은 단추를 만드는 것이다.

<section class="inputs">

   <input type="text" placeholder="Enter any city..." id="cityinput">
   <input type="submit" value="Submit" id="add">

   <button placeholder="submit" id="add"></button>

</section>

두 번째 케이스 또는 모니터
이제 두 번째 상자, 즉 모니터를 제작할 준비가 되어 있다.그곳에서 날씨와 관련된 정보를 찾을 수 있다.여기는 h2 라벨을 사용하고 3단 라벨을 사용합니다.
도시의 이름을 입력하면 h2에서 찾을 수 있습니다.기타 세 단락은 하늘 조건, 온도와 풍속을 포함한다.

<section class="display">
  <div class="wrapper">
      <h2 id="cityoutput"></h2>
      <p id="description"></p>
      <p id="temp"></p>
      <p id="wind"></p>
  </div>
</section>

JavaScript 날씨 응용 프로그램의 CSS 코드

위에서 나는 필요한 HTML 코드를 추가해서 만들었다Simple Weather application.이제 CSS 코드를 사용하여 설계를 수행해야 합니다.다음 CSS 코드를 사용하여 기본을 설계했습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #448aff;
}

.container-fluid{
 width: 410px;
 margin: 50px auto;
 padding: 10px;
}

현재 첫 번째 상자는 이미 설계되었다.나는 흰색을 상자의 배경색으로 하고 padding: 2rem 0 2rem 0로 상자 주위에 공간을 만들었다.

.inputs {
    padding: 2rem 0 2rem 0;
    text-align: center;
    justify-content: center;
    background: white;
}

도시 이름을 입력하는 곳은 다음과 같은 코드로 설계되었다.여기에는 네모난 테두리height: 3.5rem,width: 20rem와 투명한 색을 사용했다.

.inputs input[type="text"] {
    height: 3.5rem;
    width: 20rem;
    background: #212121;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px;
    border: none;
    background-color: transparent;
    border: 2px solid #c2c2c2;
    border-radius: 2px;
    margin-right:4px ;
}

다음 CSS 코드를 사용하여 submit 버튼을 설계했습니다.나는 버튼height: 3.2rem, width: 6.5rem과 배경색 파란색을 사용했다.

.inputs input[type="submit"] {
    height: 3.2rem;
    width: 6.5rem;
    background: #0a67ca;
    font-weight: bold;
    color: white;
    font-size: 1.2rem;
    margin-top: 20px;
    border: none;
    border-radius: 2px;
}

이제 두 번째 상자 (즉 표시) 를 만드는 데 필요한 CSS 코드를 추가했습니다.이 모니터는 width: 400px 및 height: 45vh를 사용합니다.

.display {
    text-align: center;
    width: 400px;
    color: #16a864;
}
.wrapper {
    margin: 0 9rem;
    background-color: white;
    height: 45vh;
    margin: 50px auto;
    border-radius: 2px;
}

다음 코드는 이 상자의 모든 텍스트 정보를 설계하는 데 도움을 줍니다.이 정보는 더 이상 볼 수 없지만
이것은 JavaScript를 사용한 후에 볼 수 있습니다.하지만 지금은 필요한 CSS 코드로 설계를 했습니다.

.wrapper h2{
    padding: 5px 0;
    text-align: center;
    background: #0548b5;
    color: white;
    font-family: sans-serif;
  }
  .wrapper p{
    margin:20px 50px;
    margin-right: 20px;
    text-align: left;
    color: #04214c;
    font-size:23px;
  }

  .wrapper h2 span{
    font-size: 26px;
    color: #9beefb;
  }
    .wrapper p span{
    color: #90006e;
    font-size: 25px;
  }

기본 날씨 응용 프로그램의 JavaScript 코드

나는 위의 HTML과 CSS 코드로 이 기본적인 날씨 응용 프로그램을 설계했다.지금은 JavaScript로 그것을 실현할 때이다.
다음은 모든 자바스크립트와 코드 아래의 모든 정보를 보여 줍니다.나는 아래의 해석이 네가 이해하는 데 도움을 줄 수 있기를 바란다.만약 문제가 있다면 아래의 동영상 강좌를 빌릴 수 있다.

//Now we need to determine the constant of one of the id functions. Because no html function can be used directly in JavaScript.
var inputval = document.querySelector('#cityinput')
var btn = document.querySelector('#add');
var city = document.querySelector('#cityoutput')
var descrip = document.querySelector('#description')
var temp = document.querySelector('#temp')
var wind = document.querySelector('#wind')


apik = "3045dd712ffe6e702e3245525ac7fa38"

//kelvin to celcious. 1 Kelvin is equal to -272.15 Celsius.

function convertion(val){
    return (val - 273).toFixed(2)
}
//Now we have to collect all the information with the help of fetch method

    btn.addEventListener('click', function(){

//This is the api link from where all the information will be collected

        fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputval.value+'&appid='+apik)
        .then(res => res.json())

         //.then(data => console.log(data))

        .then(data => {

//Now you need to collect the necessary information with the API link. Now I will collect that information and store it in different constants.

            var nameval = data['name']
            var descrip = data['weather']['0']['description']
            var tempature = data['main']['temp']
            var wndspd = data['wind']['speed']
//Now with the help of innerHTML you have to make arrangements to display all the information in the webpage.
            city.innerHTML=`Weather of <span>${nameval}<span>`
            temp.innerHTML = `Temperature: <span>${ convertion(tempature)} C</span>`
            description.innerHTML = `Sky Conditions: <span>${descrip}<span>`
            wind.innerHTML = `Wind Speed: <span>${wndspd} km/h<span>`

        })

//Now the condition must be added that what if you do not input anything in the input box.
        .catch(err => alert('You entered Wrong city name'))
    })
//If you click on the submit button without inputting anything in the input box or typing the wrong city name then the above text can be seen.

위의 강좌와 동영상이 제가 이 자바스크립트 날씨 프로그램을 어떻게 만들었는지 알아보는 데 도움을 줄 수 있기를 바랍니다.만약 네가 할 말이 있다면 반드시 평론에서 나에게 알려줘야 한다.
관련 게시물:

JavaScript Weather App

Todo List JavaScript

Stopwatch using JavaScript

Javascript Age Calculator

Random Password Generator with JavaScript

Automatic Image Slider in Html CSS

Sidebar Menu Using HTML CSS

만약 당신이 이 교과서에서 약간의 것을 배웠다면, 이 문장을 좋아하세요.간단한 날씨 프로그램을 만들 수 있습니다.
너는 나의 블로그를 방문해서 더 많은 유사한 강좌를 얻을 수 있다.😊
download the source code