Mehdi Loukili Mehdi Loukili - 2 months ago 16
CSS Question

Donation days calculator issue

Hey i'd like to know how can i make such calculator
by entering the $ amount you get how many days of donation status
as shown here
https://www.sixth-sen.se/index.php?/donate/
i tried several ways and codes but none of them worked

Answer

Don't use <center>, it's old and deprecated. Instead, use CSS:

$(document).ready(function() {
  var promotion = 3;

  $("#donations").keyup(function() {
    var amount = $("#donations").val();
    if (amount == "") {
      $("#donation_amout").html("<h3>You have not entered any amount.</h3>");
      document.getElementById('amount').value = amount;
    } else if (amount < 0.50) {
      $("#donation_amout").html("<h3>Not acceptable, must be higher than $0.50!</h3>");
      document.getElementById('amount').value = amount;
    } else if (amount < 1) {
      var count = amount * promotion;
      $("#donation_amout").html("<h3>Contributor Status for <b>0</b> days</h3>");
      document.getElementById('amount').value = amount;
    } else if (amount >= 1 && amount < 100000000) {
      var count = Math.floor(amount) * promotion;
      $("#donation_amout").html("<h3>Contributor Status for <b>" + count + "</b> days</h3>");
      document.getElementById('amount').value = amount;
    } else if (amount > 100000000) {
      $("#donation_amout").html("<h3>The amount is out of range!</h3>");
      document.getElementById('amount').value = amount;
    }
  });
});
.amount {
  margin: auto;
  width: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="amount">
  <h2>Donation Amount</h2>
  <b>$</b> 
  <input type="text" placeholder="Input the donation amount and discover what you'd get" id="donations" name="donation">
  <div id="donation_amout"></div>
</div>

Comments