complete background change color

ShaileshParmar11 · Sep 26, 2020 · 7e024f2 · 7e024f2
commit 7e024f2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Background Color changer</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="root">
+      <button onclick="changeBgColor()">Change Background Color</button>
+    </div>
+  </body>
+
+  <script src="index.js"></script>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,11 @@
+const bgcolor = ["red", "green", "blue"];
+console.log("object");
+
+const button = document.getElementsByTagName("button");
+
+const changeBgColor = () => {
+  let count = Math.floor(Math.random() * 3);
+  document.body.style.backgroundColor = bgcolor[count];
+  //   console.log(bgcolor[count]);
+  //   console.log(count);
+};
diff --git a/styles.css b/styles.css
@@ -0,0 +1,33 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+button {
+  border: 2px solid black;
+  padding: 10px;
+  font-size: 20px;
+  font-weight: 600;
+  border-radius: 10px;
+  background-color: white;
+  outline: 0;
+  cursor: pointer;
+}
+
+button:hover {
+  transition: 0.3s;
+  background-color: black;
+  color: white;
+  border-color: white;
+}
+
+body{
+    background-color: wheat;
+}