Commit 8d7fc0a2 authored by jonathan Courat's avatar jonathan Courat

Add qty with plus button and increment function #3

parent d1235200
...@@ -9,12 +9,32 @@ ...@@ -9,12 +9,32 @@
color: grey; color: grey;
} }
.checkForPrint { .quantity {
display: inline-flex;
}
.plusBt {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 2px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px;
cursor: pointer;
}
.checkForPrint {
display: inline-flex; display: inline-flex;
width: 10px; width: 10px;
height: 10px; height: 10px;
border-style: solid; border-style: solid;
} }
/* @media section */ /* @media section */
@media print { .noprint { display: none; } input { display: none; } } @media print { .noprint { display: none; } input { display: none; } }
......
...@@ -15,11 +15,15 @@ ...@@ -15,11 +15,15 @@
<input type="checkbox" id="item_1" name="cat1" value="item 1"> <input type="checkbox" id="item_1" name="cat1" value="item 1">
<div class="checkForPrint"></div> <div class="checkForPrint"></div>
<label for="cat1">Pain</label> <label for="cat1">Pain</label>
<p class="quantity">1</p>
<button class="plusBt">+</button>
</div> </div>
<div class="itemToSelect noprint"> <div class="itemToSelect noprint">
<input type="checkbox" id="item_2" name="cat_1" value="item 2"> <input type="checkbox" id="item_2" name="cat_1" value="item 2">
<div class="checkForPrint"></div> <div class="checkForPrint"></div>
<label for="cat_1">beurre</label> <label for="cat_1">beurre</label>
<p class="quantity">1</p>
<button class="plusBt">+</button>
</div> </div>
</fieldset> </fieldset>
...@@ -31,11 +35,15 @@ ...@@ -31,11 +35,15 @@
<input type="checkbox" id="item_3" name="cat_2" value="item 1"> <input type="checkbox" id="item_3" name="cat_2" value="item 1">
<div class="checkForPrint"></div> <div class="checkForPrint"></div>
<label for="cat_2">fromage rapé</label> <label for="cat_2">fromage rapé</label>
<p class="quantity">1</p>
<button class="plusBt">+</button>
</div> </div>
<div class="itemToSelect noprint"> <div class="itemToSelect noprint">
<input type="checkbox" id="item_4" name="cat_2" value="item 2"> <input type="checkbox" id="item_4" name="cat_2" value="item 2">
<div class="checkForPrint"></div> <div class="checkForPrint"></div>
<label for="cat_2">Yahourt </label> <label for="cat_2">Yahourt</label>
<p class="quantity">1</p>
<button class="plusBt">+</button>
</div> </div>
</fieldset> </fieldset>
</body> </body>
......
...@@ -36,4 +36,16 @@ function displayItem() { ...@@ -36,4 +36,16 @@ function displayItem() {
} }
addEventListenerList(items, 'click', displayItem); addEventListenerList(items, 'click', displayItem);
\ No newline at end of file
//plusBt[0].previousElementSibling.innerHTML = Number(plusBt[0].previousElementSibling.innerHTML) + 1;
let plusBt = document.querySelectorAll('.plusBt');
function incrementQuantity() {
console.log(this);
this.previousElementSibling.innerHTML = Number(this.previousElementSibling.innerHTML) + 1;
}
addEventListenerList(plusBt, 'click', incrementQuantity);
\ No newline at end of file
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