TIL 2022.04.04

code치기 전에 flow chart 그려보기

querySelector / getElementById 차이

toggle method

: it will remove the class if it's there, and if it's not it will add it.

player0El.classList.toggle("player--active");
player1El.classList.toggle("player--active");

 

new game 버튼을 누르면 리셋시키는 챌린지

내가 쓴 코드. 동작은 했지만 위에 쓴 코드들과 중복이 있었다⬇️

btnNew.addEventListener("click", function () {
score0El.textContent = 0;
score1El.textContent = 0;
diceEl.classList.add("hidden");
document .querySelector(`.player--${activePlayer}`) .classList.remove("player--winner");
scores = [0, 0];
currentScore = 0;
activePlayer = 0;
playing = true;
});

강의

함수로 정의해서 중복을 피하고 싶었는데 밖에 빼서 써야 될 것들 구분이 잘 안 되었었다. 강의에서 알게 됨⬇️

let scores, currentScore, activePlayer, playing;

const init = function () {
scores = [0, 0];
currentScore = 0;
activePlayer = 0;
playing = true;
score0El.textContent = 0;
score1El.textContent = 0;
current0El.textContent = 0;
current1El.textContent = 0;
diceEl.classList.add("hidden");
player0El.classList.remove("player--winner");
player1El.classList.remove("player--winner");
player0El.classList.add("player--active");
player1El.classList.remove("player--active");
};

init();

btnNew.addEventListener("click", init);

 

#100daysofcode day7