멋쟁이사자 FE7 34일차

멋쟁이사자 FE7

멋쟁이사자 FE7 34일차

FrontEnd 개발자 준비생 최현우 2023. 8. 28. 21:49

728x90

Apply (적용)

JS

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Traning1</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">
      <div id="myNumber">0</div>
      <div id="btns">
        <div class="btnBox">
          <button class="a" id="decrease">-</button>
          <button class="a" id="increase">+</button>
        </div>
        <div>
          <button class="color-btn red"></button>
          <button class="color-btn orange"></button>
          <button class="color-btn yellow"></button>
          <button class="color-btn green"></button>
          <button class="color-btn blue"></button>
          <button class="color-btn indigo"></button>
          <button class="color-btn purple"></button>
          <button class="color-btn black"></button>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  margin-top: 200px;
}

#myNumber {
  font-size: 100px;
}

.btnBox {
  display: flex;
  gap: 10px;
}

.a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 50px;
}

.color-btn {
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  margin-top: 15px;
}

.red {
  background-color: #ff0000;
}
.orange {
  background-color: #ffa500;
}
.yellow {
  background-color: #ffff00;
}
.green {
  background-color: #008000;
}
.blue {
  background-color: #0000ff;
}
.indigo {
  background-color: #4b0082;
}
.purple {
  background-color: #800080;
}
.black {
  background-color: #000000;
}

const myNumberTag = document.getElementById("myNumber");
const decreaseBtn = document.getElementById("decrease");
const increaseBtn = document.getElementById("increase");
const colors = document.querySelectorAll(".color-btn");

let myNumber = myNumberTag.textContent;

decreaseBtn.onclick = () => {
  if (myNumber > 0) {
    myNumber--;
    myNumberTag.textContent = myNumber;
  }
};

increaseBtn.onclick = () => {
  if (myNumber < 10) {
    myNumber++;
    myNumberTag.textContent = myNumber;
  }
};

const colorBtns = document.getElementsByClassName("color-btn");

for (let index = 0; index < colorBtns.length; index++) {
  colorBtns[index].onclick = function () {
    myNumberTag.style.color = getComputedStyle(colors[index]).backgroundColor;
  };
}

Feeling (느낀 점)

코딩 테스트 공부를 하며, for문을 많이 연습했는데 이렇게 실습을 통해 사용해 보니 감회가 새로웠다. 또한 조건문으로 0 ~ 10 까지 설정을 해줬으며, 인덱싱을 통해 내가 원하는 선택자에 내가 원하는 색상의 버튼을 누르면 색상을 적용할 수 있었다. css와 마찬가지로 js도 개념만 아는 건 반쪽 지식이라고 생각한다. 직접 실습해 보니 내가 공부했던 개념을 을 왜 이렇게 사용하는지 정확하게 알게 되었다.