diff --git a/css/style.css b/css/style.css
index b48ee6f..3893912 100644
--- a/css/style.css
+++ b/css/style.css
@@ -53,3 +53,28 @@ shop-counter {
position: relative;
z-index: 2;
}
+
+toy-shelf ul {
+ position: absolute;
+ z-index: 3;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ vertical-align: bottom;
+}
+
+toy-shelf li {
+ display: inline-block;
+ width: 70px;
+ height: 70px;
+ margin: 5px 8px;
+ padding: 5px;
+ background-color: black;
+ color: red;
+ font-size: 10px;
+ vertical-align: bottom;
+ position: relative;
+ top: 5px;
+ left: 2px;
+ text-align: center;
+}
diff --git a/index.html b/index.html
index 3f5f8b7..e3fc12f 100644
--- a/index.html
+++ b/index.html
@@ -18,14 +18,14 @@
Featured
-
- - Armada Megatron
- - Leo Prime
- - Coronation Starscream
+
+ - Armada Megatron
+ - Leo Prime
+ - Coronation Starscream
-
+
- Armada Starscream
- Leo Nemesis Prime
- Optimus Prime
@@ -37,14 +37,14 @@
New Arrivals
-
+
- Armada Megatron
- Leo Prime
- Coronation Starscream
-
-
+
+
- Armada Starscream
- Leo Nemesis Prime
- Optimus Prime
diff --git a/js/elements.js b/js/elements.js
index 1854a2b..a6b95c6 100644
--- a/js/elements.js
+++ b/js/elements.js
@@ -128,18 +128,22 @@ class ToyShelf extends Rect {
this.height = 100;
this.depth = 100;
- let style = document.createElement("style");
-/* style.textContent = `
-
- .rect {
- transform: translateZ(-${this.depth / 2}px) rotateX(-30deg);
- }
- `*/
-
const rect = this.createRect();
+ shadow.innerHTML = `
+
+ `
+
+ // TODO: change slot items to render on shelf
+ shadow.firstElementChild.addEventListener('slotchange', e => {
+ let slot = e.target;
+ if (slot.name == 'toy-list') {
+ this.items = slot.assignedElements().map(elem => elem.textContent);
+ console.log("Items: " + this.items);
+ }
+ });
+
shadow.appendChild(rect);
- shadow.appendChild(style);
}
}