JavaScript에서 Palindrome 검사기를 만드는 방법

Palindrome을 감지하는 간단한 JavaScript 프로젝트입니다. JavaScript로 만든 간단한 Palindrome Checker입니다. Palindrome을 쉽게 식별하는 방법이 궁금하시다면 이 기사에 오신 것을 환영합니다.

90%의 사람들이 Palindrome이 무엇인지 알고 있는 것으로 알고 있지만, Palindrome이 무엇인지, 어떤 용도로 사용되는지 모르는 사용자가 많습니다. Palindrome은 실제로 단어, 구절, 문장 또는 앞뒤로 같은 숫자를 읽습니다.

JavaScript의 Palindrome 검사기

이제 이 디자인으로 갑시다. 이것은 디스플레이와 입력 상자가 있는 간단한 프로젝트입니다. 입력란에 무언가를 입력하면 디스플레이에서 결과를 볼 수 있습니다. Watch its live demo 작동 방식을 알아보십시오.

이제 어떻게 만드는지 궁금하실 것입니다. 이 JavaScript Palindrome Checker는 만들기가 매우 쉽지만 이를 위해서는 약간의 JavaScript를 알아야 합니다.

HTML 코드

다음 html은 기본 구조와 정보를 추가합니다.

먼저 결과를 볼 수 있는 영역이 생성되었습니다. 입력한 단어가 Palindrome인지 확인할 수 있습니다.

그러면 단어나 숫자를 입력할 입력 상자가 생성됩니다.

마지막에 프로젝트를 활성화하는 버튼이 있습니다.

<!--Basic structure-->
<div class="container">
<!--result box-->
  <p id="result"></p>
<!--input box -->
  <input type="text" id="input-text" placeholder="Enter a word to check">
<!-- submit button -->
  <button id="btn">Check</button>
</div>

CSS 코드

이제 CSS를 디자인해야 합니다. 먼저 웹 페이지는 일부 CSS로 디자인되었습니다.

그러면 Palindrome Checker의 기본 구조가 설계됩니다. 상자는 min-width: 450px 및 배경색: #ffffff를 사용합니다.

그러면 입력 상자가 디자인됩니다. 입력 상자의 크기는 padding: 13px 7px 에 따라 다릅니다.

여기에서는 버튼의 너비를 130px로, 배경색은 파란색으로 사용했습니다.

마지막에 디스플레이가 설계됩니다. 결과 상자의 크기는 콘텐츠의 양에 따라 다릅니다.

/*Basic design of webpage*/
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  background-color: #1f85e0;
}
/*Basic structure of Palindrome Checker*/
.container{
  width: 35%;
  min-width: 450px;
  background-color: #ffffff;
  padding: 50px 35px;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 20px 25px rgba(0,0,0,0.18);
}
.container *{
  font-family: "DM Sans", sans-serif;
  outline: none;
}
/*Design the input box*/
input{
  width: 100%;
  border: none;
  border: 2px solid #d5d5d5;
  padding: 13px 7px;
  font-weight: 400;
}
input:focus{
  border-bottom: 2px solid #b156fe;
}
/*Design of submit button*/
button{
  width: 130px;
  padding: 11px;
  background-color: #185bad;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 400;
  margin-top: 30px;
  font-size: 17px;
}
/*Design the result area*/
p{
  text-align: center;
  color: #073b8c;
  font-weight: 500;
  padding: 30px;
  margin-bottom: 40px;
  font-size: 22px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
}

자바스크립트 코드

Palindrome Checker JavaScript 디자인 작업은 끝났지만 실제 작업은 아직 남아있습니다.

활성화하려면 JavaScript를 사용해야 합니다. 하지만 초보자도 걱정할 필요가 없습니다. 나는 필요한 모든 설명을 했다.

먼저 입력 상자의 값이 수집되어 'txt'에 저장됩니다.

그런 다음 일부 계산에서는 입력 값이 Palindrome인지 여부를 확인합니다.

끝에 'textContent' 결과를 디스플레이에 표시하도록 배치했습니다.

document.getElementById("btn").addEventListener("click",function(){
//Input value has been collected
  let txt = document.getElementById("input-text").value;
  checkPalindrome(txt);
});
//I have given all the calculations below
function checkPalindrome(txt){
//'a-zA-Z0-9' will match all alphanumeric characters, i.e. lower case alphabet, upper case alphabet, and all numbers
//The "g" modifier specifies a global match.
  let txt_new = txt.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
  let len = txt_new.length;
//'len' Indicates the total number of characters present in it
  let halfLen = Math.floor( len/2 );
  let result =document.getElementById("result");
  let i;

  for( i = 0; i < halfLen; i++){
// !== is strict inequality operator
//strict inequality operator checks whether its two operands are not equal, returning a Boolean result.
      if( txt_new[i] !== txt_new[len-1-i]){
          result.textContent = "Sorry! Not a palindrome 😔";
          return;
      }
//textContent property sets or returns the text content of the specified node
      result.textContent = "Yes! It's a palindrome 😍"
  }
}

위의 JavaScript 줄을 이해하는 데 문제가 없기를 바랍니다.
Please comment html에서 이 palindrome 프로그램이 마음에 드는지. 위에서 이 JavaScript Palindrome Checkerlive preview link를 공유했습니다.