Horizontal Fundraising Thermometer

horizontal-fundraising-thermometer.markdown

Horizontal Fundraising Thermometer

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

A Pen by S. Hill on CodePen.

License.

index.html

<div id=countdown-wrap>
  <div id="goal">Let's get to 1,000<div id="small">signatories by end of year</div></div>
  <div id="glass">
    <div id="progress">
    </div>
  </div>
  <div class="goal-stat">
    <span class="goal-number">680</span>
    <span class="goal-label">Signatures</span>
  </div>
  <div class="goal-stat">
    <span class="goal-number">68%</span>
    <span class="goal-label">Signed</span>
  </div>
  <div class="goal-stat">
    <span class="goal-number"><div id="countdown"></div></span>
    <span class="goal-label">16 Days to Go</span>
  </div>
<div class="goal-stat">
    <span class="goal-number">1000</span>
    <span class="goal-label">Signatures</span>
  </div>
<!--http://stackoverflow.com/questions/9335140/how-to-countdown-to-a-date -->

script.js

    //CountDownTimer('12/15/2022 10:1 AM', 'countdown');
    CountDownTimer('12/31/2022 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);
    }

style.less

body * {
	font-family: 'Nunito', sans-serif;
	box-sizing: border-box;
}

body {
	background-color: #142F4C;
}

#countdown-wrap {
  width: 100%;
  height: 300px;
  //border: 1px solid black;
  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) {
    text-align: center;  
  }
  
}

#small {
  font-size: 24px;
  text-align: right;
  color: #FFF;
  @media only screen and (max-width : 640px) {
    text-align: center;  
  }
  
}

#glass {
  width: 100%;
  height: 20px;
  background: #c7c7c7;
  border-radius: 10px;
  float: left;
  overflow: hidden;
}

#progress {
  float: left;
  width: 68%;
  height: 20px;
  background: #FF5D50;
  z-index: 333;
  //border-radius: 5px;
}

.goal-stat {
  width: 25%;
  //height: 30px;
  padding: 10px;
  float: left;
  margin: 0;
  color: #FFF;
  
  @media only screen and (max-width : 640px) {
    width: 50%;
    text-align: center;
  }
}

.goal-number, .goal-label {
  display: block;
}

.goal-number {
  font-weight: bold;
}