-
11월 22일
-
별점 이벤트 구현 시 반복되던 if문을 함수로 리팩토링했습니다.
const setBtnStarImg = (posId, pos) => { const halfStar = posId - 1; for (let i = 0; i < posId; i++) { if (pos <= 25) { btnStarImg[i].setAttribute("src", "./src/img/icon_star_1.png"); btnStarImg[halfStar].setAttribute("src", "./src/img/icon_star_2.png"); } else { btnStarImg[i].setAttribute("src", "./src/img/icon_star_1.png"); } } for (let i = posId; i < 5; i++) { btnStarImg[i].setAttribute("src", "./src/img/icon_star_3.png"); } };
-
-
11월 21일
-
css가 아닌 js로 별점 호버 이벤트 구현 시 마우스 위치 offset과 dataset으로 구분
-
별점 호버 이벤트 구현시 사용한 단순 if문의 리팩토링 필요
let isClick = false; [...btnStar].forEach((star) => { star.addEventListener("mousemove", (event) => { let pos = event.offsetX; let posId = event.target.id; if (isClick) { return; } if (posId === "1") { if (pos < 2) { btnStar[0].setAttribute("src", "./src/img/icon_star_3.png"); } else if (pos <= 25) { btnStar[0].setAttribute("src", "./src/img/icon_star_2.png"); } else { btnStar[0].setAttribute("src", "./src/img/icon_star_1.png"); } btnStar[1].setAttribute("src", "./src/img/icon_star_3.png"); btnStar[2].setAttribute("src", "./src/img/icon_star_3.png"); btnStar[3].setAttribute("src", "./src/img/icon_star_3.png"); btnStar[4].setAttribute("src", "./src/img/icon_star_3.png"); } else if (posId === "2") { // 이하 생략 } }); });
-
-
11월 5일
- html 시맨틱 마크업 및 css style 작업