`; gallery.appendChild(card); }); // 5. Re-attach event listeners to new buttons attachViewButtonListeners(); } /** * Attaches click listeners to all "View Project" buttons. */ function attachViewButtonListeners() { const viewButtons = gallery.querySelectorAll(".view-project-btn"); viewButtons.forEach((button) => { button.addEventListener("click", () => { const projectId = parseInt(button.dataset.id, 10); openModal(projectId); }); }); } /** * Opens and populates the project details modal. * @param {number} projectId - The ID of the project to show. */ function openModal(projectId) { const project = projects.find((p) => p.id === projectId); if (!project) return; // Populate modal content modalTitle.textContent = project.title; modalImage.src = project.image; modalImage.alt = project.title; modalMaterials.innerHTML = project.materials .map(material => `

${material}

`) .join(""); modalSteps.innerHTML = project.steps .map(step => `

${step}

`) .join(""); // Show modal modal.style.display = "block"; } /** * Closes the project details modal. */ function closeModal() { modal.style.display = "none"; } // --- 4. Event Listeners (Spec IV.C) --- searchInput.addEventListener("input", renderProjects); filterSelect.addEventListener("change", renderProjects); modalCloseBtn.addEventListener("click", closeModal); // Close modal when clicking on the background overlay modal.addEventListener("click", function(event) { if (event.target === modal) { closeModal(); } }); // --- 5. Initialization --- renderProjects(); // Initial render });