x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-14 17:22:55 +03:00 committed by GitHub
parent 3d44796eea
commit f30642ff2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
100_projects/21-background-color-change/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Color</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<button id="btn">Change Me</button>
</body>
</html>

8
100_projects/21-background-color-change/script.js Normal file
View File

@ -0,0 +1,8 @@
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
document.body.style.background = randomBg();
});
function randomBg() {
return `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
}

31
100_projects/21-background-color-change/style.css Normal file
View File

@ -0,0 +1,31 @@
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
button {
background:rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
color: white;
padding: 1rem;
font-size: 1.2rem;
box-shadow:
5px 5px 6px rgba(0, 0, 0, 0.3),
-5px -5px 6px rgba(0, 0, 0, 0.3);
border-radius: 5px;
border: none;
transition: transform 0.1s linear;
cursor: pointer;
}
button:focus {
outline: none;
}
button:active {
box-shadow: 0;
transform: translate(2px, 2px);
}