├── README.md
├── app.js
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # javascript-color-change-app
2 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | //Select 7 colors
2 | let colors = [ 'red', 'blue', 'green', 'orange', 'purple', 'black', 'yellow'];
3 |
4 |
5 |
6 | //change the background of canvas when button is clicked
7 | let button = document.getElementById('button');
8 |
9 | button.addEventListener('click', function(){
10 | //select a random number between 0 - 6
11 | let index = parseInt((Math.random()*colors.length)+1);
12 | //grab the canvas
13 | let canvas = document.getElementById('canvas');
14 |
15 | canvas.style.background = `${colors[index]}`
16 | })
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | JavaScript Color Changing App
9 |
10 |
11 |
12 | My background color will change when my button below is clicked.
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | #canvas{
2 | background-color: red;
3 | color: white;
4 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
5 | font-size: 25px;
6 | width: 600px;
7 | height: 500px;
8 | margin: 50px auto 50px;
9 | text-align: center;
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | #button{
16 | text-align: center;
17 | width: 200px;
18 | height: 50px;
19 | margin: 50px auto 50px;
20 | color: white;
21 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
22 | background: black;
23 | border-radius: 5px;
24 | border-style: none;
25 | display: block;
26 | }
27 |
--------------------------------------------------------------------------------