In this tutorial we see about Palindrome checker which checks the presence of a palindrome in a string.
Palindrome Checker using Javascript
A palindrome checker is a tool that verifies whether a given string or word reads the same backward as forward. In other words, it checks if the sequence of characters remains unchanged when reversed. Palindromes can be single words, phrases, or even entire sentences.
1. HTML :
- We set up the basic structure of our web page, including a header, input field, and a button.
- We have a input field which require a information to entered to perform the check whether it is palindrome or not.
Code below :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome Checker</title>
<link rel="stylesheet" type="text/css" href="palindrome.css">
</head>
<body>
<div class="container_palindrome">
<h1>Palindrome Checker</h1>
<input id="input" type="text" placeholder="Type something" />
<button onclick="check()">Check</button>
<script src="palindrome.js"></script>
</div>
</body>
</html>
2. CSS:
- We customize colors, fonts, margins, and other visual elements.
- Used the div element to change the alignment and view of the page.
Code below:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #caf0f8;
}
.container_palindrome{
background-color: #a2d2ff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
border: 10px solid #90e0ef;
}
3. Javascript file :
- We compare the cleaned string with its reversed version.
- Informs the user whether the input is a palindrome or not.
const input = document.getElementById("input")
function reverseString(str) {
return str.split("").reverse().join("")
}
function check() {
const value = input.value
const reverse = reverseString(value)
if (value === reverse) {
alert("Yes , Its a Palindrome!")
} else {
alert("Its not a Palindrome!")
}
input.value = ""
}
Output:
Here we say the use of the palindrome checker to check the presence of palindrome in the field.