Scribd
Upload
4K views4 pages

Build A Palindrome Checker

This document contains code for a web application that checks if a word or phrase is a palindrome. The application has an input field where the user can enter text, a button to check if it is a palindrome, and a results div that will display the output. There is also some explanatory text that defines what a palindrome is. The JavaScript code handles the input, runs the check, and displays the output.

Uploaded by

John Kesh Mahugu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4K views4 pages

Build A Palindrome Checker

This document contains code for a web application that checks if a word or phrase is a palindrome. The application has an input field where the user can enter text, a button to check if it is a palindrome, and a results div that will display the output. There is also some explanatory text that defines what a palindrome is. The JavaScript code handles the input, runs the check, and displays the output.

Uploaded by

John Kesh Mahugu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

** start of undefined **

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>The Palindrome Checker</title>


<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="container">
<h2> PALINDROMATCH</h2>
<h1 class="title">Is it a Palindrome?</h1>
<div class="palindrome-div">
<label for="text-input"
> Enter Keyword to check for a palindrome:
</label>
<input class="palindrome-input" id="text-input" value="" type="text"
placeholder="type here"/>
<button class="palindrome-btn" id="check-btn">Check It</button>
<div class="results-div hidden" id="result"></div>
</div>
<div class="palindrome-definition-div">
<p class="palindrome-definition">
<span role="img" aria-label="light-bulb">&#128161;</span>
A <dfn>palindrome</dfn> is a word or sentence that's spelled the same
way both forward and backward, ignoring punctuation, case, and
spacing.
</p>
</div>
</main>
<script src="script.js"></script>
</body>
</html>

** end of undefined **

** start of undefined **

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #230a0a;
color: #ffffff;
}

.container {
width: 100%;
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.freecodecamp-logo {
height: 30px;
margin-bottom: 20px;
}

.title {
text-align: center;
padding: 10px 0;
font-size: 2.5rem;
margin-bottom: 20px;
}

.palindrome-div {
width: min(100vw, 450px);
min-height: 100px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 20px;
margin: 10px 0;
background-color: white;
box-shadow: 0 6px 6px #ad000e;
}

label {
color: #0a0a23;
margin-bottom: 20px;
}

.palindrome-btn {
width: 90px;
border: none;
padding: 10px;
border-radius: 15px;
background-color: #c71b62;
color: #fff;
cursor: pointer;
}

.palindrome-input {
height: 30px;
width: 250px;
text-align: center;
font-size: 1.2rem;
margin: 10px;
border: none;
border-bottom: 2px solid #c71b62;
}

.palindrome-input:focus {
border-bottom: 3px solid #c71b62;
}

.palindrome-input::placeholder {
text-align: center;
}

.user-input {
font-size: 1.4rem;
margin-top: 10px;
text-align: center;
}

.results-div {
overflow-y: auto;
word-wrap: break-word;
min-height: 50px;
color: maroon;
}

.hidden {
display: none;
}

.palindrome-definition-div {
width: min(100vw, 450px);
font-size: 1.3rem;
min-height: 140px;
background-color:maroon;
margin-top: 20px;
padding: 20px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}

.palindrome-definition {
vertical-align: middle;
text-align: center;
}

** end of undefined **

** start of undefined **

const userInput = document.getElementById('text-input');


const checkPalindromeBtn = document.getElementById('check-btn');
const resultDiv = document.getElementById('result');

const checkForPalindrome = input => {


const originalInput = input; // Store for later output

if (input === '') {


alert('Please input a value');
return;
}

// Remove the previous result


resultDiv.replaceChildren();

const lowerCaseStr = input.replace(/[^A-Za-z0-9]/gi, '').toLowerCase();


let resultMsg = `<strong>${originalInput}</strong> ${
lowerCaseStr === [...lowerCaseStr].reverse().join('') ? 'is' : 'is not'
} a palindrome.`;

const pTag = document.createElement('p');


pTag.className = 'user-input';
pTag.innerHTML = resultMsg;
resultDiv.appendChild(pTag);

// Show the result.


resultDiv.classList.remove('hidden');
};

checkPalindromeBtn.addEventListener('click', () => {
checkForPalindrome(userInput.value);
userInput.value = '';
});

userInput.addEventListener('keydown', e => {
if (e.key === 'Enter') {
checkForPalindrome(userInput.value);
userInput.value = '';
}
});
/*
function isPalindrome(s) {
// Remove non-alphanumeric characters and convert to lowercase
s = s.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
// Check if the string is equal to its reverse
return s === s.split('').reverse().join('');
}

// Test the function with example inputs


console.log(isPalindrome("A")); // Output: true
console.log(isPalindrome("eye")); // Output: true
console.log(isPalindrome("_eye")); // Output: true
console.log(isPalindrome("race car")); // Output: true
console.log(isPalindrome("not a palindrome")); // Output: false
console.log(isPalindrome("A man, a plan, a canal. Panama")); // Output: true
console.log(isPalindrome("never odd or even")); // Output: true
console.log(isPalindrome("nope")); // Output: false
console.log(isPalindrome("almostomla")); // Output: false
console.log(isPalindrome("My age is 0, 0 si ega ym.")); // Output: true
console.log(isPalindrome("1 eye for of 1 eye.")); // Output: false
console.log(isPalindrome("0_0 (: /-\\ :) 0-0")); // Output: true
console.log(isPalindrome("five|\\_/|four")); // Output: false
*/

** end of undefined **

You might also like