File tree Expand file tree Collapse file tree 3 files changed +69
-66
lines changed
Source-Code/RandomColorGenerator Expand file tree Collapse file tree 3 files changed +69
-66
lines changed Original file line number Diff line number Diff line change 11<!DOCTYPE html>
22< html lang ="en ">
3- < head >
4- < meta charset ="UTF-8 ">
5- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6- < title > Document</ title >
7- < link rel ="stylesheet " href ="style.css ">
8- </ head >
9- < body >
3+ < head >
4+ < meta charset ="UTF-8 " />
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6+ < title > Random Color Generator</ title >
7+ < link rel ="stylesheet " href ="style.css " />
8+ </ head >
9+ < body >
10+ < header >
11+ < h1 > Random Color Generator</ h1 >
12+ </ header >
1013 < div class ="main ">
11- < div class ="container ">
12- < h3 id ="color-code "> #fff</ h3 >
13- < button id ="btn "> Click me</ button >
14- </ div >
14+ < div class ="container ">
15+ < h3 id ="color-code "> #fff</ h3 >
16+ < button id ="btn "> Click me</ button >
17+ </ div >
1518 </ div >
16- < script src ="script.js ">
17-
18- </ script >
19- </ body >
20- </ html >
19+ < script src ="script.js "> </ script >
20+ </ body >
21+ </ html >
Original file line number Diff line number Diff line change 1- const getColor = ( ) =>
2- {
3- const randomNumber = Math . floor ( Math . random ( ) * 1677215 ) ;
4- const randomCode = "#" + randomNumber . toString ( 16 ) ;
5- console . log ( randomNumber , randomCode ) ;
6- document . body . style . backgroundColor = randomCode
7- document . getElementById ( "color-code" ) . innerText = randomCode
8- navigator . clipboard . writeText ( randomCode ) //Copy the color code to clipboard also
9- }
10- //function call
11- document . getElementById ( "btn" ) . addEventListener (
12- "click" ,
13- getColor
14- )
15- //init call
16- getColor ( ) ;
17-
1+ const getColor = ( ) => {
2+ const randomNumber = Math . floor ( Math . random ( ) * 1677215 ) ;
3+ const randomCode = `#${ randomNumber . toString ( 16 ) } ` ;
4+ console . log ( randomNumber , randomCode ) ;
5+ document . body . style . backgroundColor = randomCode ;
6+ document . getElementById ( 'color-code' ) . innerText = randomCode ;
7+ navigator . clipboard . writeText ( randomCode ) ; // Copy the color code to clipboard also
8+ } ;
9+ // function call
10+ document . getElementById ( 'btn' ) . addEventListener (
11+ 'click' ,
12+ getColor ,
13+ ) ;
14+ // init call
15+ getColor ( ) ;
Original file line number Diff line number Diff line change 1- * {
2- margin : 0 ;
3- padding : 0 ;
4- box-sizing : border-box;
5- font-family : sans-serif;
1+ * {
2+ margin : 0 ;
3+ padding : 0 ;
4+ box-sizing : border-box;
5+ font-family : sans-serif;
66}
7- body
8- {
9- transition : 1s ;
7+
8+ body {
9+ transition : 1s ;
1010}
11- .main
12- {
13- width : 100% ;
14- height : 100vh ;
15- display : flex;
16- justify-content : center;
17- align-items : center;
11+
12+ h1 {
13+ font-size : 35px ;
14+ text-align : center;
1815}
19- .container
20- {
21- width : 30rem ;
22- padding : 10px ;
23- border-radius : 10px ;
24- background-color : aliceblue;
25- font-size : 40px ;
26- text-align : center;
2716
17+ .main {
18+ width : 100% ;
19+ height : 100vh ;
20+ display : flex;
21+ justify-content : center;
22+ align-items : center;
23+ }
2824
25+ .container {
26+ width : 30rem ;
27+ padding : 10px ;
28+ border-radius : 10px ;
29+ background-color : aliceblue;
30+ font-size : 40px ;
31+ text-align : center;
2932}
30- button {
31- display : block;
32- width : 100% ;
33- background-color : black;
34- color : white;
35- border : none;
36- border-radius : 5px ;
37- font-size : 40px ;
38- margin-top : 5px ;
3933
40- }
34+ button {
35+ display : block;
36+ width : 100% ;
37+ background-color : black;
38+ color : white;
39+ border : none;
40+ border-radius : 5px ;
41+ font-size : 40px ;
42+ margin-top : 5px ;
43+ cursor : pointer;
44+ }
You can’t perform that action at this time.
0 commit comments