Skip to content
Advertisement

Need assistance with Palindrome flip-card app! It’s not excuting the functions as planned

I’m made a Palindrome app that takes a word input and flips to say if it’s a palindrome or not. However, after inputting a word it’s not flipping the card to reveal if it’s a palindrome or not. I was using following the Multi-faced Flip Card with a Click by Maria del Carmen Santiago, particularly the CSS and JavaScript sections as a guide. Could someone please help me figure out what it is I’m doing wrong?

I’m also attaching a CodePen link for the app. 

{
  const form = document.querySelector("form");
  const input = document.querySelector(".word__input");
  const cardContent = document.querySelector(".card__content");
  const cardBack = document.querySelectorAll(".card__back");
  const resultBack = document.querySelector(".back__result");
  const backButton = document.querySelector(".back__button");

  function clean(input) {
    input.toLowercase().replace(/[W]/g, "");
  }

  function isPalindrome(event) {
    event.preventDefault();
    const cleanInput = clean(input);
    // const cleanInput = input.toLowerCase().replace(/[W_]/g, "");
    // const reverseInput = cleanInput.split("");
    const reverseInput = cleanInput.split("").reverse().join("");
    // for (let i = 0; i < reverseInput.length; i++) {
    //   // const element = array[index];
    //   if
    // }

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

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

  // function cardFlipBack() {
  //   // Remove back of the card 2 seconds after flipping.
  //   setTimeout(function () {
  //     cardBack.classList.remove("display");
  //   }, 2000);
  //   cardFlip();
  // }

  form.addEventListener("submit", isPalindrome);
  backButton.addEventListener("click", cardFlip);
  // backButton.forEach(function (button) {
  //   Button.addEventListener("click", cardFlip);
  // });
}
: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: normal;
}

.enter__word {
  margin-top: 25px;
}

.word__input {
  padding: 10px;
  align-items: center;
  border: 1px solid var(--third-color);
  outline: none;
  width: 300px;
  height: 50px;
  -webkit-text-stroke: 1px var(--third-color);
  background: var(--fourth-color);
  border-radius: 10px;
}

.card__back {
  transform: rotateY(180deg);
  display: none;
  padding: 20px 5px;
}

.card__back.display {
  display: block;
}

p {
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  margin-top: -50px;
}

button {
  margin: 5px;
  padding: 10px;
  width: 90px;
  height: 45px;
  outline: 0;
  border: 1px solid var(--third-color);
  background: transparent;
  cursor: pointer;
  font-size: 25px;
  -webkit-text-stroke: 1.2px var(--third-color);
  border-radius: 5px 10px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.start__button:hover {
  color: var(--third-color);
  background: var(--second-color);
  font-weight: bolder;
}
.start__button:active {
  box-shadow: var(--first-shadow-inset);
}
.back__button:hover {
  color: var(--third-color);
  background: var(--second-color);
  font-weight: bolder;
}
.back__button:active {
  box-shadow: var(--first-shadow-inset);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ROTATOR</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
  <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>
  <script src="js/script.js"></script>
</body>
</html>

Advertisement

Answer

You very very close to getting it right, you just had some issues that should be catched by an IDE.

  • Typo: toLowerCase instead of toLowercase.
  • You were not using return inside the function clean. If you don’t do that, the value will never be passed to the outer environment.
  • Typo: cleanInput instead of CleanInput.
  • querySelectorAll is used when you want to grab many items. You just wanted one.
  • You were adding changing the innerHTML in a wrong place, as a second parameter of the classList.add method.

But don’t fret over these issues, you did a good job!

{
  const form = document.querySelector("form");
  const input = document.querySelector(".word__input");
  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 cleanInput = clean(input.value);
    // const cleanInput = input.toLowerCase().replace(/[W_]/g, "");
    // const reverseInput = cleanInput.split("");
    const reverseInput = cleanInput.split("").reverse().join("");
    // for (let i = 0; i < reverseInput.length; i++) {
    //   // const element = array[index];
    //   if
    // }

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

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

  // function cardFlipBack() {
  //   // Remove back of the card 2 seconds after flipping.
  //   setTimeout(function () {
  //     cardBack.classList.remove("display");
  //   }, 2000);
  //   cardFlip();
  // }

  form.addEventListener("submit", isPalindrome);
  backButton.addEventListener("click", cardFlip);
  // backButton.forEach(function (button) {
  //   Button.addEventListener("click", cardFlip);
  // });
}
: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: normal;
}

.enter__word {
  margin-top: 25px;
}

.word__input {
  padding: 10px;
  align-items: center;
  border: 1px solid var(--third-color);
  outline: none;
  width: 300px;
  height: 50px;
  -webkit-text-stroke: 1px var(--third-color);
  background: var(--fourth-color);
  border-radius: 10px;
}

.card__back {
  transform: rotateY(180deg);
  display: none;
  padding: 20px 5px;
}

.card__back.display {
  display: block;
}

p {
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  margin-top: -50px;
}

button {
  margin: 5px;
  padding: 10px;
  width: 90px;
  height: 45px;
  outline: 0;
  border: 1px solid var(--third-color);
  background: transparent;
  cursor: pointer;
  font-size: 25px;
  -webkit-text-stroke: 1.2px var(--third-color);
  border-radius: 5px 10px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.start__button:hover {
  color: var(--third-color);
  background: var(--second-color);
  font-weight: bolder;
}
.start__button:active {
  box-shadow: var(--first-shadow-inset);
}
.back__button:hover {
  color: var(--third-color);
  background: var(--second-color);
  font-weight: bolder;
}
.back__button:active {
  box-shadow: var(--first-shadow-inset);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ROTATOR</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
  <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>
  <script src="js/script.js"></script>
</body>
</html>
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement