function cardGenerate(data) { const page = document.createElement('div'); page.className = 'modelPage'; const num = data.length; const i = Math.floor(Math.random() * num); const title = document.createElement('h2'); title.className = 'port-title'; const span = document.createElement('button'); span.className = 'closebtn'; const img = document.createElement('img'); const para = document.createElement('p'); const lang = document.createElement('div'); lang.className = 'frameworks'; const ul = document.createElement('ul'); ul.className = 'lang-pop'; const list1 = document.createElement('li'); list1.className = 'add-border'; const list2 = document.createElement('li'); list2.className = 'add-border'; const list3 = document.createElement('li'); list3.className = 'add-border'; const btnnice = document.createElement('div'); btnnice.className = 'live-source'; const btn1 = document.createElement('button'); btn1.className = 'live'; const btn2 = document.createElement('button'); btn2.className = 'source'; page.appendChild(title); page.appendChild(span); page.appendChild(img); page.appendChild(para); page.appendChild(lang); lang.appendChild(ul); ul.appendChild(list1); ul.appendChild(list2); ul.appendChild(list3); btnnice.appendChild(btn1); btnnice.appendChild(btn2); page.appendChild(btnnice); img.src = data[i].image; img.className = 'project-image'; title.innerText = data[i].title; span.innerText = 'x'; para.innerText = data[i].text; para.className = 'para1'; list1.innerText = data[i].languages[0]; list2.innerText = data[i].languages[2]; list3.innerText = data[i].languages[3]; btn1.innerHTML = `${data[i].live}<img id="live-btn" src="./live.png" alt="btn">`; btn2.innerHTML = `${data[i].source}<i id="github" class="fab fa-github"></i>`; const mainContent = document.querySelector('.main'); return mainContent.appendChild(page); }