Javascript Task

Donation form with Working input field, progressbar and submit button

by rupesx

HTML

<div class="wrapper" id="mainWrapper">
  <!-- balance amount -->
  <div class="balance-wrap" id="balance-wrap">
    <span id="balance-count"></span> 
    <div class="arrow" id="arrow"></div>
  </div>
      <div class="content">
        <div class="progressBar" id="progressBar">
        <div class="filledUp" id="filledUp"></div>
      </div>
        
        <div class="text-content">
          <p><strong>Only 3 days left</strong> to fund this project.</p>
          <p>Join the <span id="donors">42</span> other donors who have already supported this project. Every dollor helps.</p>
         <form method="post">
          
           <div class="field">  <label for="amt">$</label> <input type="text" id="amt" /></div>
        
        <input id="submit" type="submit" value="Give Now" onclick="submitValue();return false;" />
      </form>
          <a href="">why give $50?</a>
        </div>

      
  </div>
  <div class="btn-group">
    <a href="">Save for later</a>
    <a href="">Tell your friends</a>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*:before,
*:after {
  outline: none;
}
:focus {
  outline: none;
}
body {
  font-family: 'Lato', sans-serif;
}
.arrow {
  position: relative;
  float: right;
  height: 20px;
  width: 0;
}
.arrow:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(51, 51, 51, 0);
  border-top-color: #333333;
  border-width: 10px;
  margin-left: -10px;
}
.balance-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
  background-color: #333;
  color: #fff;
  display: block;
  height: 60px;
  line-height: 1.2;
  padding: 20px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  text-align: center;
}
.balance-wrap span {
  display: block;
}
.wrapper {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.wrapper .progressBar {
  height: 25px;
  background: #eee;
  border-bottom: 2px solid #ccc;
  width: 100%;
}
.wrapper .progressBar .filledUp {
  height: inherit;
  width: 0;
  background-color: #EF5F3C;
}
.content {
  border: 2px solid #ccc;
}
.content .text-content {
  padding: 2em;
}
.content .text-content a {
  color: #1eb7ce;
}
.content .text-content p {
  color: #999;
  font-size: 1.10em;
  line-height: 1.5;
}
.content .text-content p:first-child {
  padding-bottom: 20px;
}
.content .text-content p strong {
  color: #EF5F3C;
}
form {
  margin: 20px -25px;
}
form .field {
  float: left;
  position: relative;
}
form .field label {
  position: absolute;
  top: 30px;
  left: 50px;
  height: 10px;
  width: 10px;
  z-index: 10;
  font-size: 1.2em;
}
form input {
  margin: 0 35px;
  display: inline-block;
  width: 150px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  height: 80px;
}
form input[type="text"] {
  padding:...

JavaScript

var baseWidth = 3000;
var progressBar = document.getElementById('filledUp');
var amt = document.getElementById('amt');
var balAmt = document.getElementById('balance-count');
var arrow = document.getElementById('arrow');
var submit = document.getElementById('submit');
var balanceWrap = document.getElementById('balance-wrap');
var inputAmt, balanceValue, forArrow, totalSum, refund;
var newValue = [];


function submitValue(){
  inputAmt = amt.value;
   newValue.push(Number(inputAmt));
   var totalSum = newValue.reduce(function(a, b){return a + b},0);
 
  //Progressbar variables
   var setValue = ((totalSum/baseWidth)*100)+ '%';
   var balanceValue =  (baseWidth - totalSum);
   var forArrow = ((totalSum/baseWidth)*100)+ '%';
  if(balanceValue < 0){
    balanceValue.toString();
      var refund = Math.abs(balanceValue);
  }
  
  //ProgressBar function
  if(inputAmt <= 3000 && inputAmt > 49 && balanceValue < 0  ){
    progressBar.style.width = setValue;
    balanceWrap.style.display="block";
    balAmt.innerHTML = '$'+ balanceValue + ' still needed for this project';
    arrow.style.width = forArrow;
      if(inputAmt == 3000 || totalSum == 3000){
        submit.disabled = true;
        balAmt.innerHTML = "Thank You for your support! :)";
        arrow.style.width = '100%';
        amt.disabled = true;
      }
     }
  else if(inputAmt.length == 0){
     balAmt.innerHTML = "Please enter amount";
  }
  else if(inputAmt.length < 49){
        balAmt.innerHTML = "Not less then $50";
        console.log(inputAmt);
    }else if(inputAmt > 3000 || totalSum > 3000 || balanceValue < 0 ){
         balAmt.innerHTML = "upto $3000 only" + " will not proceed your extra $"+ refund;
           progressBar.style.width =  '100%';
            arrow.style.width = '100%';
            amt.disabled = true;
            submit.disabled = true;
           // setTimeout(function(){ 
           //      balAmt.innerHTML = "Thank You for your support! :)";
           // }, 2000);
         }
};