├── index.html ├── main.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Color 8 | 9 | 10 | 11 |

12 |

13 |

Random Color

14 |

15 |

16 |

17 |

Background color :

18 |

Red

19 |

20 | 21 |

22 |

23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | let h1 = document.querySelector('.text-h1') 2 | let btn = document.querySelector('.btn') 3 | 4 | const colorRod = () => { 5 | let randomColor = Math.floor(Math.random()*16777215).toString(16); 6 | document.body.style.backgroundColor = "#" + randomColor; 7 | h1.innerHTML = "#" + randomColor; 8 | } 9 | 10 | btn.addEventListener("click", colorRod); 11 | colorRod(); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body{ 8 | line-height: 1.5; 9 | font-family: 'Mulish', sans-serif; 10 | background-color: red; 11 | } 12 | 13 | .big-one{ 14 | background-color: #fff; 15 | padding:10px 0px; 16 | text-align: center; 17 | } 18 | 19 | .big-one h1{ 20 | color: rgb(131,58,180); 21 | } 22 | 23 | .big-two{ 24 | text-align: center; 25 | margin-top: 350px; 26 | } 27 | 28 | .text{ 29 | background-color: black; 30 | color: white; 31 | width: 450px; 32 | padding: 0 10px; 33 | text-align: center; 34 | display: flex; 35 | margin-left: auto; 36 | margin-right: auto; 37 | border-radius:10px; 38 | } 39 | 40 | .big-two button{ 41 | background: none; 42 | border: 2px black solid; 43 | border-radius: 5px; 44 | padding: 7px 15px; 45 | margin-top: 20px; 46 | } --------------------------------------------------------------------------------