Skip to content

Commit 7130c8d

Browse files
committed
update
1 parent 028e255 commit 7130c8d

File tree

1 file changed

+52
-1
lines changed

1 file changed

+52
-1
lines changed

Extra/29 Blog Post Viewer.html

+52-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
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

0 commit comments

Comments
 (0)