File tree 1 file changed +52
-1
lines changed
1 file changed +52
-1
lines changed Original file line number Diff line number Diff line change 15
15
</ head >
16
16
17
17
< body >
18
+ < h1 > Bolg Generator</ h1 >
18
19
< div class ="main ">
19
20
< div class ="containers ">
20
21
< div class ="card " style ="width: 30rem; height: 32rem; ">
@@ -60,7 +61,53 @@ <h5 class="card-title" id="title3"></h5>
60
61
</ div >
61
62
</ div >
62
63
</ div >
64
+ < button class ="get-random-user-btn4 " id ="button4 " onclick ="fetchAll() "> Fetch Blog</ button >
65
+ < script >
66
+ var button4 = document . getElementById ( "button4" ) ;
67
+ function fetchAll ( ) {
68
+ getUser ( url ) ;
69
+ getUser2 ( url ) ;
70
+ getUser3 ( url ) ;
71
+
72
+ }
73
+ </ script >
63
74
< style >
75
+ # button4 {
76
+ position : absolute;
77
+ top : 10% ;
78
+ left : 50% ;
79
+ transform : translate (-50% , -50% );
80
+ width : 200px ;
81
+ border-radius : 5px ;
82
+
83
+ }
84
+ body {
85
+ background-color : rgba (111 , 111 , 234 , 0.532 );
86
+ }
87
+ h1 {
88
+ text-align : center;
89
+ color : rgb (5 , 6 , 9 );
90
+ font-family : 'Times New Roman' , Times, serif;
91
+ font-size : 50px ;
92
+
93
+ padding : 10px ;
94
+ background-color : rgba (111 , 111 , 234 , 0.532 );
95
+ border-radius : 10px ;
96
+ box-shadow : 0 0 10px rgba (0 , 0 , 0 , 0.5 );
97
+
98
+ }
99
+ button {
100
+ background-color : # 083782e1 ;
101
+ border : none;
102
+ color : white;
103
+ padding : 10px 20px ;
104
+ text-align : center;
105
+ text-decoration : none;
106
+ display : inline-block;
107
+ font-size : 16px ;
108
+ margin : 4px 2px ;
109
+
110
+ }
64
111
.containers {
65
112
display : flex;
66
113
justify-content : center;
@@ -79,6 +126,10 @@ <h5 class="card-title" id="title3"></h5>
79
126
.main {
80
127
display : flex;
81
128
/* flex-wrap: wrap; */
129
+ position : absolute;
130
+ top : 50% ;
131
+ left : 50% ;
132
+ transform : translate (-50% , -50% );
82
133
}
83
134
.card-img-top {
84
135
height : 200px ;
@@ -100,7 +151,7 @@ <h5 class="card-title" id="title3"></h5>
100
151
const getBtn2 = document . querySelector ( '.get-random-user-btn2' ) ;
101
152
const getBtn3 = document . querySelector ( '.get-random-user-btn3' ) ;
102
153
103
- const max = 10 ;
154
+ const max = 9 ;
104
155
const min = 1 ;
105
156
const contentApiUrl = 'https://jsonplaceholder.typicode.com/posts?_limit=3' ;
106
157
You can’t perform that action at this time.
0 commit comments