ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Проверка палиндрома на CSS и JavaScript

Проверка палиндрома на CSS и JavaScript

Проверка палиндрома на CSS и JavaScript
Друзья, сегодня в данном материале представлен оригинальный скрипт, как проверка палиндрома в HTML CSS и JavaScript, который высчитывает знаки. А точнее, вы можете проверить любое сочетание слов и предложений, которые читаются как с право налево, а также одинаково слева на право. Палиндром — это слово, фраза или предложение, которое читается так же, как и вперед, и назад.

К примеру такое сочетание, как одолжить или ограбить, где по сути что-то связывает их, но если прочесть наоборот, то не будет палиндрома, от второго примера, что идет в числах 3728273, где можно заметить, если считать наоборот, то цифры аналогичны.

И здесь представлена скрипт проверки палиндрома пользователи могут вводить текст или числа и проверять, является ли введенное значение палиндромом или нет, нажав кнопку проверки палиндрома. Если честно, то не знаю где можно применить, но просто интересен стал, по этой причине его размещаю на сайте. Если вы хотите увидеть, как выглядит данная программа проверки палиндромов и как она работает, вы можете перейти на demo страницу, где за одно проверите словосочетание на палиндроме.

Аналогично проверил все изначально, до размещение:

Как проверить, является ли строка палиндромом

HTML

Код
<div class="slipcoven">
  <header>
  <h1>Проверка палиндрома</h1>
  <p>Палиндром — это слово или фраза, которая читается так же, как и вперед и назад.</p>
  </header>
  <div class="palindrom">
  <input type="text" spellcheck="false" placeholder="Введите текст или число">
  <button>Проверьте палиндром</button>
  </div>
  <p class="infosia-tekst"></p>
  </div>

CSS

Код
::selection{
  color: #f5eded;
  background: rgb(145 72 175 / 80%);
}
.slipcoven{
  max-width: 500px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 15px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
header h1{
  font-size: 27px;
  font-weight: 500;
}
header p{
  margin-top: 5px;
  font-size: 18px;
  color: #474747;
}
.palindrom{
  margin: 20px 0 27px;
}
.palindrom input{
width: 100%;
  height: 58px;
  outline: none;
  padding: 0 15px;
  font-size: 19px;
  border-radius: 5px;
  border: 1px solid #747070;
  transition: 0.1s ease;
}
.palindrom input::placeholder{
  color: #999999;
}
.palindrom input:focus{
  box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.palindrom input:focus::placeholder{
  color: #bebebe;
}
.palindrom button {
  width: 100%;
  height: 54px;
  border: none;
  opacity: 0.7;
  outline: none;
  color: #f1eeee;
  cursor: pointer;
  font-size: 16px;
  margin-top: 18px;
  border-radius: 3px;
  pointer-events: none;
  background: #454db1;
  transition: opacity 0.15s ease;
}
.palindrom button.active{
  opacity: 1;
  pointer-events: auto;
}
.infosia-tekst{
  display: none;
  font-size: 19px;
  text-align: center;
  margin-bottom: 18px;
}
.infosia-tekst span {
  color: #b500a7;
}

@media (max-width: 520px) {
  .slipcoven{
  padding: 17px 20px 10px;
  }
  header h1{
  font-size: 25px;
  }
  header p{
  font-size: 16px;
  }
  .palindrom input{
  height: 54px;
  font-size: 17px;
  }
  .palindrom button{
  height: 50px;
  font-size: 16px;
  margin-top: 17px;
  }
  .infosia-tekst{
  font-size: 18px;
  }
}

JS

Код
const txtInput = document.querySelector(".palindrom input"),
checkBtn = document.querySelector(".palindrom button"),
infoTxt = document.querySelector(".infosia-tekst");
let filterInput;

checkBtn.addEventListener("click", () => {
  let reverseInput = filterInput.split("").reverse().join("");
  infoTxt.style.display = "block";
  if(filterInput != reverseInput) {
  return infoTxt.innerHTML = `Нет, <span>'${txtInput.value}'</span> это не палиндром!`;
  }
  infoTxt.innerHTML = `Да, <span>'${txtInput.value}'</span> это палиндром!`;
});

txtInput.addEventListener("keyup", () => {
  filterInput = txtInput.value.toLowerCase().replace(/[^A-Z0-9]/ig, "");
  if(filterInput) {
  return checkBtn.classList.add("active");
  }
  infoTxt.style.display = "none";
  checkBtn.classList.remove("active");
});

Здесь данный каркас, который схожий с модальным окном идет полностью в адаптивном стиле, что хорошо читается с мобильных аппаратов, что можно увидеть в контейнере или каркасе на сайте.

Вот и все, теперь вы успешно создали средство проверки палиндромов на JavaScript. Если вдруг код не станет работает, а также можете столкнуться с какой-либо проблемой, то загрузите файлы исходного кода с помощью данной кнопки под загрузку.

Демонстрация
2022-06-10 Загрузок: 1 Просмотров: 230 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2022-06-10 23:071
0
Вот думаю, а в реальности этот палиндром где то может пригодиться? 07a
avatar