I'm new to coding with css and im having a bit of an issue. Even though I've set the display to flex and set justify-content to center the squares are off by a little. I wanted it to be responsive but it wasn't working with width: 100%. not sure what else to do. Without any width and height it looks off
//html
<body>
<div id="scores">
<p class="correct"><span class="amount"></span></p>
<p class="wrong">Lives left: <span class="amount2"></span></p>
</div>
<div id="thePuzzle"></div>
<script src="app.js"></script>
</body>
//css
body {
font-family: "Courier New", Courier, monospace;
margin: 0;
padding: 0;
box-sizing: border-box;
background: rgb(238, 174, 202);
background: radial-gradient(
circle,
rgba(238, 174, 202, 1) 0%,
rgba(148, 187, 233, 1) 100%
);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
#thePuzzle {
display: grid;
grid-template-columns: repeat(3, 4rem);
gap: 1rem;
column-gap: 3rem;
perspective: 800px;
}
.card {
position: relative;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: all 2s ease;
box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
height: 100px;
width: 100px;
}
.face,
.back {
width: 100%;
height: 100%;
position: absolute;
}
.back {
background-color: rgb(111, 24, 111);
backface-visibility: hidden;
}
.toggleCard {
transform: rotateY(180deg);
}
#scores {
display: flex;
justify-content: center;
font-size: larger;
font-weight: 600;
}
.wrong {
text-align: center;
}
//js
const mainDiv = document.querySelector("#thePuzzle");
const span = document.querySelector(".amount");
const span2 = document.querySelector(".amount2");
const scoreArea = document.getElementById("scores");
let amountCorrect = 0;
let amountWrong = 3;
span2.textContent = amountWrong;
//Creating the array of image objects
const imageArrayObj = () => [
{ imageSrc: "./fox.jpg", imageName: "fox" },
{ imageSrc: "./gir.jpg", imageName: "giraffe" },
{ imageSrc: "./panda.png", imageName: "panda" },
{ imageSrc: "./fox.jpg", imageName: "fox" },
{ imageSrc: "./gir.jpg", imageName: "giraffe" },
{ imageSrc: "./panda.png", imageName: "panda" },
];
//randomize the array
const randomize = () => {
const randArray = imageArrayObj();
randArray.sort(() => Math.random() - 0.5);
return randArray;
};
//we must create each box which is a div with an image and another div
const cardGenerator = () => {
const cards = randomize();
//we need to itterate through the image array
cards.forEach((element) => {
const card = document.createElement("div");
const face = document.createElement("img");
const back = document.createElement("div");
card.classList = "card";
back.classList = "back";
face.classList = "face";
face.src = element.imageSrc;
card.setAttribute("name", element.imageName);
//attach card to the main div
mainDiv.appendChild(card);
card.appendChild(face);
card.appendChild(back);
/// We need to be able to click a single card
//then be able to turn only the clicked card over
card.addEventListener("click", (e) => {
card.classList.toggle("toggleCard");
checkCard(e);
});
});
};
const checkCard = (e) => {
const clickedCard = e.currentTarget;
console.log(clickedCard);
clickedCard.classList.add("flipped");
//logic
const flippedCard = document.querySelectorAll(".flipped");
if (flippedCard.length === 2) {
if (
flippedCard[0].getAttribute("name") ===
flippedCard[1].getAttribute("name")
) {
amountCorrect++;
flippedCard.forEach((element) => {
element.classList.remove("flipped");
element.style.pointerEvents = "none";
// this makes the card unclickable
// so when you get it right it stays
});
if (amountCorrect === 3) {
setTimeout(() => {
restBtn();
}, 1500);
}
} else {
amountWrong--;
span2.textContent = amountWrong;
flippedCard.forEach((element) => {
element.classList.remove("flipped");
setTimeout(() => {
element.classList.remove("toggleCard");
}, 1000);
});
if (amountWrong === 0) {
setTimeout(() => {
restBtn();
}, 1000);
}
}
}
};
cardGenerator();
const restBtn = () => {
let cardData = randomize();
let cards = document.querySelectorAll(".card");
let face = document.querySelectorAll(".face");
cardData.forEach((element, index) => {
cards[index].classList.remove("toggleCard");
setTimeout(() => {
cards[index].style.pointerEvents = "all";
face[index].src = element.imageSrc;
cards[index].setAttribute("name", element.imageName);
},1000);
});
//set socres back to zero
amountCorrect = 0;
amountWrong = 3;
span2.textContent = amountWrong;
};
When you create the grid #thePuzzle
you're using grid-template-columns
to create 3 columns of 4rem
width each. Then immediately underneath that you contradict it by setting your .card
elements to 100px
wide.
Change your css:
#thePuzzle {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 1rem;
column-gap:3rem;
perspective: 800px;
}
Here's a snippet so you can see it working. The grid remains dead center.
const mainDiv = document.querySelector("#thePuzzle"); const span = document.querySelector(".amount"); const span2 = document.querySelector(".amount2"); const scoreArea = document.getElementById("scores"); let amountCorrect = 0; let amountWrong = 3; span2.textContent = amountWrong; //Creating the array of image objects const imageArrayObj = () => [{ imageSrc: "./fox.jpg", imageName: "fox" }, { imageSrc: "./gir.jpg", imageName: "giraffe" }, { imageSrc: "./panda.png", imageName: "panda" }, { imageSrc: "./fox.jpg", imageName: "fox" }, { imageSrc: "./gir.jpg", imageName: "giraffe" }, { imageSrc: "./panda.png", imageName: "panda" } ]; //randomize the array const randomize = () => { const randArray = imageArrayObj(); randArray.sort(() => Math.random() - 0.5); return randArray; }; //we must create each box which is a div with an image and another div const cardGenerator = () => { const cards = randomize(); //we need to itterate through the image array cards.forEach((element) => { const card = document.createElement("div"); const face = document.createElement("img"); const back = document.createElement("div"); card.classList = "card"; back.classList = "back"; face.classList = "face"; face.src = element.imageSrc; card.setAttribute("name", element.imageName); //attach card to the main div mainDiv.appendChild(card); card.appendChild(face); card.appendChild(back); /// We need to be able to click a single card //then be able to turn only the clicked card over card.addEventListener("click", (e) => { card.classList.toggle("toggleCard"); checkCard(e); }); }); }; const checkCard = (e) => { const clickedCard = e.currentTarget; console.log(clickedCard); clickedCard.classList.add("flipped"); //logic const flippedCard = document.querySelectorAll(".flipped"); if (flippedCard.length === 2) { if ( flippedCard[0].getAttribute("name") === flippedCard[1].getAttribute("name") ) { amountCorrect++; flippedCard.forEach((element) => { element.classList.remove("flipped"); element.style.pointerEvents = "none"; // this makes the card unclickable // so when you get it right it stays }); if (amountCorrect === 3) { setTimeout(() => { restBtn(); }, 1500); } } else { amountWrong--; span2.textContent = amountWrong; flippedCard.forEach((element) => { element.classList.remove("flipped"); setTimeout(() => { element.classList.remove("toggleCard"); }, 1000); }); if (amountWrong === 0) { setTimeout(() => { restBtn(); }, 1000); } } } }; cardGenerator(); const restBtn = () => { let cardData = randomize(); let cards = document.querySelectorAll(".card"); let face = document.querySelectorAll(".face"); cardData.forEach((element, index) => { cards[index].classList.remove("toggleCard"); setTimeout(() => { cards[index].style.pointerEvents = "all"; face[index].src = element.imageSrc; cards[index].setAttribute("name", element.imageName); }, 1000); }); //set socres back to zero amountCorrect = 0; amountWrong = 3; span2.textContent = amountWrong; };
body { font-family: "Courier New", Courier, monospace; margin: 0; padding: 0; box-sizing: border-box; background: rgb(238, 174, 202); background: radial-gradient( circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } #thePuzzle { display: grid; grid-template-columns: repeat(3, 100px); gap: 1rem; column-gap: 3rem; perspective: 800px; } .card { position: relative; transform-style: preserve-3d; transform: rotateY(0deg); transition: all 2s ease; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px; height: 100px; width: 100px; } .face, .back { width: 100%; height: 100%; position: absolute; } .back { background-color: rgb(111, 24, 111); backface-visibility: hidden; } .toggleCard { transform: rotateY(180deg); } #scores { display: flex; justify-content: center; font-size: larger; font-weight: 600; } .wrong { text-align: center; }
<div id="scores"> <p class="correct"><span class="amount"></span></p> <p class="wrong">Lives left: <span class="amount2"></span></p> </div> <div id="thePuzzle"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.