added changing content to flip-card

master
bernadette 8 months ago
parent 10ce403696
commit 20f8c23c71

@ -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);

@ -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");

@ -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>
<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>
<h1></h1>
<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>

Loading…
Cancel
Save