diff --git a/examples/webpages/index.html b/examples/webpages/index.html index 62e77b1..66f34c3 100644 --- a/examples/webpages/index.html +++ b/examples/webpages/index.html @@ -38,4 +38,12 @@

JStagram

+ + diff --git a/examples/webpages/pictures.js b/examples/webpages/pictures.js index 4a4f1b3..59cadff 100644 --- a/examples/webpages/pictures.js +++ b/examples/webpages/pictures.js @@ -61,31 +61,17 @@ // install new ones in the order they came pics.forEach((pic) => { - const container = document.createElement('section'); - container.classList.add('picture'); - elMain.appendChild(container); - - const a = document.createElement('a'); - a.classList.add('img'); - a.href = pic.file; - container.appendChild(a); - - let el = document.createElement('img'); - el.src = pic.file; - el.alt = pic.title; - a.appendChild(el); - - el = document.createElement('p'); - el.classList.add('title'); - el.textContent = pic.title; - container.appendChild(el); - - el = document.createElement('div'); - el.classList.add('delete'); - el.textContent = 'X'; - el.dataset.id = pic.id; - el.onclick = requestDelete; - container.appendChild(el); + const template = document.querySelector('#picture_t'); + const newEl = document.importNode(template.content, true).children[0]; + + newEl.querySelector('a.img').href = pic.file; + newEl.querySelector('a.img > img').src = pic.file; + newEl.querySelector('a.img > img').alt = pic.title; + newEl.querySelector('p.title').textContent = pic.title; + newEl.querySelector('div.delete').dataset.id = pic.id; + newEl.querySelector('div.delete').onclick = requestDelete; + + elMain.appendChild(newEl); }); }