Shopping calculator in JavaScript
In this section, we implement a shopping calculator. It will be a table in which the user of our site will input their purchases.
Let purchases be inserted using the form. In addition, for each product, we will provide a link to delete. We will also make it possible to edit the name, price and amount of the product. Let such editing take place by double-clicking on a table cell.
Let the total sum of products be displayed under the table. Let's make sure that this value is recalculated when deleting and editing purchases.
Here is an example of what should be:
Here is the layout that you can use when solving the problem:
<div id="parent">
<div id="form">
<input id="name" placeholder="name">
<input id="price" placeholder="price">
<input id="amount" placeholder="amount">
<input id="add" type="button" value="add">
</div>
<h2>Product table:</h2>
<table id="table">
<tr>
<th>name</th>
<th>price</th>
<th>amount</th>
<th>cost</th>
<th>remove</th>
</tr>
</table>
<div id="result">
total: <span id="total">0</span>
</div>
</div>
* {
box-sizing: border-box;
}
#parent {
margin: 0 auto;
width: 500px;
}
#form {
display: flex;
margin-bottom: 15px;
}
#form input {
padding: 8px;
width: 24%;
margin: 0 0.5% 10px 0.5%;
}
h2 {
margin-top: 0;
margin-bottom: 7px;
}
#table {
width: 100%;
margin-bottom: 10px;
}
#table td, #table th {
padding: 8px;
text-align: center;
border: 1px solid black;
}
#table td.remove {
color: blue;
cursor: pointer;
text-decoration: underline;
}
#table td.remove:hover {
text-decoration: none;
}
#result {
text-align: right;
margin-right: 10px;
}
Immediately, let's get links to all the necessary tags in variables:
let name = document.querySelector('#name');
let price = document.querySelector('#price');
let amount = document.querySelector('#amount');
let add = document.querySelector('#add');
let table = document.querySelector('#table');
let total = document.querySelector('#total');
Copy the code blanks presented by me.