File tree 4 files changed +76
-0
lines changed
4 files changed +76
-0
lines changed Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < 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
+ </ head >
8
+ < link rel ="stylesheet " href ="style.css ">
9
+ < body >
10
+ < h1 > Random color generator</ h1 >
11
+
12
+ < div class ="container ">
13
+ < div >
14
+ < input type ="color " id ="color ">
15
+ < h4 id ="text "> #000000</ h4 >
16
+ < p > click to change color</ p >
17
+ </ div >
18
+ </ div >
19
+ < script src ="script.js "> </ script >
20
+ </ body >
21
+ </ html >
Original file line number Diff line number Diff line change
1
+
2
+ function randomInteger ( max ) {
3
+ return Math . floor ( Math . random ( ) * ( max + 1 ) ) ;
4
+ }
5
+
6
+ function randomRgbColor ( ) {
7
+ let r = randomInteger ( 255 ) ;
8
+ let g = randomInteger ( 255 ) ;
9
+ let b = randomInteger ( 255 ) ;
10
+ return [ r , g , b ] ;
11
+ }
12
+
13
+ function randomHexColor ( ) {
14
+ let [ r , g , b ] = randomRgbColor ( ) ;
15
+
16
+ let hr = r . toString ( 16 ) . padStart ( 2 , '0' ) ;
17
+ let hg = g . toString ( 16 ) . padStart ( 2 , '0' ) ;
18
+ let hb = b . toString ( 16 ) . padStart ( 2 , '0' ) ;
19
+
20
+ return "#" + hr + hg + hb ;
21
+ }
22
+
23
+ function changeColor ( ) {
24
+ let hex = randomHexColor ( ) ;
25
+ document . getElementById ( 'color' ) . value = hex ;
26
+ document . getElementById ( 'text' ) . innerHTML = hex ;
27
+ }
28
+
29
+ function clickHandler ( event ) {
30
+ changeColor ( ) ;
31
+ event . preventDefault ( ) ;
32
+ }
33
+
34
+ document . addEventListener ( 'click' , clickHandler ) ;
35
+
36
+ changeColor ( ) ;
Original file line number Diff line number Diff line change
1
+ # color {
2
+ width : 50rem ;
3
+ height : 30rem ;
4
+ }
5
+
6
+
7
+ h4 , h5 , p {
8
+ font-family : sans-serif;
9
+ text-align : center;
10
+ }
11
+
12
+ .container {
13
+ width : 100% ;
14
+ height : 100vh ;
15
+ display : flex;
16
+ align-items : center;
17
+ justify-content : center;
18
+ }
Original file line number Diff line number Diff line change
1
+ Subproject commit 07d855499aa9bea6d21e9d59ca1fe18c7d61b674
You can’t perform that action at this time.
0 commit comments