Donation Box

by Pranab Dey

HTML

<progress value="0" max="100" id="progress"></progress><br/><span class="amount"></span>
<p>
Donate: <input type="tel" class="money"/><button class="btn">Donate</button>
</p>

JavaScript

var btn = document.querySelector(".btn"),
money = document.querySelector(".money"),
prog = document.getElementById("progress"),
amnt = document.querySelector(".amount");

btn.addEventListener("click", ()=>{
  if(isNaN(money.value)===false || money.value===""){
    if(prog.value===prog.max){
      btn.setAttribute("disabled", "disabled");
      amnt.innerHTML = `Thank You. Donation is Full.<br>
      Total donation: $${prog.value}`;
    }
    else{
      prog.value = parseInt(prog.value) + parseInt(money.value);
      amnt.innerHTML = `Total donation: $${prog.value}<br>
      and $${prog.max-prog.value} is left`;
    }
  }
  else{
    alert("Please type any amount!");
  }
})