Implemented display random image. Multiple images can be displayed, w…

…ith the newest one displayed first
JoeProgrammer88 · Jun 6, 2024 · f638623 · f638623
1 parent 70538ae
commit f638623
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/js/main.js b/js/main.js
@@ -18,6 +18,11 @@ async function getRandomDogImage() {
     return data;
 }
 function displayDogImage(dogData) {
+    let displayDiv = document.getElementById("display");
+    let img = document.createElement("img");
+    img.src = dogData.message;
+    img.style.width = "300px";
+    displayDiv.insertBefore(img, displayDiv.firstChild);
 }
 function displayError(error) {
 }
diff --git a/ts/main.ts b/ts/main.ts
@@ -55,6 +55,17 @@ async function getRandomDogImage(){
 
 function displayDogImage(dogData:RandomImageResponse){
     // Todo: Display image on page
+    let displayDiv = document.getElementById("display");
+
+    // Create an image element in memory
+    let img = document.createElement("img");
+    img.src = dogData.message;
+
+    // Use css to resize the image
+    img.style.width = "300px";
+
+    // Add image as the first child of the display div but keep the previous images
+    displayDiv.insertBefore(img, displayDiv.firstChild); // insert the new image before the current first image
 }
 
 function displayError(error:Error){