Background Color Changer

HuXn-WebDev · HuXn-WebDev · commit 8ae5c620c95e · 2022-06-21T07:06:51.000-07:00
diff --git a/15. Background Color Changer/app.js b/15. Background Color Changer/app.js
@@ -0,0 +1,16 @@
+const btn = document.getElementById("btn");
+let hex = document.getElementById("hexCode");
+
+function randomColor() {
+  let letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+btn.addEventListener("click", () => {
+  document.body.style.backgroundColor = randomColor();
+  hex.innerHTML = randomColor();
+});
diff --git a/15. Background Color Changer/index.html b/15. Background Color Changer/index.html
@@ -0,0 +1,15 @@
+<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" />
+    <title>Random Background Color Changer</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <button id="btn">Click Me</button>
+    <h2 id="hexCode">#8a2be2</h2>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/15. Background Color Changer/style.css b/15. Background Color Changer/style.css
@@ -0,0 +1,32 @@
+body {
+  background: blueviolet;
+  min-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+h2 {
+  color: #fff;
+  font-weight: 200;
+}
+
+button {
+  padding: 15px;
+  background: transparent;
+  border: 2px solid white;
+  color: #fff;
+  transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+button:hover {
+  background: #fff;
+  color: #000;
+  cursor: pointer;
+}
+
+button:active {
+  padding: 5px;
+}
