added changing content to flip-card

assets/css/stylesheet.css

@@ -116,6 +116,9 @@ body {
 }
 
 .flip-card {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
     width: 30%;
     align-items: center;
     text-align: center;
@@ -123,17 +126,21 @@ body {
     margin-top: -90px;
 }
 
+.flip-card.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
 .tendrils {
     padding-top: 15px;
     width: 100%;   
 }
 
-.info-layer {
+.info_layer {
     padding-top: 15px;
     padding-bottom: 20px;
 }
 
-
 .flip-card-inner {
   position: relative;
   width: 100%;
@@ -159,13 +166,14 @@ body {
 }
 
 .flip-card-front {
-  background-color: #bbb;
+    
+  background-color: #d4d1d0;
   border-radius: 30px;
   color: black;
 }
 
 .flip-card-back {
-  background-color: #bbb;
+  background-color: #d4d1d0;
   color: black;
   border-radius: 30px;
   transform: rotateY(180deg);

assets/js/script.js

@@ -94,23 +94,35 @@ function getResponse(keyword) {
         return {
             screen: "I'm not sure how to respond. Change your approach.",
             paper: "Unknown",
+            info_layer: "Unknown",
         };
     }
 }
 
+
 function handleInput() {
     var userInput = document.getElementById("user_input").value.trim();
     var response = getResponse(userInput);
     document.getElementById("output").innerText = response.screen;
+    document.querySelector(".info_layer").innerText = response.info_layer; // Update info_layer content
+    document.querySelector("h1").innerText = userInput; // Update h1 text to user input
+    document.querySelector("h1").className = "response-heading"; // Assign suitable class to h1
+
     printing(response.paper);
 
+    // Toggle flip-card visibility
+    var flipCard = document.querySelector(".flip-card");
+    if (userInput) {
+        flipCard.classList.add("visible");
+    } else {
+        flipCard.classList.remove("visible");
+    }
 
     console.log("Paper: " + userInput);
-    console.log("info_layer" + userInput);
+    console.log("info_layer: " + response.info_layer); // Log info_layer content
 }
 
+
 function printing(input){
     fetch("https://hub.xpub.nl/chopchop/cgi-bin/table.cgi?input=" + input);
 }
-
-printing("test test test");

index.html

@@ -41,12 +41,11 @@
         <div class="flip-card-inner">
           <div class="flip-card-front">
         <img class="tendrils" src="assets/img/tendrils.svg"></img>
-        <h2>monster</h2>
+        <h1></h1>
-        <p class="info-layer">a site of tension, ambiguity, anomaly that challenges the established social order. A moster doesn't fit, emerges unexpectedly shedding light on toxic dynamics of power and on the invisible suffering of those who inhabits the border(land)s, the "other".</p>
         <img class="tendrils" src="assets/img/tendrils.svg"></img>
     </div>
     <div class="flip-card-back">
-      <h2>Back of the card</h2>
+      <p class="info_layer"></p>
     </div>
   </div>
 </div>