Horizontal Fundraising Thermometer

In this example below you will see how to do a Horizontal Fundraising Thermometer with some HTML / CSS and Javascript

Inspired by the basic Kickstarter thermometer... Looking for a simple way to help a friend raise money with a beard-a-thon

Thumbnail
This awesome code was written by robotballoon, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright robotballoon ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Horizontal Fundraising Thermometer</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id=countdown-wrap>
  <div id="goal">$10,000</div>
  <div id="glass">
    <div id="progress">
    </div>
  </div>
  <div class="goal-stat">
    <span class="goal-number">16%</span>
    <span class="goal-label">Funded</span>
  </div>
  <div class="goal-stat">
    <span class="goal-number">$1,640</span>
    <span class="goal-label">Raised</span>
  </div>
  <div class="goal-stat">
    <span class="goal-number"><div id="countdown"></div></span>
    <span class="goal-label">Days to Go</span>
  </div>
  <div class="goal-stat">
    <span class="goal-number">38</span>
    <span class="goal-label">Sponsors</span>
  </div>
</div>
<!--http://stackoverflow.com/questions/9335140/how-to-countdown-to-a-date -->
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/robotballoon/horizontal-fundraising-thermometer-Fjnyp */
body * {
  font-family: 'Nunito', sans-serif;
  box-sizing: border-box;
}
body {
  background-color: #142F4C;
}
#countdown-wrap {
  width: 100%;
  height: 300px;
  padding: 20px;
  font-family: arial;
  max-width: 650px;
  margin: 150px auto 300px;
}
#goal {
  font-size: 48px;
  text-align: right;
  color: #FFF;
}
@media only screen and (max-width: 640px) {
  #goal {
    text-align: center;
  }
}
#glass {
  width: 100%;
  height: 20px;
  background: #c7c7c7;
  border-radius: 10px;
  float: left;
  overflow: hidden;
}
#progress {
  float: left;
  width: 16%;
  height: 20px;
  background: #FF5D50;
  z-index: 333;
}
.goal-stat {
  width: 25%;
  padding: 10px;
  float: left;
  margin: 0;
  color: #FFF;
}
@media only screen and (max-width: 640px) {
  .goal-stat {
    width: 50%;
    text-align: center;
  }
}
.goal-number,
.goal-label {
  display: block;
}
.goal-number {
  font-weight: bold;
}


/*Downloaded from https://www.codeseek.co/robotballoon/horizontal-fundraising-thermometer-Fjnyp */


    CountDownTimer('12/20/2020 10:1 AM', 'countdown');
    CountDownTimer('12/20/2020 10:1 AM', 'newcountdown');

    function CountDownTimer(dt, id)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById(id).innerHTML = '0';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById(id).innerHTML = days /*+ ' days'*/;
            //document.getElementById(id).innerHTML += hours + 'hrs ';
            //document.getElementById(id).innerHTML += minutes + 'mins ';
            //document.getElementById(id).innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
    }

Comments