How to reuse html/css/javascript in a static website?

Question

I have built an website that displays basic data (strings), that I get from Firebase firestore, in form of a material design card. You enter a code and see the data with the id of the code.

My Problem: At the moment I can only see one card, i would like to have more then one. Just rewriting the same code (with different ids,...) does not work since I want the user to be able to add as many cards as he wants to.

<div class="card"><h4>Data1<h4/><p>Data2<p/><p>Data3<p/></div>

javascript (I did not include the full firebase code)

getRealtimeUpdates = function() {
    docRef.onSnapshot(function (doc) {
        if (doc && doc.exists) {
            const myData = doc.data();
         //in here set the text like this example.innerHTML = myData.exampledata;
        }
    });
};

getRealtimeUpdates();

css (there is more code, but it just sets the background, fonts, colors, nav, ...)

.card {
 position: relative;
top: 60px;
background-color: white;
width: 95%;
margin-left: auto;
margin-right: auto;
}

I tried to use an iframe that shows a site just with the card, but this got messy and would not display correctly on mobile devices.

Another thing that I tried was to display the data in a table, but I wasn't sure how to display it when there is more than one fixed row.

Thanks for any help!

Answer 1

You can append html with the use of JS. Just add a wrapper which will contain all the cards.

html:

<div class="cards"></div>

javascript:

const cards = document.querySelector('.cards');

function cardHtml(myData) {
    return `<div class="card"><p>${myData}</p></div>`;
}

getRealtimeUpdates = function() {
    docRef.onSnapshot(function (doc) {
        if (doc && doc.exists) {
            const myData = doc.data();
            cards.insertAdjacentHTML('beforeend', cardHtml(myData));
        }
    });
};

getRealtimeUpdates();