Exempel på vad jag menade:
webshoppr.html:
HTML-kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebShoppr</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="webshoppr">
<h1 class="heading">WebShoppr</h1>
<div class="settings">
<label>Inkl. moms <input type="checkbox" class="settings__toggle-vat" checked="checked"></label>
</div>
<ul class="products"></ul>
</div>
<script src="webshoppr.js"></script>
</body>
</html>
style.css:
Kod:
html, html * {
box-sizing: border-box;
background-color: #f2f2f2;
}
.webshoppr {
width: 30em;
margin: 5em auto;
box-shadow: 0 0 10px #ddd;
padding: 1em;
font-family: Verdana, Arial, Sans-serif;
}
.heading { text-align: center; }
.settings { text-align: right; }
.products {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.products__item {
padding: .5em;
border: 1px solid #ccc;
border-radius: 3px;
flex-basis: 48%;
margin: 1%;
display: flex;
flex-direction: column;
}
.products__name {
font-size: 1.2em;
color: #239;
}
.products__descr {
margin: .5em .5em 1em;
}
.products__price,
.products__price--no-vat {
margin-top: auto;
text-align: right;
}
/* Först HÄR kommer någon CSS som har med själva uppgiften att göra */
.products__price {
display: none;
}
.vat .products__price {
display: block;
}
.vat .products__price--no-vat {
display: none;
}
webshoppr.js:
Kod:
(() => {
const VAT = 12.5 / 100 // eller vad nu momsen är
doc = document, products = doc.querySelector(".products");
// dummy-data och hjälpare för att skapa en lista av produkter på sidan....
descriptions = [
"Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
"Mollitia veniam aliquid ex, veritatis, earum id tempore ipsam nulla, vero excepturi soluta atque temporibus incidunt maxime!",
"Ut sequi dolores molestias, nemo?"
],
formatPrice = amount => `${ amount.toFixed(2) } kr.`,
E = (tag, attrs = {}, text = "") => {
const elem = doc.createElement(tag);
Object.keys(attrs).forEach(attr => {
elem.setAttribute(attr, attrs[attr]);
});
text && (elem.textContent = text);
return elem;
},
Product = (name, price) => ({
name,
price,
priceNoVat: price - VAT * price,
descr: descriptions[ Math.floor(Math.random() * descriptions.length) ]
});
// skapa list items och lägg till produktlistan
[
Product("Ätbara träskor", 120),
Product("Badboll av pasta", 69),
Product("Magnetisk risgrynsgröt", 49),
Product("Genomskinlig tvål", 25),
Product("Tvådimensionell mat", 199),
Product("En flaska blomkål", 99)
].forEach(product => {
const item = E("li", { "class": "products__item"});
item.appendChild(E("div", { "class": "products__name"}, product.name));
item.appendChild(E("div", { "class": "products__descr"}, product.descr));
item.appendChild(E("div", { "class": "products__price"}, formatPrice(product.price)));
item.appendChild(E("div", { "class": "products__price--no-vat"}, formatPrice(product.priceNoVat)));
products.appendChild(item);
});
// Först HÄR är det som addresserar det som uppgiften handlade om :/
// (lyssna på checkbox-klick och toggla en klass på wrappern webshoppr)
const webshoppr = doc.querySelector(".webshoppr"),
checkbox = webshoppr.querySelector(".settings__toggle-vat"),
applySettings = () => webshoppr.classList.toggle("vat", checkbox.checked);
checkbox.addEventListener("click", applySettings, false);
// kör settingsgrejen en gång direkt onload för att lyda
applySettings();
})();
Jag lägger upp på nån fiddle/codepen/etc också, sec.
EDIT:
https://codepen.io/anon/pen/mMNdKz
/p
