Having an issue with my js script. The function portfolioThumb is working correctly as it shows all thumbs, but the function portfolioModal only loads the first element from portfolioData. My modal uses a simple CSS with the :target pseudo-class.
Everything was fine when I didn't have the modal.
I created a file called "portfolio.js" with the following content:
const portfolioData = [
{
title: "Example1",
desc: "Lorem ipsum dolor et miset execut lorem dausum dolor hamburgefonsz odnit",
tech: "Axure, Photoshop, Illustrator ",
photo: "images/example.png",
thumb: "images/thumb1.png"
},
{
title: "Example2",
desc: "Lorem ipsum dolor et miset execut lorem dausum dolor hamburgefonsz odnit",
tech: "HTML5, Sass, CSS3, jQuery, Javascript",
photo: "images/example.png",
thumb: "images/thumb1.png"
},
{
title: "Example3",
desc: "Lorem ipsum dolor et miset execut lorem dausum dolor hamburgefonsz odnit",
tech: "Adobe After Effects, Adobe Premiere",
photo: "images/example.png",
thumb: "images/thumb1.png"
}
];
function portfolioThumb(portfolio) {
return `
<div class="project">
<a class="btn" href="#open-modal"><img class="project-thumb" src="${portfolio.thumb}"></a>
</div>`;
}
document.getElementById("portfolio").innerHTML = `
${portfolioData.map(portfolioThumb).join("")}`;
function portfolioModal(modal) {
return `
<div>
<a href="#projects" title="Close" class="modal-close">Close</a>
<h1 class="project-title">${modal.title}</h1>
<div class="project-desc">${modal.desc}</div>
<img class="project-photo" src="${modal.photo}">
<div class="project-desc">${modal.tech}</div>
</div>`;
}
document.getElementById("open-modal").innerHTML = `
${portfolioData.map(portfolioModal).join("")}`;
and part of index.html
<!-- PROJECTS -->
<section id="projects">
<div class="content">
<div id="portfolio"></div>
<div id="open-modal" class="modal-window"></div>
</div>
</section>