Utilizing an Express server, I am retrieving card data with node-fetch and presenting each one in a div through a loop in an EJS template. By applying CSS properties, I position each card on top of one another at the same location. How can I implement a function to randomly select a card every second for 15 seconds to be displayed on the top of the stack?
This is the code snippet for the server:
import express from 'express'
import fetch from 'node-fetch'
async function getAllCards(req, res) {
const data = await fetch('https://pokeapi-enoki.netlify.app/')
const response = await data.json()
res.render('home.ejs', { response })
}
const app = express()
app.get('/', getAllCards)
app.use(express.static('views'))
const listener = app.listen(null, () => {
console.log(`Example app listening on port ${listener.address().port}`)
})
Below is the EJS template used:
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<% for(let i=0; i<response.pokemons.length; i++) { %>
<div class="Card" id="<%= response.pokemons[i].id %>" style="zIndex: 0; background-color: <%= response.pokemons[i].background_color %>">
<div class="header">
<p class="name"><%= response.pokemons[i].name %></p>
<p class="level">Niv. <%= response.pokemons[i].level %><%= response.pokemons[i].abilities[0].icon %></p>
</div>
<div class="image">
<img src="<%= response.pokemons[i].image %>" alt="" srcset="">
</div>
<% for(var a=0; a<response.pokemons[i].abilities.length; a++) { %>
<div>
<div class="abilities">
<span class="AbIcon"><%= response.pokemons[i].abilities[a].icon %></span>
<span class="AbName"><%= response.pokemons[i].abilities[a].name %></span>
<span class="AbLevel"><%= response.pokemons[i].abilities[a].power %></span>
<p><%= response.pokemons[i].abilities[a].description %></p>
</div>
</div>
<% } %>
</div>
<% } %>
</body>
</html>
Lastly, here's the corresponding CSS styling:
.Card {
position: absolute;
border: 2px solid yellow;
border-radius: 10px;
font-size: 8px;
margin-top: 10%;
margin-bottom: 50px;
margin: auto ;
height: 360px ;
width: 250px;
}