palindrome-app

by Richard Hunter

HTML

<main>
  <div class="title">
    <h1 class="logo">
      <img src="https://raw.githubusercontent.com/Avixph/Palindrome/fbca45350e2be55f7db82f2b64a0dad94dfe7d16/images/rotator_logo.svg" />
    </h1>
  </div>
  <div>
    <div class="card">
      <div class="card__content">
        <div id="front" class="card__face card__front">
          <h2>Is</h2>
          <form class="enter__word">
            <input id="form__input" class="word__input" type="text" placeholder="Enter Word" required="required" />
            <h2>a Palindrome?</h2>
            <button id="form__button" class="button start__button" type="submit">
              Check
            </button>
          </form>
        </div>
        <div id="back" class="card__face card__back">
          <p class="back__result">Yes, _____ is a Palindrome.</p>
          <button id="back__button" class="button back__button">
            Reset
          </button>
        </div>
      </div>
    </div>
  </div>
</main>

CSS

:root {
  --first-color: #fe9813;
  --second-color: #e77b0e;
  --third-color: #a22000;
  --fourth-color: #281200;
  --fith-color: #281200db;
  --sixth-color: #e4dede80;
  --seventh-color: #e4dedec5;
  --font: "Orbitron";
  --first-shadow: 6px 6px 12px #220f00, -6px -6px 12px #2e1500;
  --second-shadow: 6px 6px 12px #931d00, -6px -6px 12px #b12300;
  --first-shadow-inset: inset 8px 8px 16px #c76a0c, inset -8px -8px 16px #ff8c10;
  --second-shadow-inset: inset 6px 6px 12px #931d00,
    inset -6px -6px 12px #b12300;
  --first-shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.6), -1px -1px 3px #fff;
  --second-shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.3), -1px -1px 1.5px #fff;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  text-align: center;

  font-family: var(--font), sans-serif, monospace;
  font-size: 30px;
  font-weight: normal;
  color: var(--first-color);
  -webkit-text-stroke: 2px var(--third-color);
}

body {
  background-color: var(--fourth-color);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  min-height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  margin: 0 auto;
}

img {
  align-items: center;
  width: 90vw;
  height: 60vh;
  margin: -20px 0px;
  margin-top: -150px;
}

.card {
  width: 450px;
  height: 450px;
  perspective: 450px;
  text-align: center;
  border-radius: 5px;
  margin-top: -100px;
}

.card__content {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 2s;
}

.card__content.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card__front {
  padding: 20px 5px;
  box-shadow: var(--first-shadow);
}

h2 {
  font-size: 45px;
  font-weight:...

JavaScript

const form = document.querySelector(".enter__word");
const cardContent = document.querySelector(".card__content");
const cardBack = document.querySelector(".card__back");
const resultBack = document.querySelector(".back__result");
const backButton = document.querySelector(".back__button");

function clean(input) {
  return input.toLowerCase().replace(/\W/g, "");
}

function isPalindrome(event) {
	event.preventDefault();
  
  const input = document.querySelector("#form__input").value;
  const cleanInput = clean(input);
  const reverseInput = cleanInput.split("").reverse().join("");

  if (reverseInput === cleanInput) {
    cardBack.classList.add("display");
    resultBack.innerHTML = `Yes ${cleanInput} is a Palindrome!`;
  } else {
    cardBack.classList.add("display");
    resultBack.innerHTML = `No sorry, ${cleanInput} is not a Palindrome!`;
  }
  
  cardFlip();
  form.reset();
}

function cardFlip() {
  cardContent.classList.toggle("is-flipped");
}

form.addEventListener("submit", isPalindrome);
backButton.addEventListener("click", cardFlip);