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
+
+
+
+ error
+ X
+
+
+
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);
});
}