Name :Mohammed Noman Roll No : 270
Experiment no 13 D
Program :
<!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>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
}
input, button {
padding: 10px;
margin: 10px;
width: 300px;
}
.message {
margin-top: 20px;
font-weight: bold;
}
.success {
color: green;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>Palindrome Checker</h1>
<p>Enter a word or phrase to check if it's a palindrome:</p>
<input type="text" id="inputString" placeholder="Enter text">
<button onclick="checkPalindrome()">Check</button>
<div id="result" class="message"></div>
<script>
// User-defined function to check if a string is a palindrome
function isPalindrome(str) {
// Remove spaces, punctuation, and convert to lowercase
const cleanedStr = str.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
// Reverse the cleaned string
const reversedStr = cleanedStr.split("").reverse().join("");
// Check if the original cleaned string matches the reversed one
return cleanedStr === reversedStr;
}
// Function to handle input and output
function checkPalindrome() {
const input = document.getElementById("inputString").value;
const resultDiv = document.getElementById("result");
if (!input.trim()) {
resultDiv.className = "message error";
resultDiv.innerText = "Please enter a valid string.";
return;
}
// Call the user-defined function
const isPal = isPalindrome(input);
// Display the result
if (isPal) {
resultDiv.className = "message success";
resultDiv.innerText = `"${input}" is a palindrome!`;
} else {
resultDiv.className = "message error";
resultDiv.innerText = `"${input}" is not a palindrome.`;
}
}
</script>
</body>
</html>
Output :
