🎯 Change Color : 랜덤 색상 띄우기

요약

• 📙 프로젝트명 : 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에 요소들을 추가하고 없애는 것을 연습해보았다.