progress bar

by Pranab Dey

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container mx-auto">
  <div class="row">
    <h1>Recreate this using HTML & CSS</h1>
  </div>
  <div class="row">
    <div class="box">
    <span> <span id="totalAmt">$167</span> <span id="amtText">still needed for this project </span></span>
    </div>
  </div>
  <div class="row bottomContainer mx-auto">
    <div class="progressbarContainer">
      <progress class="col-12" max="167" value="0" id="progressbar"></progress>
      <!-- <div class="col-8 orange"></div>
      <div class="col-4 white"></div> -->
    </div>
    
    <div class="content">
      <div>
        <span class="orangeText">
          Only 3 days left
        </span>
        <span class="normalText">
          to fund this project.
          Joing the <b>42</b> other donors who have already supported this project. Every dollar helps.
        </span>
      </div>
      <div class="row">
        <div class="col-12">
          <input id="donateAmt"  class="input col-5 py-2 mr-1" type="text" name="donateAmt" placeholder="$">
          <button onclick="calculateTotalAmt(); return false;" class="col-6 py-2 ml-1 btn btn-success">Give Now</button>
  
        </div>
        <div class="col-5">
          <i class="link">why give $50?</i>
        </div>
      </div>
    </div>
  </div>
  <div class="mx-auto buttonsGroup mt-2">
    <button class="col-6 btn btn-default">Save for later</button>
    <button class="col-6 btn btn-default">Tell your friends</button>
  </div>
</div>

CSS

/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}

/* Fonts */
h1 {
  font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
  font-size: 2.5em;
  font-weight: bold;
}

.container {
  margin: 2em auto;
  max-width: 630px;
  text-align: center;
}

/* COLORS: 
  blue: #20A1D4;
  green: #1CBC2C;
  orange: #EF5F3C;
  black: #424242;
  grey: #777;
  light grey: #eaeaea;
*/

/* Your CSS goes here */
.orange {
  background-color: #EF5F3C;
}

.orangeText {
    color: #EF5F3C;  
}

.white {
  background-color: #ffffff;
}

.box{
  background-color: #424242;
  width: 250px;
  height:30px;
  border-radius: 2px !important;
  margin:auto;
  line-height: 1.7;
  position: relative;
  border-radius: 10px;
}

.box:after{
  content: '';
	position: absolute;
	bottom: -5%;
	left: 85%;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-top-color: #424242;
	border-bottom: 0;
	/* border-left: 0; */
	margin-left: -5px;
	margin-bottom: -5px;
}
.box > span {
  color: #fff;
  z-index: 1;
}
.bottomContainer{
  border: 1px solid  #eaeaea;  
  width: 250px;
  margin-top: 15px;
}

.content{
  padding: 10px;
  font-size: 14px;
  color: #777;
  text-align: left !important;
}
#donateAmt{
  border: 1px solid #eaeaea;
  text-indent: 0;
}

#donateAmt::placeholder{
  color: #777;
}
.link{
  color: #20A1D4;
  font-size: 12px;
}
.buttonsGroup {
   width: 250px;
}
.buttonsGroup > button{
  font-size: 14px;
}
.btn-success {
  background-color: #1CBC2C;
}
.btn-default{
  background-color: #eaeaea;
  box-shadow: 0px 0.5px 0px 0px #424242;
  width: 120px;
}
.progressbarContainer{
  height: 10px;
  width: 250px;  
  border-bottom: 1px solid #eaeaea;
}
progress[value], progress::-webkit-progress-value {
  width: 250px;
  height: 10px;
  top: -7px !important;
  padding: 0;
  left: -1px;
  background-color: #EF5F3C;
  border: 1px solid...

JavaScript

calculateTotalAmt = () => {
  const donateAmt = document.getElementById('donateAmt').value;
  let totalAmt = document.getElementById('totalAmt').innerHTML;
  let totalAmtNum = totalAmt.substring(1);
  
  if(totalAmtNum == 0){
  	document.getElementById('amtText').innerHTML = 'This Project is fully funded.';
    document.getElementById('totalAmt').innerHTML = '';
  }else{
		totalAmtNum = parseInt(totalAmtNum) - parseInt(donateAmt);
  	document.getElementById('totalAmt').innerHTML = '$' + totalAmtNum;
  	document.getElementById('progressbar').max = 167;
	  document.getElementById('progressbar').value = 167 - totalAmtNum;

  }
	  
  
  document.getElementById('donateAmt').value = '';

}