2022.05.25 - javascript 퀴즈(7) 신호등 불켜기

  < 신호등 불 켜기 >

  다음과 같은 조건을 만족하여 신호등의 불이 켜질수 있도록 만들어 주세요!
  
  📌 Stop, Pause, Go 클릭 시 빨간색, 주황색, 초록색불이 들어와야 합니다.
  📌 전체 불 끄기 버튼을 클릭하면 모든 불이 꺼져야 합니다.
  
  🚨 HTML, CSS는 건드리지 않고 JS만 수정해주세요.

[ HTML ]

<div class="container">
  <div class="lightWrapper">
    <span class="lightOn red">Stop</span>
    <span class="lightOn orange">Pause</span>
    <span class="lightOn green">Go</span>
  </div>
  <button>전체 불 끄기 💡</button>
</div>

[ CSS ]

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100vh;
}

.lightWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background: black;
  width: 35vh;
  height: 60vh;
}

.lightOff {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: white;
  width: 80px;
  height: 80px;
}

.lightOn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: white;
  width: 80px;
  height: 80px;
  cursor: pointer;
}

button {
  height: 10vh;
}

 

[  JS ]

const buttonElement = document.querySelector("button");
const divEle = document.querySelector("div");
const lightoff = document.querySelectorAll(".lightOn");

divEle.addEventListener("click", function onClick(e) {
    if(e.target.textContent === "Stop"){
      e.target.style.backgroundColor = "red";
    }else if(e.target.textContent === "Pause"){
      e.target.style.backgroundColor = "orange";
    }else if(e.target.textContent === "Go"){
      e.target.style.backgroundColor = "green";
    }else if(e.target === buttonElement){
      for(let i =0; i <3; i++){
        lightoff[i].style.backgroundColor = "";
      }
    }
});

 event target 에 대해 더..공부할 필요가 있겠다!!

https://codepen.io/hyoniii710/pen/dydZjGa