Vihjeiden laskimen rakentaminen HTML: llä, CSS: llä ja JavaScriptillä

Vinkkilaskin on laskin, joka laskee vihjeen laskun prosenttiosuuden perusteella.

Rakennetaan yksi nyt.

Vaihe 1 - HTML:

Luomme lomakkeen halutun määrän syöttämiseksi:

   Tip Calculator 

Tip Calculator

$ Tip:
Results
Tip amount Total Bill with Tip

Vaihe 2 - CSS:

Suunnittelet tyylin haluamallasi tavalla. Voit myös piilottaa tulokset CSS: n avulla ja näyttää ne JavaScriptin kautta, kun käyttäjä on täyttänyt lomakkeen:

 #results { display:none; }

Vaihe 3: JavaScript:

Lisätään onchange-tapahtuma. Onchange-tapahtuma tapahtuu, kun käyttäjä on vuorovaikutuksessa lomakkeen kanssa.

Tämä toiminto suorittaa toiminnon, joka laskee lopullisen laskun määrän prosenttihinnan perusteella ja palauttaa sitten tulokset.

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' }

Näet toimivan esimerkin ja sen koodin osoitteessa Codepen.io.