Un palíndromo es una palabra, oración o incluso un número que se lee igual desde atrás y desde adelante. Por lo tanto, si tomamos la entrada, invertimos la string y verificamos si la string invertida y la string original son iguales, significa que la string es un palíndromo, de lo contrario, no lo es.
Acercarse:
- Cuando el usuario hace clic en el botón Enviar, ejecutamos una función de JavaScript.
- Primero convertimos la string a minúsculas.
- Luego, dividimos la string en una array usando el método split() para que pueda revertirse usando el método reverse() .
- Luego unimos la array de nuevo a una string usando el método join().
- Por último, comprobamos que la string de entrada y la string invertida sean iguales o no. Actualizaremos la salida en consecuencia.
Ejemplo:
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: grey;
}
.container {
background-color: #00ffff;
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
width: 80vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 25px;
box-shadow: 2px 31px 35px -15px
rgba(0, 0, 0, 0.1);
padding: 10px;
}
.pallindrome {
width: 500px;
}
.input-container {
text-align: center;
margin: 30px 0;
}
.btn-container {
text-align: center;
}
input {
width: 70%;
border: none;
padding: 15px;
font-size: 1.1rem;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="pallindrome">
<header>
<h1>Palindrome checking using
CSS and JavaScript</h1>
</header>
<div class="main">
<div class="input-container">
<!-- Place to input the string -->
<input type="text" placeholder="Enter...">
</div>
<div class="btn-container">
<!-- Button that will activate the check -->
<button>Check</button>
</div>
<div>
<b>Input String: </b>
<span class="input-string"></span>
<br>
<b>Reversed String: </b>
<span class="reversed-string"></span>
<p class="output-text"></p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
// Getting the elements from DOM
const btncheck = document.querySelector("button");
const str = document.querySelector("input");
const inputString = document.querySelector(".input-string");
const reverseString = document.querySelector(".reversed-string");
const outputText = document.querySelector(".output-text");
// Adding event listener when the
// user clicks on the "Check" button
btncheck.addEventListener("click", (e) => {
e.preventDefault();
// Converting the input string to smallcase
const input = str.value.toLocaleLowerCase();
// Split the string into an array
const string = input.split("");
// Reversing the array
const rearray = string.reverse();
// Join the array back to a string
const reversedString = rearray.join("");
inputString.textContent = input;
reverseString.textContent = reversedString;
// Checking the input string and
// reversed string if they are the same
if (input == reversedString) {
outputText.textContent =
"The input string is a pallindrome!";
} else {
outputText.textContent =
"The input string is not a pallindrome";
}
// Reset the input value
str.value = "";
});
Producción:
