JavaScriptでPalindromeチェッカーを作成する方法

これは、Palindromeを検出する簡単なJavaScriptプロジェクトです.JavaScriptで作られたシンプルなPalindrome Checkerです.あなたが簡単にPalindromeを確認する方法を疑問に思っているならば、この記事へようこそ.
私は知っている人々の90 %を知っているpalindromeですが、それが何であるかを知らない多くのユーザーが使用されている.Palindromeは、実際には、単語、詩、文または同じ後方または前方を読み取る番号です.

JavaScriptのパラリンドロチェッカ

さあ、このデザインに来ましょう.これは、ディスプレイと入力ボックスの単純なプロジェクトです.入力ボックスに何かを入力すると、結果が表示されます.それがどのように働くかについて学ぶWatch its live demo.
今多分あなたはそれを作る方法を疑問に思っている.このJavaScriptのPalindromeチェッカーは非常に簡単ですが、いくつかの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チェッカーの基本構造は設計されます.ボックスは、min-width: 450pxと背景色を使用します.そうすると、入力ボックスは設計される.入力ボックスのサイズはpadding: 13px 7pxに依存します.

ここでは、ボタンの幅を使用しています.

ディスプレイは設計される.結果ボックスのサイズはコンテンツの量によって異なります.

/*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ラインを理解する問題はありません.
HTMLでこのPalindromeプログラムを好きにしてください.私は上記のJavaScript Palindromeチェッカーを共有しました.