본문 바로가기
공부일지/Javascript

Vanilla JS. background color random change(feat. gradation)

by 곰인간 2023. 1. 6.

* 버튼을 눌리면 정해진 색깔들을 랜덤으로 조합해 배경화면 색깔이 변화면서 그라데이션 효과를 대각선으로 주게 만들었습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>background</title>
</head>
<body>
    <button id="btn">Change</button>
    <script src="app.js"></script>
</body>
</html>

const colorChange = document.querySelector("#btn");

function changeHandle() {
    const colors = [
    "#ef5777",
    "#575fcf",
    "#4bcffa",
    "#34e7e4",
    "#0be881",
    "#f53b57",
    "#3c40c6",
    "#0fbcf9",
    "#00d8d6",
    "#05c46b",
    "#ffc048",
    "#ffdd59",
    "#ff5e57",
    "#d2dae2",
    "#485460",
    "#ffa801",
    "#ffd32a",
    "#ff3f34"
    ]
    
    const changeColors = colors[Math.floor(Math.random()*colors.length)];
    const changeColors2 = colors[Math.floor(Math.random()*colors.length)];

    document.body.style.backgroundImage = `linear-gradient(to top right, ${changeColors}, ${changeColors2})`
};


colorChange.addEventListener("click", changeHandle);

버튼을 누르면 배경화면 색깔이 바뀐다.

처음에 노마드코더 과제로 나왔을 때 Math, floor, random 이란걸 몰라서 한참을 헤맸다고 한다.

댓글