вопросы пишите мне в телеграмм +375298176892
можно скачать офлайн версию сайта: code.mu old.code.mu

Калькулятор продуктов на JavaScript

В данном разделе мы с вами реализуем калькулятор продуктов. Он будет представлять собой таблицу, в которую пользователь нашего сайта будет вносить свои покупки.

Пусть покупки вносятся с помощью формы. Кроме того, для каждого продукта предусмотрим ссылку на удаление. Сделаем также возможность редактирования названия, цены и количества продукта. Пусть такое редактирование будет происходить по двойному клику по ячейке таблицы.

Пусть под таблицей выводится суммарная стоимость продуктов. Сделаем так, чтобы эта сумма пересчитывалась при удалении и при редактировании продуктов.

Вот образец того, что должно получится:

Вот верстка, которую вы можете использовать при решении задачи:

<div id="parent"> <div id="form"> <input id="name" placeholder="название"> <input id="price" placeholder="цена"> <input id="amount" placeholder="количество"> <input id="add" type="button" value="добавить"> </div> <h2>Таблица продуктов:</h2> <table id="table"> <tr> <th>название</th> <th>цена</th> <th>кол-во</th> <th>сумма</th> <th>удалить</th> </tr> </table> <div id="result"> общий итог: <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; }

Сразу давайте получим ссылки на все нужные теги в переменные:

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');

Скопируйте себе представленные мною заготовки кода.