반응형
요약
- 📙 프로젝트명 : Change Color
- ⚙️ 주요 기능 : 가운데 버튼을 누르면 랜덤한 색상의 동심원이 생기고 버튼의 문구가 바뀜
- 🚩 목적 : CSS, Javascript, 문서화 연습
- 🛠️ 사용 툴 : HTML, CSS, JavaScript
- 🔗 GitHub 링크 : https://github.com/dobbyjang0/javascript-mini-project/tree/main/random-color
기능 설명
가운데 'Change xxx'라 적힌 버튼을 누르면 중앙에서 랜덤한 색상의 원이 하나 생성된다. 해당 원은 3초간 커지며 화면을 덮은 후, 사라지고 동시에 배경색이 해당 색으로 대체된다. 또 버튼을 누를 때 버튼의 단어가 목록의 랜덤한 단어 중 하나로 바뀐다.
반응형
어려웠던 점 / 배웠던 점
화면 중앙에 요소 위치시키기
.wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
어떤 요소를 정중앙에 위치시키기가 쉽지 않았다. 그래서 버튼은 다음과 같이 wrapper로 감싸준 다음 flex에서 중앙 맞춰주는걸 이용했다.
.circle {
width: 200vw;
height: 200vw;
position: absolute;
top: calc(-100vw + 50vh);
left: -50vw;
z-index: -1;
}
동심원들은 우선 크기를 정해주고, position을 absolute로 해주었다. 이후 요소의 중앙을 0으로 이동시킨 다음 화면크기의 반만큼 더해주는 방식을 이용하였다. 더해줄 때 calc()함수를 써야한다는 사실도 알았다. 이 후 애니메이션에서는 scale하는 transform을 이용했다.
DOM에 요소 추가하기 / 제거하기
$colorBtn.addEventListener("click", () => {
const $newCircle = document.createElement("div");
const randomColor = getRandomColor();
$newCircle.classList.add("circle");
$newCircle.style.backgroundColor = randomColor;
$body.appendChild($newCircle);
$colorBtn.innerHTML = `Change<br/>${getRandomWord()}`;
setTimeout(() => {
$body.style.backgroundColor = randomColor;
$newCircle.remove();
}, 3000);
});
DOM에 요소들을 추가하고 없애는 것을 연습해보았다.
반응형
'🖥️ 프로젝트? > 자바스크립트 초미니' 카테고리의 다른 글
Leetcode To Blogpost : 리트코드 문제를 블로그 글로 바꾸기 (0) | 2024.07.24 |
---|---|
💡 Turn On Light : transform 정보 js에서 불러오기 (0) | 2023.01.21 |
🎚️ Your Score : 슬라이더와 카운터 연습 (0) | 2023.01.21 |
댓글