I started a challenge which is a kind of calculator for restaurant users enter the bill value and their number and use the present of tip they want to pay them they get the result of how much they pay for each
HTML code
<input type="number" placeholder="0" class="enter billJS" id="n1">
<button class="percent-value n5 nJS1" name="b1">5%</button>
<button class="percent-value n10 nJS2" name="b2">10%</button>
<button class="percent-value n15 nJS3">15%</button>
<input type="number" placeholder="0" class="enter personJs" id="n2">
<div class="per-person">$0.00</div>
<div class="per-person pere-person">$0.00</div>
JavaScript code
var bill_value =document.querySelector(".billJS").value;
var NumberOfPeople = document.querySelector(".personJs").value;
var FivePersent = document.querySelector(".n5")
var TenPersent = document.querySelector(".n10")
var FifteenPersent = document.querySelector(".n15")
FivePersent.onclick = function(){
FivePersent.setAttribute("style", "background-color: RGB(38,194,173)")
document.querySelector(".per-person").innerHTML ="$"+ ((bill_value * 0.05)/NumberOfPeople).toFixed(2)
document.querySelector(".pere-person").innerHTML ="$"+ ((bill_value*1.05)/NumberOfPeople).toFixed(2)
}
TenPersent.onclick = function multiply(){
TenPersent.setAttribute("style", "background-color: RGB(38,194,173)")
document.querySelector(".per-person").innerHTML = "$"+ ((bill_value * 0.1)/NumberOfPeople).toFixed(2)
document.querySelector(".pere-person").innerHTML = "$"+ ((bill_value * 1.1)/NumberOfPeople).toFixed(2)
}
FifteenPersent.onclick =function= function multiply(){
FifteenPersent.setAttribute("style", "background-color: RGB(38,194,173)")
document.querySelector(".per-person").innerHTML = "$"+ ((bill_value * 0.15)/NumberOfPeople).toFixed(2)
document.querySelector(".pere-person").innerHTML = "$"+ ((bill_value * 1.15)/NumberOfPeople).toFixed(2)
}
some of the classes were used for the CSS document
sorry for the miss I'm just a beginner
