Typescript를 사용하여 이진수에서 십진법 앱으로. #beginner2고급

11913 단어 beginnerstypescriptjavascriptbeginner2advanced
#beginner2advanced 챌린지의 초보자 부문 첫 번째 프로젝트입니다.

응용 프로그램 요구 사항을 찾을 수 있습니다here.

이 문서에서는 사용자가 임의의 순서로 최대 8개의 이진수(0과 1) 길이의 숫자를 입력할 수 있고 입력 숫자에 해당하는 십진수를 표시하는 웹 앱을 만들 것입니다.

참고: 이 프로젝트는 HTML, CSS 및 Typescript를 사용하여 생성됩니다.

응용 프로그램의 최종 결과는 다음과 같습니다.

binary-to-decimal.gif

HTML 및 CSS 파일 만들기



먼저 아래와 같이 index.html와 style.css 파일을 생성합니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bin Dec</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div>
      <div id="dec">Example</div>
      <input id="binary-input" type="text" />
      <div id="error"></div>
    </div>
    <script src="main.js"></script>
  </body>
</html>


그런 다음 이 간단한 스타일시트를 포함하여 애플리케이션의 스타일을 지정합니다.

/* style.css */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#binary-input {
  border: 1px solid #000;
  border-radius: 10px;
  height: 35px;
  width: 200px;
  padding: 0 20px;
}

#binary-input:focus {
  outline: 2px solid black;
}

#error {
  text-align: center;
  margin-top: 10px;
  color: red;
}

#dec {
  text-align: center;
  margin-bottom: 10px;
}


타이프스크립트 코드




// main.ts
const binInput = <HTMLInputElement>document.getElementById("binary-input");
const errorElem = <HTMLDivElement>document.getElementById("error");
const decElem = <HTMLDivElement>document.getElementById("dec");

// function to convert from binary to decimal
const bin2dec = (number: string) => {
  return parseInt(number, 2);
};

let timeoutMan: NodeJS.Timeout;

// display an error if any and remove the display in 0.5 second
const displayError = (error: string) => {
  errorElem.textContent = error;
  if (timeoutMan) {
    clearTimeout(timeoutMan);
  }
  timeoutMan = setTimeout(() => {
    errorElem.innerText = "";
  }, 1000 * 0.5);
};

const is0or1 = (key: string) => {
  return key === "0" || key === "1";
};

const validateError = (key: string) => {
  if (is0or1(key)) {
    return key;
  } else {
    displayError("input either 0 or 1");
    return "";
  }
};

const displayDecimal = (number: string) => {
  decElem.innerText = `Decimal: ${bin2dec(number)}`;
};

// the state of input coming in our project
let inputText = "";

binInput.addEventListener("keydown", (event) => {
  event.preventDefault();
  if (event.key === "Backspace") {
    inputText = inputText
      .split("")
      .slice(0, inputText.length - 1)
      .join("");

    binInput.value = inputText;
    displayDecimal(inputText);
  } else {
    if (binInput.value.length >= 8) {
      return displayError("cannot be above 8 digits");
    }
    inputText += validateError(event.key);
    binInput.value = inputText;
    displayDecimal(inputText);
  }
});


결론



읽어 주셔서 감사합니다. 선택한 폴더 구조로 컴파일하고 생성된 JavaScript 코드를 index.html 에 포함하도록 Typescript를 구성할 수 있습니다.

이 작업을 어떻게 수행했는지 확인할 수 있습니다repository.

이 기사를 읽는 것이 즐거우면 buying me a coffee을 고려할 수 있습니다.
에지 검출 (라플라시안, 소벨, 캐니)
Python을 사용하여 대량으로 이미지를 편집하는 방법(코드 20줄 미만)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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