구현하려는 작업
purchase버튼을 눌렀을 때 구매하는 사이트를 연결하려고 한다
일단 Modal창부터 구현하기 위해 purchase버튼을 눌렀을 때 Modal 창이 뜨게 구현한다
아직 종료된 시간이 아닐 경우 Modal창 안에 구매할 수 있는 link를 추가하고 close 버튼을 눌러서 닫을 수 있게 구현한다
#4 카운트 다운 시계 만들기와 이어서 구현할 예정이고 종료되었을 때 Modal창이 계속 떠있게 구현하고 이벤트 종료 문구를 추가할 것이다
종료 이후에는 modal창이 고정적으로 떠있기 때문에 다른 Category로 넘어갈 수 있게 navbar를 제외하고 고정적으로 구현할 예정이다
그리고 #4에서 초를 따로 지정해주지 않아서 해당 창에 새로 들어가면 현재 시간에서 -1초씩 마이너스 되지 않고 59 58 이렇게 되었는데 그부분도 같이 수정했다
사용한 태그
querySelector, getElementById, style.display, disabled 속성, addEventListener, innerHTML
구현한 작업 결과 완성 이미지
예제 설명
- index.html
<section id="end-body">
<div id="sale-end-box">
<h1>Thank You! <br />The event has ended!</h1>
<button class="end-box-close">Close</button>
</div>
</section>sale창 아래 modal창을 생성한다
section으로 div를 묶어주고 그 안에 h1(종료문구), 버튼(close)을 추가했다
end-body와 sale-end-box으로 나누어서 묶은 이유는
modal창을 눌렀을 경우 전체 배경색상이 어두운색으로 되고 sale-end-box를 sale창 위에 고정적으로 표시하기 위해서이다
- sale.css
#end-body {
background-color: rgba(171, 171, 171, 0.462);
width: 100%;
height: 100%;
top: 138px;
position: fixed;
display: none;
justify-content: center;
}
#sale-end-box {
background-color: rgba(231, 241, 253, 0.885);
max-width: 600px;
width: 95%;
height: 250px;
margin-top: 50px;
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 20px;
}end-body 자체를 display: none 해주고 버튼을 눌렀을 때만 표시되게 한다
sale-end-box는 end-body안에 속해 있기 때문에 end-body만 none표시한다
그리고 둘다 position을 fixed해주어야 고정적으로 상단에 위치한다
top: 138px은 navbar에는 지정하지 않고 예정된 시간이 종료된 이후에 modal창이 계속 떠있게 할 것이기 때문에 다른 category를 눌러 다른 곳으로 이동하게 하기 위한 것이다
end-body를 width, height를 100% 지정해서 화면 전체(navbar제외)에 어두운 색상을 지정한다
- sale.js
const purchaseBtn = document.querySelector(".purchase-btn");
const endBody = document.getElementById("end-body");
const endBoxClose = document.querySelector(".end-box-close");
const endText = document.querySelector('.end-text')필요한 4가지를 가져온다
purchase버튼에는 눌렀을 때 modal창 띄우기 구현
endBody는 display: none -> flex 구현
endBoxClose버튼에는 눌렀을 때 modal창 닫기 구현
endText는 예정 시간 종료시 innerHTML로 종료 문구 변경해서 출력
purchaseBtn.addEventListener("click", () => {
endBody.style.display = "flex";
});
endBoxClose.addEventListener("click", () => {
endBody.style.display = "none";
});일단 버튼들에 addEventListener을 추가해준다
purchase버튼에 display: block이 아닌 flex로 지정하는 이유는
justify-content: center, align-items: center를 지정해주기 위해서이다
(중앙에 정렬해주기 위함)
if (saleEnd < 0) {
clearInterval(countTimer);
// modal 창 구현
endBody.style.display = "flex";
endBoxClose.disabled = "true";
endText.innerHTML = "Thank You! <br />The event has ended!";지정 시간이 종료되었을 때 modal창을 계속 띄워주게 하는 것은 showTime함수 안에 구현할 예정이다
종료되었을 때만 구현해야 하기 때문에 if문에 넣어주었다
end-box-close버튼은 비활성화를 해야하기 때문에 true로 변경한다
옵션을 쓰기 위해서는 console에 해당 버튼을 dir해서 출력해보면 확인할 수 있다
- 객체
객체는 key, value가 있기 때문에 key값으로 value를 변경할 수 있다
const products = {
name: 'macbook Air',
price: 199
} 객체를 표현하는 방식이다
각각의 key값으로 value값을 변경해줄 수 있다
products.price = '199.99$'이렇게 변경하게 되면 products를 출력했을 때 아래와 같이 출력된다
이처럼 객체에 접근하는 방식으로 아래처럼 버튼의 disabled를 변경한다
console.dir(endBoxClose)개발자 도구 console에 출력하게 되면 endBoxClose에 대한 객체가 나오는데 그 부분도 설정해보면서 이것저것 확인할 수 있다
- 출력예시 이미지
- 밑으로 내려보면 disabled를 확인할 수 있다
현재 버튼이 활성화가 되어있기 때문에 true로 변경해주면 버튼이 비활성화가 된다(종료시)
endBoxClose.disabled = "true";그리고 setSeconds를 지정해줘서 페이지 새로고침시 59 58 부터 시작하는 오류를 수정했다
let seconds = saleNow.setSeconds(59);해당 코드를 saleNow에 추가만 하고 다른 곳에는 표시하지 않았다
초는 계산해서 -1씩 표시만 하는 것이 목표이기 때문이다
전체 코드
구현하는 것보다 TIL쓰는게 더 오래걸린다..
코드는 쓰고 새로고침하면 바로 반영되서 틀리면 고치고 되면 넘어가고 하면 되는데
TIL에 쓰면서 하나하나 설명하려니 오래걸리는 듯....
배고프니 일단 저녁먹고 간단한거 하나 더 해보던가 해야겠다
