color-changing-app

silent-programmer-official · web-flow · commit 3ee45a7c4bf0 · 2022-10-13T13:42:31.000+05:30
diff --git a/color-changing-app-main/color-changing-app-main/README.md b/color-changing-app-main/color-changing-app-main/README.md
@@ -0,0 +1 @@
+# javascript-color-change-app
diff --git a/color-changing-app-main/color-changing-app-main/app.js b/color-changing-app-main/color-changing-app-main/app.js
@@ -0,0 +1,16 @@
+//Select 7 colors
+let colors = [ 'red', 'blue', 'green', 'orange', 'purple', 'black', 'yellow'];
+
+
+
+//change the background of canvas when button is clicked
+let button = document.getElementById('button');
+
+button.addEventListener('click', function(){
+    //select a random number between 0 - 6
+    let index = parseInt((Math.random()*colors.length)+1);
+    //grab the canvas
+    let canvas = document.getElementById('canvas');
+
+    canvas.style.background = `${colors[index]}`
+})
diff --git a/color-changing-app-main/color-changing-app-main/index.html b/color-changing-app-main/color-changing-app-main/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <title>JavaScript Color Changing App</title>
+</head>
+<body>
+    <div id="canvas">
+        My background color will change when my button below is clicked.
+    </div>
+    
+    <button id="button">Click me!</button>
+    
+    
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/color-changing-app-main/color-changing-app-main/style.css b/color-changing-app-main/color-changing-app-main/style.css
@@ -0,0 +1,26 @@
+#canvas{
+    background-color: red;
+    color: white;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-size: 25px;
+    width: 600px;
+    height: 500px;
+    margin: 50px auto 50px;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#button{
+    text-align: center;
+    width: 200px;
+    height: 50px;
+    margin: 50px auto 50px;
+    color: white;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    background: black;
+    border-radius: 5px;
+    border-style: none;
+    display: block;
+}
