<!DOCTYPE html>
<html lang="ko">
<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">
<title>Color Changer</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>rgb(255, 255, 255)</h1>
<button>Click</button>
<script src="app.js"></script>
</body>
</html>
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
letter-spacing: -1px;
}
h1 {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 3em;
margin-bottom: 20px;
}
button {
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 1.2em;
color: #fff;
border: none;
border-radius: 30px;
padding: 15px 40px;
transition: transform 0.1s ease-out;
mix-blend-mode: hard-light;
background-color: #666;
box-shadow: 0 5px 0 #333;
}
button:active {
box-shadow: 0 0 0 #333;
transform: translateY(5px);
}
const color = document.querySelector('h1');
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
const newColor = makeRandColor();
document.body.style.backgroundColor = newColor;
color.innerText = newColor;
})
const makeRandColor = () => {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
if (r < 150 && g < 150 && b < 150) {
color.style.color = "#fff";
btn.style.color = "#fff";
} else {
color.style.color = "#000";
btn.style.color = "#000";
}
return `rgb(${r}, ${g}, ${b})`;
}
