在 Palindrome 翻页卡片应用程序方面需要帮助！它没有按计划执行功能
Need assistance with Palindrome flip-card app! It's not excuting the functions as planned
我制作了一个回文应用程序，它接受一个单词输入并翻转说它是否是回文。然而，在输入一个单词后，它不会翻转卡片来显示它是否是回文。我使用以下 Multi-faced Flip Card with a Click by Maria del Carmen Santiago, particularly the CSS and JavaScript 部分作为指南。有人可以帮我弄清楚我做错了什么吗？
我还为该应用附加了一个 CodePen link。
{
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>
您非常非常接近正确，您只是遇到了一些应该由 IDE 发现的问题。
- 打字错误：
toLowerCase 而不是 toLowercase。
- 您没有在函数
clean 中使用 return。如果不这样做，该值将永远不会传递给外部环境。
- 打字错误：
cleanInput 而不是 CleanInput。
querySelectorAll 用于抢夺物品较多的时候。你只想要一个。- 您在错误的地方添加了更改
innerHTML 作为 classList.add 方法的第二个参数。
但是不要为这些问题烦恼，你做的很好！
{
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>
我制作了一个回文应用程序，它接受一个单词输入并翻转说它是否是回文。然而，在输入一个单词后，它不会翻转卡片来显示它是否是回文。我使用以下 Multi-faced Flip Card with a Click by Maria del Carmen Santiago, particularly the CSS and JavaScript 部分作为指南。有人可以帮我弄清楚我做错了什么吗？
我还为该应用附加了一个 CodePen link。
{
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>
您非常非常接近正确，您只是遇到了一些应该由 IDE 发现的问题。
- 打字错误：
toLowerCase而不是toLowercase。 - 您没有在函数
clean中使用return。如果不这样做，该值将永远不会传递给外部环境。 - 打字错误：
cleanInput而不是CleanInput。 querySelectorAll用于抢夺物品较多的时候。你只想要一个。- 您在错误的地方添加了更改
innerHTML作为classList.add方法的第二个参数。
但是不要为这些问题烦恼，你做的很好！
{
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>