Produktkalkulator på JavaScript
I denne delen skal vi implementere en produktkalkulator. Den vil være en tabell, som brukeren av nettstedet vårt kan legge inn sine kjøp i.
La kjøpene legges inn via et skjema. I tillegg skaffer vi en slettelink for hvert produkt. Vi lager også mulighet for redigering av produktets navn, pris og antall. La en slik redigering skje ved dobbeltklikk på en tabellcelle.
La den totale kostnaden for produktene vises under tabellen. La oss sørge for at denne summen blir oppdatert ved sletting og ved redigering av produkter.
Her er et eksempel på hvordan det skal se ut:
Her er HTML-strukturen du kan bruke når du løser oppgaven:
<div id="parent">
<div id="form">
<input id="name" placeholder="navn">
<input id="price" placeholder="pris">
<input id="amount" placeholder="antall">
<input id="add" type="button" value="legg til">
</div>
<h2>Produkttabell:</h2>
<table id="table">
<tr>
<th>navn</th>
<th>pris</th>
<th>antall</th>
<th>beløp</th>
<th>slett</th>
</tr>
</table>
<div id="result">
total sum: <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;
}
La oss umiddelbart hente referanser til alle nødvendige tagger i variabler:
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');
Kopier kodeskjelet jeg har presentert til deg.
