Scribd
Upload
47 views4 pages

Build A Palindrome Checker

The document contains code for a palindrome checker web application. It includes HTML markup defining the page structure and styling with CSS. JavaScript code handles input, checks if the input is a palindrome by comparing it to the reversed text, and displays the result. The application takes text input, checks if it is the same forward and backward, and displays whether it is a palindrome or not.

Uploaded by

marekwieszjakjest
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
47 views4 pages

Build A Palindrome Checker

The document contains code for a palindrome checker web application. It includes HTML markup defining the page structure and styling with CSS. JavaScript code handles input, checks if the input is a palindrome by comparing it to the reversed text, and displays the result. The application takes text input, checks if it is the same forward and backward, and displays whether it is a palindrome or not.

Uploaded by

marekwieszjakjest
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>
<head lang="en">
<title>Palindrome checker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="site-content">
<div>
<h1 class="header">Is This A Palindrome?</h1>
</div>
<div class="middle-section">
<p>Enter Your Text Here:</p>
<div class="input-container">
<input id="text-input">
<button id="check-btn">Check!</button>
</div>
<div id="result" class="result">Your result</div>
<p class="explanation">
Palindrome is a word or sentence, that spelled backwards, sounds the
same
</p>
</div>
</div>
<div class="patryk">cholerny patryk z siódemki...</div>
<script src="script.js"></script>
</body>
</html>

** end of undefined **

** start of undefined **

:root {
--background-color1: #232323;
--primary: #9E0DFF;
--secondary: #c250ff;
--hover: #d181fc;
--active: #dea1ff;
}

body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-color1);
}

.site-content{
display: inline-block;
width: auto;
height: auto
}
.header {
margin: auto;
display: inline-block;

color: white;
background-color: var(--primary);

padding: 10px;
border-radius: 20px;
margin-bottom: 40px;
font-family: Sans-Serif;
}

.middle-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

color: white;
border: 2px solid white;
border-radius: 20px;
}

.input-container {
display: flex;
}

input {
width: 250px;
height: 40px;
border-radius: 20px 0px 0px 20px;
border-width: 0;

font-size: 100%;
font-family: Sans-Serif;
font-weight: bold;
}

button {
font-family: Sans-Serif;
padding: 10px;
border-radius: 0px 20px 20px 0px;
border-width: 0;
background-color: var(--secondary);
}

button:hover {
background-color: var(--hover);
}

button:active {
background-color: var(--active);
}

.result {
margin-top: 16px;
margin-left: 10px;
margin-right: 10px;
max-width: 90%;

text-align: center;

font-family: Sans-Serif;
}

.explanation {
width: 300px;
margin-left: 26px;
}

.middle-section p {
margin-top: 16px;
margin-bottom: 16px;
font-family: Sans-Serif;
}

.patryk {
position: fixed;
color: white;
right: 0;
bottom: 0;
}

** end of undefined **

** start of undefined **

let isTextPalindrome;
let enteredText;

const resultButton = document.getElementById("check-btn");


let enteredTextElement = document.getElementById("text-input");
const resultText = document.getElementById("result")

resultButton.addEventListener("click", isInputTextThere);

function isInputTextThere() {

enteredText = enteredTextElement.value;

if (enteredText === "") {


resultText.innerText = "enter a value";
alert("Please input a value");
} else {
checkPalindrome();
}
}

function checkPalindrome() {
let enteredTextDisplay = enteredTextElement.value;
let enteredText = enteredTextElement.value.replace(/[^a-zA-Z0-9]/g, '');

const palindrome = enteredText.toLowerCase();


const reversePalindrome = enteredText.split("").reverse().join("").toLowerCase();

console.log(palindrome);
console.log(reversePalindrome);

if (palindrome === reversePalindrome) {


isTextPalindrome = true;
} else {
isTextPalindrome = false;
}
console.log(isTextPalindrome);
displayResult();
}

function displayResult() {
if (isTextPalindrome) {
resultText.innerText = `${enteredText} is a palindrome`;
} else {
resultText.innerText = `${enteredText} is not a palindrome`
}
}

** end of undefined **

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy