HTML, CSS, 바닐라 자바스크립트를 사용하여 날씨 변환기를 구축하는 방법(제1부분 - 기본 설정)

25238 단어 webdevtutorialjavascriptbeginners
이 강좌에서 날씨 변환기를 어떻게 구축하는지 배울 것입니다. 이것은 사용자의 입력을 받아들여 섭씨에서 화씨로 전환하는 것입니다.
Final project
사용자가 올바른 입력을 제공하지 않을 때 오류 메시지를 출력하는 방법도 배울 것입니다.

구축 프로젝트를 완료하면 GitHub 페이지에 배치하는 방법을 알려 드리겠습니다.
이 프로젝트의 생각은 첫 번째freeCodeCamp Basic Algorithm challenge에 기초를 두고 있다.
이것은 일련의 문장으로 네 부분으로 나눌 것이다.

1부에서 뭘 배울 거예요?

  • Visual Studio 코드 설치 및 사용 방법
  • VS 코드 터미널
    • 을 사용하여 프로젝트 파일을 만드는 방법
  • 프로젝트에 HTML 구조를 구축하는 방법
  • 글씨체가 좋은 아이콘을 어떻게 사용하는가

    • 선결 조건


    HTML, CSS, 일반 자바스크립트에 대해 기본적으로 알고 있어야 합니다.이것은 초보자들을 대상으로 그들의 기술을 실천하기를 기대하는 것이다.

    Visual Studio 코드 설치 방법


    Visual Studio 코드를 사용하여 프로젝트를 구축합니다.
    원한다면 다른 코드 편집기를 자유롭게 사용할 수 있습니다.
    먼저 VS 코드 공식 웹 사이트https://code.visualstudio.com/를 방문하십시오.

    VS 코드를 장치에 다운로드할 수 있는 옵션을 보셔야 합니다.

    나열된 장치가 표시되지 않으면 다운로드 버튼의 오른쪽에 있는 화살표를 클릭하여 장치를 찾습니다.

    거기서부터 그것은 자동으로 너의 컴퓨터에 다운로드되기 시작할 것이다.

    다운로드가 자동으로 시작되지 않으면 직접 다운로드 링크를 클릭하세요.

    다운로드한 파일을 클릭하여 설치 지침을 찾습니다.
    설치 후 VS 코드 아이콘을 클릭하여 응용 프로그램을 엽니다.

    환영 페이지를 보셔야 합니다.

    Visual Studio 코드 설치 확장


    VS 코드 확장은 프로젝트 개발 과정에서 사용되는 유용한 도구입니다.
    확장 탭은 VS 코드의 왼쪽에 있습니다.

    이 아이콘을 클릭하고 검색 기능을 사용하여 Live Server 확장을 검색합니다.

    그리고 파란색 설치 버튼을 눌러주세요.

    이 확장자는 로컬 서버를 시작하고 브라우저에서 웹 페이지의 외관을 볼 수 있도록 합니다.파일을 변경할 때마다 자동으로 서버를 다시 시작합니다.

    터미널을 사용하여 프로젝트 파일과 폴더를 만드는 방법


    터미널을 사용하여 컴퓨터에 파일과 폴더를 만드는 방법을 보여 드리겠습니다.초보자에게 터미널에서 기본 명령을 어떻게 실행하는지 이해하는 것은 매우 중요하다.
    Visual Studio 코드에서 상단 메뉴로 이동한 다음 터미널 > 새 터미널 클릭

    너의 단말기는 마땅히 이렇게 해야 한다.

    데스크톱에 프로젝트 폴더를 만들고 싶습니다.우리는 우선 cd (디렉터리 변경) 데스크톱에 가야 한다.
    터미널에서 이 명령을 실행하고 enter 키를 누르십시오.
    cd Desktop
    너는 우리가 지금 탁자 위에 있는 것을 보아야 한다.

    현재 우리는 weather-converter-project (make directory) 명령을 사용하여 mkdir 라는 폴더를 만들어야 한다.
    mkdir weather-converter-project
    데스크톱으로 이동하면 새 폴더를 볼 수 있습니다.

    이 폴더에 HTML, CSS, 자바스크립트 파일 세 개를 추가해야 합니다.
    터미널에서 cd(디렉터리 변경)는 weather-converter-project입니다.
    cd weather-converter-project
    너는 우리가 지금 날씨 프로젝트 폴더에 있는 것을 보아야 한다.
    touch 명령을 사용하여 index.html, styles.css 및 index.js 파일을 추가할 수 있습니다.
    touch index.html styles.css index.js
    만약 네가 이 폴더에 들어간다면, 너는 안에 있는 세 개의 파일을 볼 수 있을 것이다.
    X 아이콘을 클릭하여 터미널을 닫습니다.

    그런 다음 파일 > 폴더를 열고 프로젝트 폴더를 선택합니다.

    VS 코드에서 모든 프로젝트 파일을 볼 수 있을 것입니다.

    HTML 구조 작성 방법


    HTML 템플릿 코드 추가


    이제 Visual Studio 코드를 사용하여 HTML 페이지를 구성하도록 설정했습니다.index.html 파일을 클릭하여 VS 코드에서 엽니다.
    !를 입력하고 리턴 버튼을 누르면 HTML boilerplate code를 받을 수 있습니다.

    이것은 아마도 너의 시작 코드일 것이다.
    <!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>document</title>
  </head>

  <body>

  </body>

</html>
    프로젝트의 이름을 표시하기 위해서 title 표시의 내용을 변경합니다.
    <title>Celsius to Fahrenheit Converter</title>
    그런 다음 CSS 파일을 HTML 파일에 링크합니다.head 태그에 스타일시트link 태그를 추가합니다.
    <link rel="stylesheet" href="styles.css">
    그런 다음 JavaScript 파일을 HTML 파일에 링크합니다.body 태그에 script 파일에 index.js 태그를 추가합니다.
    <script src="index.js"></script>
    주체 탭에 제목에 h1 탭을 추가합니다.이 h1 표시는 클래스 이름 title 을 포함할 것이다.
    <h1 class="title">Celsius to Fahrenheit</h1>
    지금까지 우리의 코드는 마땅히 이렇게 해야 한다.
    <!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>Celsius to Fahrenheit Converter</title>

    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h1 class="title">Celsius to Fahrenheit</h1>

    <script src="index.js"></script>
  </body>

</html>

    로컬 서버 시작


    지금까지 브라우저에서 웹 페이지가 어떤 모습인지 로컬 서버를 시작합니다.
    오른쪽 아래에서 Go Live 단추를 볼 수 있습니다. 이것은 선택한 브라우저에서 새 탭을 열 것입니다.

    이 옵션이 표시되지 않으면 HTML 문서를 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server를 클릭합니다.

    현재 브라우저에서 저희 페이지를 볼 수 있을 것입니다.

    입력, 재설정 및 변환 버튼 추가

    h1 표기 아래에 div라는 클래스를 만듭니다card.
     <div class="card">

 </div>
    이 div에 p 표시를 추가합니다 id는 message이고 텍스트는'-90과 57 사이의 숫자를 입력하십시오'입니다.우리가 -90과 57이라는 두 숫자를 사용하는 것은 기록 이래 가장 낮고 가장 높은 기온이기 때문이다.
     <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
 </div>
    p 표기 아래에 다른 div 클래스를 만듭니다. 이 클래스의 이름은 input-container입니다.
     <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
    <div class="input-container">

    </div>
 </div>
    input-container에 이 숫자 입력을 추가합니다.
      <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
    <div class="input-container">
      <input placeholder="15&deg;" type="number" value="" name="degrees" id="number" min="-90" max="57">
    </div>
  </div>
    자리 표시자에 대해 학위 기호를 표시하려면 HTML 엔티티(15&deg;를 사용합니다.
    값 ((value="") 은 사용자가 잠시 후에 제공하기 때문에 비어 있을 것입니다.input 아래에 button를 추가하는데 그 중 하나id는 convert이고 다른 종류는 btn이다.
    <button class="btn" id="convert">Convert</button>
    button 아래에 리셋 단추를 추가합니다 id는 reset이고 종류는 btn입니다.
    <button class="btn" id="reset" type="reset">Reset</button>
    이것이 전체input-container의 모습이다.
    <div class="input-container">
      <input placeholder="15&deg;" type="number" value="" name="degrees" id="number" min="-90" max="57">
      <button class="btn" id="convert">Convert</button>
      <button class="btn" id="reset" type="reset">Reset</button>
</div>
    input-container 아래에 div를 만들고 result-div라는 클래스와 id라는 클래스result를 포함한다.
    <div class="result-div" id="result">

</div>
    그중div은 사용자의 입력에 따라 변환 결과를 표시하는 곳이다.

    글꼴 아이콘 사용 방법


    우리는 전환 결과와 일치하는 다른 날씨 아이콘을 사용하기를 희망합니다.

    먼저 이 글꼴을 HTML 페이지의 head 섹션에 추가합니다.
    <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>Celsius to Fahrenheit Converter</title>

  <!--this is our CSS stylesheet-->
  <link rel="stylesheet" href="styles.css">

  <!--this is the font awesome cdn-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
    integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
    results-div 내에 Fire 아이콘 라벨을 배치합니다.
    <div class="result-div" id="result">
      <i class="fas fa-fire"></i>
</div>
    이것이 전체 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>Celsius to Fahrenheit Converter</title>

  <!--this is our CSS stylesheet-->
  <link rel="stylesheet" href="styles.css">

  <!--this is the font awesome cdn-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
    integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <h1 class="title">Celsius to Fahrenheit</h1>

  <div class="card">
    <p id="message">Enter a number between -90 and 57</p>
    <div class="input-container">
      <input placeholder="15&deg;" type="number" value="" name="degrees" id="number" min="-90" max="57">
      <button class="btn" id="convert">Convert</button>
      <button class="btn" id="reset" type="reset">Reset</button>
    </div>

    <div class="result-div" id="result">
      <i class="fas fa-fire"></i>
    </div>
  </div>

  <script src="index.js"></script>
</body>

</html>
    이것이 브라우저에서 결과의 외관입니다.

    에서 날씨 변환기에 모든 기능을 추가한 JavaScript 파일을 구축합니다.
    Final code
    [Rails] Webpacker gem은
    LeetCode 59. Spiral Matrix II(헬리컬 매트릭스 II java)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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