Bir palindrom, ileri ile aynı şekilde geriye doğru okuyan bir kelime, kelime öbeği veya cümledir, Örn. seviye, ödünç al veya çal, 1234321. My palindrome checker'da kullanıcılar, palindromu kontrol et düğmesine tıklayarak metin veya sayı girebilir ve girilen değerin palindrom olup olmadığını kontrol edebilir.
JavaScript'te Palindrome Checker [Kaynak Kodları]
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Palindrome Checker in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header>
<h1>Palindrome Checker</h1>
<p>A palindrome is a word or phrase that reads the same backwards as forwards, e.g. level, refer.</p>
</header>
<div class="inputs">
<input type="text" spellcheck="false" placeholder="Enter text or number">
<button>Check Palindrome</button>
</div>
<p class="info-txt"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Şimdi CSS Kodlarını ekleyelim.
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #AA57CC;
}
::selection{
color: #fff;
background: rgb(170,87,204,0.8);
}
.wrapper{
max-width: 500px;
background: #fff;
border-radius: 7px;
padding: 20px 25px 15px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
header h1{
font-size: 27px;
font-weight: 500;
}
header p{
margin-top: 5px;
font-size: 18px;
color: #474747;
}
.inputs{
margin: 20px 0 27px;
}
.inputs input{
width: 100%;
height: 60px;
outline: none;
padding: 0 17px;
font-size: 19px;
border-radius: 5px;
border: 1px solid #999;
transition: 0.1s ease;
}
.inputs input::placeholder{
color: #999999;
}
.inputs input:focus{
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.inputs input:focus::placeholder{
color: #bebebe;
}
.inputs button{
width: 100%;
height: 56px;
border: none;
opacity: 0.7;
outline: none;
color: #fff;
cursor: pointer;
font-size: 17px;
margin-top: 20px;
border-radius: 5px;
pointer-events: none;
background: #AA57CC;
transition: opacity 0.15s ease;
}
.inputs button.active{
opacity: 1;
pointer-events: auto;
}
.info-txt{
display: none;
font-size: 19px;
text-align: center;
margin-bottom: 18px;
}
.info-txt span{
color: #AA57CC;
}
@media (max-width: 520px) {
.wrapper{
padding: 17px 20px 10px;
}
header h1{
font-size: 25px;
}
header p{
font-size: 16px;
}
.inputs input{
height: 54px;
font-size: 17px;
}
.inputs button{
height: 50px;
font-size: 16px;
margin-top: 17px;
}
.info-txt{
font-size: 18px;
}
}
Şimdi son olarak JavaScript kodlarını ekleyelim.
const txtInput = document.querySelector(".inputs input"),
checkBtn = document.querySelector(".inputs button"),
infoTxt = document.querySelector(".info-txt");
let filterInput;
checkBtn.addEventListener("click", () => {
let reverseInput = filterInput.split("").reverse().join("");
infoTxt.style.display = "block";
if(filterInput != reverseInput) {
return infoTxt.innerHTML = `No, '${txtInput.value}' isn't a palindrome!`;
}
infoTxt.innerHTML = `Yes, '${txtInput.value}' is a palindrome!`;
});
txtInput.addEventListener("keyup", () => {
filterInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, "");
if(filterInput) {
return checkBtn.classList.add("active");
}
infoTxt.style.display = "none";
checkBtn.classList.remove("active");
});
Bütün işlemler bu kadar demo sayfamız aşağıdadır.