ability to add more images to the page if the user want to get more images

3 years ago · 8943ab6597
parent 7aafbefc2b
commit 8943ab6597
3 changed files with 17 additions and 1 deletions
--- a/random-image-generator/index.html
+++ b/random-image-generator/index.html
@ -9,7 +9,7 @@
  <body>
    <h1>Random Image Feed</h1>
    <div class="container"></div>
-
+       <button onclick="searchagain()"> More</button>
    <script src="script.js"></script>
  </body>
 </html>
--- a/random-image-generator/script.js
+++ b/random-image-generator/script.js
@ -14,4 +14,12 @@ function getRandomSize() {

 function getRandomNr() {
    return Math.floor(Math.random() * 10) + 300
+}
+function searchagain(){
+  
+    for(let i = 0; i < rows * 3; i++) {
+        const img = document.createElement('img')
+        img.src = `${unsplashURL}${getRandomSize()}`
+        container.appendChild(img)
+    }
 }
--- a/random-image-generator/style.css
+++ b/random-image-generator/style.css
@ -34,3 +34,11 @@ body {
  width: 300px;
  max-width: 100%;
 }
+button{
+  background:rgb(98, 219, 142);
+  border:2px solid rgb(94, 161, 123);
+  border-radius:25px;
+  padding:20px;
+  font-size:25px;
+  color:white;
+}