142 lines
4.1 KiB
JavaScript
142 lines
4.1 KiB
JavaScript
const PRODUCT_NAME = "{{PRODUCT_NAME}}", // Gizmo die Eidechse
|
|
PRODUCT_COLOR = "{{PRODUCT_COLOR}}", // Farbe Grün/Blau/Orange
|
|
PRODUCT_COLOR_CHARACTERISTICS = "{{PRODUCT_COLOR_CHARACTERISTICS}}", // (Glänzend)
|
|
PRODUCT_ID = "{{PRODUCT_ID}}"; // #32420
|
|
|
|
window.onload = () => {
|
|
for (let i = 0; i < 10; i++) {
|
|
let labels = document.getElementById("labels");
|
|
|
|
/* CONTAINER */
|
|
|
|
const container = document.createElement("div");
|
|
container.className = "container";
|
|
|
|
/* FIRST */
|
|
|
|
const div = document.createElement("div");
|
|
|
|
const background = document.createElement("div");
|
|
background.className = "background";
|
|
|
|
const content = document.createElement("div");
|
|
content.className = "content";
|
|
|
|
const productName = document.createElement("h1");
|
|
productName.innerHTML = PRODUCT_NAME;
|
|
|
|
const productColor = document.createElement("p");
|
|
productColor.innerHTML = PRODUCT_COLOR;
|
|
productColor.className = "product-color";
|
|
|
|
const productColorCharacteristics = document.createElement("p");
|
|
productColorCharacteristics.innerHTML = PRODUCT_COLOR_CHARACTERISTICS;
|
|
productColorCharacteristics.className = "product-color";
|
|
|
|
const productId = document.createElement("p");
|
|
productId.innerHTML = PRODUCT_ID;
|
|
productId.className = "product-id";
|
|
|
|
const contentDiv = document.createElement("div");
|
|
|
|
contentDiv.appendChild(productName);
|
|
contentDiv.appendChild(productColor);
|
|
contentDiv.appendChild(productColorCharacteristics);
|
|
contentDiv.appendChild(productId);
|
|
|
|
content.appendChild(contentDiv);
|
|
|
|
div.appendChild(background);
|
|
div.appendChild(content);
|
|
|
|
container.appendChild(div);
|
|
|
|
/* SECOND */
|
|
|
|
const div2 = document.createElement("div");
|
|
|
|
const manufacturerInfo = document.createElement("div");
|
|
manufacturerInfo.className = "manufacturer-info";
|
|
|
|
const manufacturer = document.createElement("p");
|
|
manufacturer.innerHTML = "Hersteller: Jan Umbach";
|
|
|
|
const address = document.createElement("p");
|
|
address.innerHTML = "Tannenwäldchen 20";
|
|
|
|
const zipCity = document.createElement("p");
|
|
zipCity.innerHTML = "D-34212 Melsungen";
|
|
|
|
manufacturerInfo.appendChild(manufacturer);
|
|
manufacturerInfo.appendChild(address);
|
|
manufacturerInfo.appendChild(zipCity);
|
|
|
|
div2.appendChild(manufacturerInfo);
|
|
|
|
const additionalInfo = document.createElement("div");
|
|
additionalInfo.className = "additional-info";
|
|
|
|
const additionalInfoText = document.createElement("p");
|
|
additionalInfoText.innerHTML = "Made in Germany";
|
|
|
|
const imgContainer = document.createElement("div");
|
|
imgContainer.className = "img-container";
|
|
|
|
const childrenImg = document.createElement("img");
|
|
childrenImg.src = "../../groupsData/shx-product-label/children.jpg";
|
|
childrenImg.alt = "children";
|
|
childrenImg.className = "children";
|
|
|
|
const ceImg = document.createElement("img");
|
|
ceImg.src = "../../groupsData/shx-product-label/ce.svg";
|
|
ceImg.alt = "ce";
|
|
ceImg.className = "ce";
|
|
|
|
imgContainer.appendChild(childrenImg);
|
|
imgContainer.appendChild(ceImg);
|
|
|
|
additionalInfo.appendChild(additionalInfoText);
|
|
additionalInfo.appendChild(imgContainer);
|
|
|
|
div2.appendChild(additionalInfo);
|
|
|
|
container.appendChild(div2);
|
|
|
|
labels.appendChild(container);
|
|
}
|
|
};
|
|
|
|
/*
|
|
<div class="container">
|
|
<div>
|
|
<div class="background"></div>
|
|
|
|
<div class="content">
|
|
<div>
|
|
<h1>Gizmo die Eidechse</h1>
|
|
<p class="product-color">Farbe Grün/Blau/Orange</p>
|
|
<p class="product-color">(Glänzend)</p>
|
|
<p class="product-id">#32420</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="manufacturer-info">
|
|
<p>Hersteller: Jan Umbach</p>
|
|
<p>Tannenwäldchen 20</p>
|
|
<p>D-34212 Melsungen</p>
|
|
</div>
|
|
|
|
<div class="additional-info">
|
|
<p>Made in Germany</p>
|
|
|
|
<div class="img-container">
|
|
<img class="children" src="children.jpg" />
|
|
<img class="ce" src="ce.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
*/
|