I'm currently working on creating a basic product list with the ability to edit each product. My challenge right now is figuring out how to enable editing by double-clicking on a product. Since English isn't my first language, I hope you can understand me clearly. Below is the code snippet:
<div class="container">
<h1>Product List</h1>
<input type="text" name="newProduct" id="newProduct" placeholder="Enter your product here"/>
<ul id="productList"></ul>
<input type="checkbox" id="selectAll"/><label for="Select all">Select all</label>
<button id="deleteDoneProducts">Delete Selected</button>
</div>
CSS
* {
box-sizing:border-box;
}
body {
font-family: Tahoma, sans-serif;
}
.container {
margin:0 auto;
width:600px;
}
h1, #newProduct {
text-align: center;
width:598px;
}
#newProduct {
border:1px solid #999;
padding: 20px;
font-size: 28px;
box-shadow: 0px 0px 3px #888;
}
#productList {
list-style: none;
padding-left:0;
background-color: #F2F2F2;
}
.product {
padding: 15px 0px 15px 40px;
margin: 10px;
position: relative;
font-size: 24px;
box-shadow: 2px 2px 3px #848484;
background-color: #fff;
cursor: pointer;
text-transform: capitalize;
color:#000;
overflow: hidden;
}
.product:hover {
background-color: #F2F2F2;
}
.doneProduct {
margin-right: 40px;
}
.remove {
background-image: url(ico/delete_ico.png);
background-position: 0 0;
width:30px;
height: 30px;
position: absolute;
right: 20px;
top:13px;
display: none;
}
.remove:hover {
background-position: -34px 0px;
}
.product:hover .remove {
display: block;
}
#deleteDoneProducts {
float: right;
background-color: #a3d5df;
color: #fff;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 900;
}
#deleteDoneProducts:hover {
background-color: #5fb5c7;
cursor: pointer;
}
jquery
function addNewProduct(e) {
if(e.keyCode == 13) {
var toAdd = $('input[name=newProduct]').val();
$('#productList').append('<li class="product"> <input type="checkbox" class="doneProduct"/>'+toAdd+'<div class="remove"></div><li/>');
$('#newProduct').val('');
e.preventDefault();
}
};
function deleteProduct() {
$(this).parent().remove();
};
function productDone() {
if (!$(this).is(":checked")){
$(this).parent().css({'textDecoration': 'none', 'color': '#000'})
} else {
$(this).parent().css({'textDecoration': 'line-through', 'color': '#999'});
};
};
function deleteAllSelected() {
$(".doneProduct:checked").parent().remove();
$('input[type="checkbox"]').removeAttr("checked");
};
function selectAllProducts() {
if (!$(".doneProduct").is(":checked")) {
$(".doneProduct").prop('checked', this.checked);
$(".doneProduct").parent().css({'textDecoration': 'line-through', 'color': '#999'});
} else {
$(".doneProduct").parent().css({'textDecoration': 'none', 'color': '#000'});
$(".doneProduct").prop('checked', this.checked);
}
};
$(function() {
$("#newProduct").on('keypress', addNewProduct);
$(document).on('click', ".remove", deleteProduct);
$(document).on('change', ".doneProduct", productDone);
$("#deleteDoneProducts").on('click', deleteAllSelected);
$("#selectAll").on('click', selectAllProducts);
$(".product").on('dbclick', editProductName);
})
https://jsfiddle.net/qp3nnfc5/5/ - this is fiddle)