Add files via upload

2023-03-14 17:22:55 +03:00 · 2023-03-14 17:22:55 +03:00 · f30642ff2d
commit f30642ff2d
parent 3d44796eea
3 changed files with 52 additions and 0 deletions
--- a/100_projects/21-background-color-change/index.html
+++ b/100_projects/21-background-color-change/index.html
@ -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>
--- a/100_projects/21-background-color-change/script.js
+++ b/100_projects/21-background-color-change/script.js
@ -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%)`;
+}
--- a/100_projects/21-background-color-change/style.css
+++ b/100_projects/21-background-color-change/style.css
@ -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);
+}