import {createProfileSection} from "./createProfileSection.js"; import {createAbilitiesSection} from "./createAbilitiesSection.js"; import {createDescriptionSection} from "./createDescriptionSection.js"; export function androidResultTable(data, creatureName) { let container = document.createElement('div'); container.className = 'container android'; let creatureTitle = document.createElement('h2'); creatureTitle.textContent = creatureName.toUpperCase(); container.appendChild(creatureTitle) let image = document.createElement('img'); image.src = `${window.IMG}/android.jpg`; image.onerror = () => { image.src = `${window.IMG}/404.jpg` }; image.style.width = '275px'; image.style.height = '275px'; container.appendChild(image); let description = createDescriptionSection(data); container.appendChild(description); Object.entries(data).forEach(([key, value]) => { if (key === 'thinker' || key === 'worker' || key === 'warrior') { let typeTitle = document.createElement('h2'); typeTitle.textContent = key.toUpperCase(); container.appendChild(typeTitle); // Create a div for each type (thinker, worker, or warrior) let typeContainer = document.createElement('div'); typeContainer.className = 'typeContainer'; // we'll use this in css let profile = createProfileSection(value); let abilities = createAbilitiesSection(value); // Append profile and abilities to the typeContainer, instead of the main container typeContainer.appendChild(profile); typeContainer.appendChild(abilities); // Finally, append the typeContainer to the main container. container.appendChild(typeContainer); } }); resultSection.appendChild(container); }