Как да изградим калкулатор на съвети с HTML, CSS и JavaScript

Tip Calculator е калкулатор, който изчислява бакшиш въз основа на процента от общата сметка.

Нека да построим такъв сега.

Стъпка 1 - HTML:

Създаваме формуляр, за да въведем предпочитаната сума:

   Tip Calculator 

Tip Calculator

$ Tip:
Results
Tip amount Total Bill with Tip

Стъпка 2 - CSS:

Вие проектирате стила, както искате. Можете също така да използвате CSS, за да скриете резултатите и да ги покажете чрез JavaScript, след като потребителят попълни формуляра:

 #results { display:none; }

Стъпка 3: JavaScript:

Добавяме събитие onchange. Събитието onchange се случва, когато потребителят взаимодейства с формуляра.

Това действие ще изпълни функция, която изчислява крайната сума на сметката въз основа на процентния връх, след което връща резултатите.

document.querySelector('#tip-form').onchange = function(){ var bill = Number(document.getElementById('billTotal').value); var tip = document.getElementById('tipInput').value; document.getElementById('tipOutput').innerHTML = `${tip}%`; var tipValue = bill * (tip/100) var finalBill = bill + tipValue console.log(finalBill) var tipAmount = document.querySelector('#tipAmount') var totalBillWithTip = document.querySelector('#totalBillWithTip') tipAmount.value = tipValue.toFixed(2); totalBillWithTip.value =finalBill.toFixed(2); //Show Results document.getElementById('results').style.display='block' }

Можете да видите работещ пример и неговия код на Codepen.io.