Revert "Adding a feature and improving overall UI"

mr-robot-2008 · web-flow · commit e319d9c99b8c · 2022-10-13T17:59:32.000+05:30
diff --git a/color-changing-app-main/color-changing-app-main/app.js b/color-changing-app-main/color-changing-app-main/app.js
@@ -2,17 +2,15 @@
 let colors = [ 'red', 'blue', 'green', 'orange', 'purple', 'black', 'yellow'];
 
 
+
 //change the background of canvas when button is clicked
 let button = document.getElementById('button');
-let canvas = document.getElementById('canvas');
-
-function bgchange(color){
-    canvas.style.backgroundColor = color;
-}
 
 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
@@ -8,24 +8,12 @@
     <title>JavaScript Color Changing App</title>
 </head>
 <body>
-    <div class="container">
-        <div id="canvas">
-            My background color will change when my button below is clicked.
-        </div>
-        
-        <button id="button">Click me!</button>
-    
-        <div class="exactcolor">
-            <span onclick="bgchange('#ff0000')" id = 'red' class = 'colorbutton'></span>
-            <span onclick="bgchange('#0000ff')" id = 'blue' class = 'colorbutton'></span>
-            <span onclick="bgchange('#008000')" id = 'green' class = 'colorbutton'></span>
-            <span onclick="bgchange('#ffa500')" id = 'orange' class = 'colorbutton'></span>
-            <span onclick="bgchange('#800080')" id = 'purple' class = 'colorbutton'></span>
-            <span onclick="bgchange('#000000')" id = 'black' class = 'colorbutton'></span>
-            <span onclick="bgchange('#ffff00')" id = 'yellow' class = 'colorbutton'></span>
-        </div>
+    <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>
diff --git a/color-changing-app-main/color-changing-app-main/style.css b/color-changing-app-main/color-changing-app-main/style.css
@@ -1,76 +1,26 @@
-html{
-    background-image: linear-gradient(120deg, #5f57d1, #c065c0);
-}
-
-.container{
-    min-height: 100vh;
-}
-
 #canvas{
-    background-color: white;
-    color: black;
+    background-color: red;
+    color: white;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-    font-size: 23px;
-    font-weight: bold;
+    font-size: 25px;
     width: 600px;
     height: 500px;
     margin: 50px auto 50px;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 10px;
 }
 
 #button{
-    cursor: pointer;
     text-align: center;
     width: 200px;
     height: 50px;
     margin: 50px auto 50px;
-    color: black;
-    font-weight: bold;
-    font-size: 1.2rem;
+    color: white;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-    background: linear-gradient(-40deg,rgb(221, 106, 18),coral,rgb(255, 77, 77));
+    background: black;
     border-radius: 5px;
     border-style: none;
     display: block;
-    border-radius: 10px;
-}
-
-.exactcolor{
-    display: flex;
-    justify-content: center;
-}
-
-.colorbutton{
-    cursor: pointer;
-    margin: 5px;
-    height: 30px;
-    width: 30px;
-    border-radius: 50%;
 }
-
-#red{
-    background-color: #ff0000;
-}
-#blue{
-    background-color: #0000ff;
-}
-#green{
-    background-color: #008000;
-}
-#orange{
-    background-color: #ffa500;
-}
-#purple{
-    background-color: #800080;
-}
-#black{
-    background-color: #000000;
-}
-#yellow{
-    background-color: #ffff00;
-}
-
