File tree Expand file tree Collapse file tree 1 file changed +52
-1
lines changed
Expand file tree Collapse file tree 1 file changed +52
-1
lines changed Original file line number Diff line number Diff line change 1515</ head >
1616
1717< body >
18+ < h1 > Bolg Generator</ h1 >
1819 < div class ="main ">
1920 < div class ="containers ">
2021 < div class ="card " style ="width: 30rem; height: 32rem; ">
@@ -60,7 +61,53 @@ <h5 class="card-title" id="title3"></h5>
6061 </ div >
6162 </ div >
6263 </ 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 >
6374 < 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+ }
64111 .containers {
65112 display : flex;
66113 justify-content : center;
@@ -79,6 +126,10 @@ <h5 class="card-title" id="title3"></h5>
79126 .main {
80127 display : flex;
81128 /* flex-wrap: wrap; */
129+ position : absolute;
130+ top : 50% ;
131+ left : 50% ;
132+ transform : translate (-50% , -50% );
82133 }
83134 .card-img-top {
84135 height : 200px ;
@@ -100,7 +151,7 @@ <h5 class="card-title" id="title3"></h5>
100151 const getBtn2 = document . querySelector ( '.get-random-user-btn2' ) ;
101152 const getBtn3 = document . querySelector ( '.get-random-user-btn3' ) ;
102153
103- const max = 10 ;
154+ const max = 9 ;
104155 const min = 1 ;
105156 const contentApiUrl = 'https://jsonplaceholder.typicode.com/posts?_limit=3' ;
106157
You can’t perform that action at this time.
0 commit comments