Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[카드 뒤집기 미션 - 2단계] 곽가영 미션 제출합니다. #10

Open
wants to merge 4 commits into
base: gykwak03
Choose a base branch
from
Open

[카드 뒤집기 미션 - 2단계] 곽가영 미션 제출합니다. #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7a03765
{css 추가 및 카드 추가}
gykwak03 Jan 14, 2024
15d23bb
{테스트 추가 외의 다른 기능 요구 사항 만족}
gykwak03 Jan 14, 2024
8a092a8
{글씨체 변경}
gykwak03 Jan 14, 2024
c0042ff
{피드백 반영하였습니다!}
gykwak03 Jan 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 98 additions & 2 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,106 @@
.card {
width: 80px;
height: 100px;

background: #F9A825;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 3px;

font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;

color: #FFFFFF;


}


#cards {
display: flex;
gap: 10px;

display: flex;
gap: 10px;
Comment on lines +23 to +24
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

중앙 배치가 되어있지 않은데 align-items과 justify 속성에 대해서 알아볼까요?

Copy link
Author

@gykwak03 gykwak03 Jan 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

align-items: center; 를 추가하면 가로축을 기준으로 카드들이 정렬하게 되고,
justify-content: center; 를 추가하면 세로축을 기준으로 가운데 정렬하게 됩니다!
코드에 삽입하겠습니다.


position: absolute;
width: 365px;
height: 100px;
left: 458px;
top: 165px;
align-items: center;
justify-content: center;

}


#title1{
white-space: nowrap;
position: absolute;
width: 152px;
height: 24px;
left: 561px;
top: 97px;

font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;

color: #000000;

}

#rect{
position: absolute;
width: 410px;
height: 160px;
left: 435px;
top: 138px;


background: #FDD853;
border-radius: 10px;

}

.restart{

position: absolute;
width: 140px;
height: 48px;
left: 560px;
top: 200px;

background: rgba(255, 255, 255, 0.86);
border-radius: 10px;



}

.information{

white-space: nowrap;
position: absolute;
width: 82px;
height: 19px;

top: 150px;
justify-content: center;


font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;

color: #000000;




}

6 changes: 5 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@
</head>
<body>
<div id="app">
<h1>카드 뒤집기 1단계</h1>
<p id="title1">카드 뒤집기 2단계</p>
<div id = "rect"></div>
<div id="cards"></div>
<div id="information"></div>


</div>
</body>
</html>
63 changes: 58 additions & 5 deletions src/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,70 @@
class Card {
constructor(cardsContainer) {
let card = document.createElement("button"); //
card.classList.add("card"); //
card.textContent = "카드입니다";
let card = document.createElement("button");
card.classList.add("card");

this.card = card;
this.cardsContainer = cardsContainer;
this.render();
}

render() {
this.cardsContainer.appendChild(this.card); //부모 노드와 자식 노드 연결
this.cardsContainer.appendChild(this.card);
}
}

export default Card;
class GameManager {
constructor() {
this.chance = 2;
this.numbers = [0, 1, 2, 3];
this.gameOver = false;
this.information = document.createElement("p");
this.information.classList.add("information");
this.cardsContainer = document.getElementById("cards");
this.cardsContainer.appendChild(this.information);
}

initButtons(randomNum) {
const buttons = document.querySelectorAll("button");
buttons.forEach((button, index) => {
this.startGame(button, randomNum, index);
});
}

startGame(button, randomNum, index) {
this.information.textContent = `남은 횟수 : ${this.chance} 회`;

button.addEventListener("click", () => {
if (this.gameOver) return;

if (randomNum === index) {
button.textContent = "당첨";
this.endGame("(성공!) 당첨되었습니다.", randomNum);
} else {
button.textContent = "꽝";
this.chance = this.chance - 1;

if (this.chance === 0) {
this.endGame("(실패!) 게임이 종료되었습니다.", randomNum);
} else {
this.startGame(button, this.cardsContainer, randomNum, index);
}
}
});
}

endGame(message, randomNum) {
this.gameOver = true;
this.information.textContent = message;

let restart = document.createElement("button");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

button과 div element의 차이점은 무엇일까요?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

button은 사용자가 클릭하면 동작하는 상호작용이 가능한 엘리먼트이고
div는 구간을 나누는 엘리먼트로써 어떠한 의미를 가지진 않지만 복합적인 컨테이너로 사용됩니다.

restart.textContent = "재시작";
restart.classList.add("restart");
document.body.appendChild(restart);
restart.addEventListener("click", () => {
location.reload(true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

버튼을 클릭했을 때 새로고침을 함으로써 재시작이 되도록 기능을 작성해주셨네요!
좋은 아이디어입니다. 하지만 제가 의도드린 사항은 start메소드를 다시 재사용해보는 것이었습니다. 시간이 된다면 다시 작성해보시는걸 추천드려요!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

start 메소드를 end에서 재활용을 해보려 했는데 재시작과 변수 변경 등등이 오류가 나서.. 좀만 시간을 두고 다시 해보겠습니다 ㅠㅠ

});
}
}

export { Card, GameManager };
29 changes: 8 additions & 21 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,13 @@
import "../index.css";
import Card from "./Card.js";
import { Card, GameManager } from "./Card.js";

let cardsContainer = document.querySelector("#cards");

const card1 = new Card(cardsContainer); // cardsContainer를 생성자에 전달
const card2 = new Card(cardsContainer); // cardsContainer를 생성자에 전달
const card3 = new Card(cardsContainer); // cardsContainer를 생성자에 전달
var cards = {};
for (var i = 1; i < 5; i++) {
cards[`card${i}`] = new Card(cardsContainer);
}
var randomNum = Math.floor(Math.random() * 4);
const gameManager = new GameManager();

const buttons = document.querySelectorAll("button");

const randomNum = Math.floor(Math.random() * 3);

const numbers = [0, 1, 2];
numbers.forEach(function (number) {
buttons[number].addEventListener("click", () => {
cardsContainer.innerHTML = "";
const result = document.createElement("p"); // 새로운 <p> 엘리먼트 생성
if (randomNum == number) {
result.textContent = "정답입니다";
} else {
result.textContent = "꽝입니다";
}
cardsContainer.appendChild(result);
});
});
gameManager.initButtons(randomNum);