├── index.html
├── script.js
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Colour Flipper
7 |
8 |
9 |
10 | Colour Flipper
11 | #FFFFFF
12 |
13 |
14 |
15 |
16 |
17 |
18 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const btn = document.getElementById("btn")
2 | const colortext = document.getElementById("color")
3 | const wrap = document.getElementById("wrap")
4 | const hex = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']
5 |
6 | btn.addEventListener('click',changeBg)
7 |
8 | function changeBg()
9 | {
10 | let hexColor = '#'
11 | for(let i=1;i<=6;i++)
12 | {
13 | hexColor += randHexValue()
14 | }
15 | wrap.style.backgroundColor = hexColor
16 | colortext.innerHTML = hexColor
17 | }
18 | function randHexValue(){
19 | let randomIndex = Math.floor(Math.random()*16)
20 | return hex[randomIndex]
21 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin:0;
3 | padding:0;
4 |
5 | }
6 |
7 | #heading{
8 | font-family: Arial, Helvetica, sans-serif;
9 | color: rgb(180, 32, 32);
10 | margin: 15px;
11 | font-weight: bold;
12 | font-size: 20px;
13 |
14 | }
15 | #color{
16 | float: right;
17 |
18 |
19 | }
20 |
21 |
22 | #wrap{
23 | display: flex;
24 | justify-content: center;
25 | align-items: center;
26 | height: 90vh;
27 | width: 100vw;
28 | border-top: 3px solid #323232;
29 |
30 | }
31 | button{
32 | color: white;
33 | background-color: red;
34 | padding: 12px;
35 | width: 250px;
36 | height: 60px;
37 | cursor: pointer;
38 | }
39 |
--------------------------------------------------------------------------------