HTML, CSS, 바닐라 자바스크립트로 날씨 변환기를 구축하는 방법 (제2부분: 자바스크립트 추가)

년, 우리는 날씨 변환기 프로젝트를 위해 HTML 파일을 구축했다.
에서 JavaScript 기능을 구성합니다.

너는 두 번째 부분에서 무엇을 배울 것인가

document.getElementById 사용 방법

템플릿 텍스트 사용 방법

addEventListener 사용 방법

문서 사용 방법getElementById

document.getElementById 메서드는 HTML 파일의 요소에 id 이름으로 액세스할 수 있도록 합니다.
우리가 방문하고자 하는 첫 번째 요소는 input 요소입니다.index.js 파일에서 document.getElementById 방법으로 입력한 숫자에 접근하여 numInputValue이라는 변수에 분배한다.

const numInputValue = document.getElementById("number");

다음에 convert 단추를 방문하여 convertBtn 변수에 분배합니다.

const convertBtn = document.getElementById("convert");

그리고 result-div을 방문하여 result 변수에 분배한다.

const result = document.getElementById("result");

마지막으로 리셋 버튼에 액세스하여 resetBtn 변수에 할당합니다.

const resetBtn = document.getElementById("reset");

이것이 바로 우리의 코드가 지금까지 index.js 파일에 있는 모습이다.

const numInputValue = document.getElementById("number");
const convertBtn = document.getElementById("convert");
const result = document.getElementById("result");
const resetBtn = document.getElementById("reset");

온도 변환기 기능 생성하기

사용자가 convert 버튼을 클릭할 때마다 이 기능이 시작되어 사용자에게 결과를 표시합니다.
우선, temperatureConverter이라는 arrow 함수를 만듭니다.

const temperatureConverter = () => {

}

함수 내부에서value 속성에서 사용자 입력을 가져와 변수에 저장해야 합니다.
이 기능은 JavaScript에서 value 속성을 사용하여 수행할 수 있습니다.

let userInput = numInputValue.value;

다음으로 우리가 해야 할 일은 섭씨에서 화씨로의 전환을 계산하는 것이다.
이것이 바로 우리가 사용할 알고리즘이다.

(Celsius * 9/5) + 32

섭씨 userInput은 섭씨 온도를 대표하며, 우리는 Math.floor을 사용하여 계산을 아래로 가장 가까운 정수로 반올림하기를 희망한다.
우리는 이 결과를 fahrenheit이라는 변수에 분배할 것이다.

let fahrenheit = Math.floor((userInput * 9) / 5 + 32);

그리고 사용자에게 변환 결과를 보여주는 템플릿 문자열을 만들 것입니다.

const conversionString = `<p>${userInput} degrees Celsius is</p> <p>${fahrenheit} degrees Fahrenheit </p>`;

그리고 우리는 날씨 온도가 좋은지 더운지 추운지에 따라 일련의 호응을 만들 것이다.잘못된 사용자 입력에도 응답할 것입니다.

const responsesArr = [
    "Invalid input. Try again.",
    `<p class="result-text">Ohh..that's HOT<i class="fas fa-burn"></i></p>${conversionString}`,
    `<p class="result-text">Not to bad<i class="far fa-sun"></i></p> ${conversionString}`,
    `<p class="result-text">Getting colder <i class="fas fa-icicles"></i></p>${conversionString}`
  ];

변환기 기능의 마지막 부분은 if/else 문장을 만드는 것입니다. 이 문장은 입력 결과에 따라 사용자에게 표시할 정확한 응답을 결정합니다.
첫 번째 조건은 사용자가 입력을 제공하지 않았거나 사용자가 제공한 입력이 -90에서 57의 주어진 숫자 범위를 초과했는지 검사한다.
잘못된 입력이라면, innerHTML 방법으로 responsesArr의 잘못된 응답을 사용자에게 보여 드리겠습니다.

   if (userInput > 57 || userInput < -90 || userInput === "") {
        result.innerHTML = responsesArr[0];
    }

30에서 57 사이를 입력하면 "Oh h.that's HOT"메시지가 표시됩니다.

else if (userInput >= 30 && userInput <= 57) {
        result.innerHTML = responsesArr[1];
    }

20에서 29 사이를 입력하면 "나쁘지 않다"는 메시지를 사용자에게 표시합니다.

else if (userInput >= 20 && userInput <= 29) {
    result.innerHTML = responsesArr[2];
  }

19 이하의 값을 입력하면 냉각 메시지가 표시됩니다.

 else {
    result.innerHTML = responsesArr[3];
  }

이것이 바로 전체 temperatureConverter 함수의 외관이다.

const temperatureConverter = () => {
    let userInput = numInputValue.value;
    let fahrenheit = Math.floor((userInput * 9) / 5 + 32);
    const conversionString = `<p>${userInput} degrees Celsius is</p> <p>${fahrenheit} degrees Fahrenheit </p>`;
    const responsesArr = [
        "Invalid input. Try again.",
        `<p class="result-text">Ohh..that's HOT<i class="fas fa-burn"></i></p>${conversionString}`,
        `<p class="result-text">Not to bad<i class="far fa-sun"></i></p> ${conversionString}`,
        `<p class="result-text">Getting colder <i class="fas fa-icicles"></i></p>${conversionString}`
    ];

    if (userInput > 57 || userInput < -90 || userInput === "") {
        result.innerHTML = responsesArr[0];
    } else if (userInput >= 30 && userInput <= 57) {
        result.innerHTML = responsesArr[1];
    } else if (userInput >= 20 && userInput <= 29) {
        result.innerHTML = responsesArr[2];
    } else {
        result.innerHTML = responsesArr[3];
    }
};

addEventListener 메서드 사용 방법

JavaScript의 addEventListener 메서드는 특정 이벤트를 수신한 다음 해당 이벤트에 대한 함수를 실행합니다.
우리가 듣고 있는 사건은 click사건이다.사용자가 convert 단추를 눌렀을 때 temperatureConverter 함수를 실행합니다.temperatureConverter 함수의 바로 아래에 이 사건 탐지기를 추가합니다.

convertBtn.addEventListener("click", temperatureConverter);

오른쪽 아래에 있는 Go Live 버튼을 클릭하여 VS 코드의 로컬 서버를 시작합니다.

그리고 convert 버튼을 누르면 무효 메시지가 나타납니다.

지금 45를 입력하면 정확한 변환과 정보를 볼 수 있습니다.

현재 temperatureConverter 기능은 사용자가 convert 버튼을 클릭할 때만 실행됩니다.그러나 우리도 사용자가 enter키를 눌러도 결과가 나오도록 기능을 추가하기를 희망한다.
우리는 keydown 사건을 탐지하기 위해 다른 사건 탐지기를 추가할 수 있으며, temperatureConverter 키를 눌렀을 때 enter을 실행할 수 있다.

numInputValue.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    temperatureConverter(e);
  }
});

e 매개 변수는 실행 중인 이벤트 대상을 표시합니다.
사용자가 입력을 제공하지 않고 enter 키를 누르면 잘못된 메시지를 표시할 수 있습니다.

document.body.addEventListener("keydown", (e) => {
  if (e.key === "Enter" && numInputValue.value === "") {
    result.innerHTML = "Please provide an input.";
  }
});

JavaScript 코드의 마지막 부분은 재설정 함수를 만드는 것입니다.
사용자가 reset 단추를 눌렀을 때, 우리는 다른 이벤트 탐지기로 결과를 지울 수 있습니다.

resetBtn.addEventListener("click", () => {
  result.innerHTML = '<i class="fas fa-fire"></i>';
  numInputValue.value = "";
});

올바른 입력을 입력하고 재설정 버튼을 클릭합니다.결과가 성공적으로 지워진 것을 보셔야 합니다.
JavaScript 파일의 모든 코드입니다.

const numInputValue = document.getElementById("number");
const convertBtn = document.getElementById("convert");
const result = document.getElementById("result");
const resetBtn = document.getElementById("reset");

const temperatureConverter = () => {
    let userInput = numInputValue.value;
    let fahrenheit = Math.floor((userInput * 9) / 5 + 32);
    const conversionString = `<p>${userInput} degrees Celsius is</p> <p>${fahrenheit} degrees Fahrenheit </p>`;
    const responsesArr = [
        "Invalid input. Try again.",
        `<p class="result-text">Ohh..that's HOT<i class="fas fa-burn"></i></p>${conversionString}`,
        `<p class="result-text">Not to bad<i class="far fa-sun"></i></p> ${conversionString}`,
        `<p class="result-text">Getting colder <i class="fas fa-icicles"></i></p>${conversionString}`
    ];

    if (userInput > 57 || userInput < -90 || userInput === "") {
        result.innerHTML = responsesArr[0];
    } else if (userInput >= 30 && userInput <= 57) {
        result.innerHTML = responsesArr[1];
    } else if (userInput >= 20 && userInput <= 29) {
        result.innerHTML = responsesArr[2];
    } else {
        result.innerHTML = responsesArr[3];
    }
};

convertBtn.addEventListener("click", temperatureConverter);

numInputValue.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        temperatureConverter(e);
    }
});

document.body.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && numInputValue.value === "") {
        result.innerHTML = "Please provide an input.";
    }
});

resetBtn.addEventListener("click", () => {
    result.innerHTML = '<i class="fas fa-fire"></i>';
    numInputValue.value = "";
});

3부에서는 모든 CSS 스타일을 프로젝트에 추가합니다.
Final code