Commit 5461021a authored by jonathan Courat's avatar jonathan Courat

Create dinamicly the list with an object

parent 4f55e7fd
......@@ -4,52 +4,11 @@
<meta charset="UTF-8">
<title>Shopping list</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/list.js"></script>
</head>
<body>
<h1>My Shopping List</h1>
<!-- all items of cat 1 -->
<h2>category 1</h2>
<fieldset>
<legend class="noprint">Select items for shopping</legend>
<div class="itemToSelect noprint">
<input type="checkbox" id="item_1" name="cat1" value="item 1">
<div class="checkForPrint"></div>
<label for="cat1">Pain</label>
<p class="quantity">1</p>
<button class="plusBt">+</button>
<button class="minusBt">-</button>
</div>
<div class="itemToSelect noprint">
<input type="checkbox" id="item_2" name="cat_1" value="item 2">
<div class="checkForPrint"></div>
<label for="cat_1">beurre</label>
<p class="quantity">1</p>
<button class="plusBt">+</button>
<button class="minusBt">-</button>
</div>
</fieldset>
<!-- all items of cat 2 -->
<h2>category 2</h2>
<fieldset>
<legend class="noprint">Select items for shopping 2</legend>
<div class="itemToSelect noprint">
<input type="checkbox" id="item_3" name="cat_2" value="item 1">
<div class="checkForPrint"></div>
<label for="cat_2">fromage rapé</label>
<p class="quantity">1</p>
<button class="plusBt">+</button>
<button class="minusBt">-</button>
</div>
<div class="itemToSelect noprint">
<input type="checkbox" id="item_4" name="cat_2" value="item 2">
<div class="checkForPrint"></div>
<label for="cat_2">Yahourt</label>
<p class="quantity">1</p>
<button class="plusBt">+</button>
<button class="minusBt">-</button>
</div>
</fieldset>
</body>
<script type="text/javascript" src="js/script.js"></script>
</html>
\ No newline at end of file
</body>
<script type="text/javascript" src="js/script.js"></script>
</html>
\ No newline at end of file
let shopList = {
cat1 : [
"pain",
"pain au lait",
"confiture",
"café",
"thé",
"miel"
],
cat2 : [
"céreals",
"lait",
"nesquick"
]
};
console.log("this is the list");
console.log(shopList);
console.log("script say hi!");
/* Create the items */
console.log(shopList);
function createSection(sectionName, itemList) {
const newSection = document.createElement("fieldset");
let makeItems = `<legend><h2>${sectionName}</h2></legend>`;
for (el in itemList) {
makeItems += addItem(itemList[el]);
itNum++;
}
newSection.innerHTML = makeItems;
document.body.appendChild(newSection);
}
function addItem(itemName) {
return `<div class="itemToSelect noprint">\
<input type="checkbox" id="item_${itNum}" name="cat${itNum}" value="item ${itNum}">\
<div class="checkForPrint"></div>\
<label for="cat${itNum}">${itemName}</label>\
<p class="quantity">1</p>\
<button class="plusBt">+</button>\
<button class="minusBt">-</button>\
</div>`;
}
let itNum = 0;
for (let prop in shopList) {
console.log(`obj.${prop} = ${shopList[prop]}`);
createSection(prop, shopList[prop]);
}
/* Set the interaction */
let items = document.querySelectorAll("input");
items.forEach(function(checkBox){
checkBox.checked = false;
});
......@@ -41,6 +83,7 @@ addEventListenerList(items, 'click', displayItem);
/* PLUS BUTTON */
let plusBt = document.querySelectorAll('.plusBt');
function incrementQuantity() {
......@@ -52,7 +95,9 @@ function incrementQuantity() {
addEventListenerList(plusBt, 'click', incrementQuantity);
/* MINUS BUTTON */
let minusBt = document.querySelectorAll('.minusBt');
function decrementQuantity() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment