Sub Points Counter

<div class='goal-cont'>
<div id='icon'></div>
<div id='title'></div>
<div id='goal-bar'></div>
<div id='goal-bar2'></div>
<div id="bottom-info"></div>
</div>

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');

*,
*:before,
*:after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
margin: 0;
}

#bottom-info {
justify-content: space-between;
position: absolute;
left: 74px;
top: 62px;
width: 435px;
height: 15px;
color: White;
font-family: Lato;
font-size: 19px;
font-weight: 900;
text-transform: uppercase;
}

.goal-cont {
color: black;
position: relative;
width: 530px;
height: 104px;
border-radius: 10px;
box-shadow: 0 0 6px rgba(5, 5, 5, 0.3);
opacity: 0.8;
}

#icon {
width: 45px;
height: 45px;
background-color: #4462E7;
box-shadow: 0 0 6px rgba(5, 5, 5, 0.3);
border-radius: 45px;
position: absolute;
left: 20px;
top: 30px;
}

#icon::before {
content: "";
position: absolute;
width: 45px;
height: 45px;
color: #fff;
text-align: center;
line-height: 45px;
background: url(https://s3.us-east-2.amazonaws…e/1528937909goal-icon.png) no-repeat;
}

#title{
position: absolute;
left: 74px;
top: 22px;
width: 445px;
height: 18px;
color: white;
font-family: Lato;
font-size: 20px;
font-weight: 900;
}

#goal-bar {
position: relative;
z-index: 2;
height: 15px;
box-sizing: border-box;
background: #4462E7;
max-width: 435px;
top: 45px;
left: 74px;
}

#goal-bar2 {
box-sizing: border-box;
z-index: 1;
position: absolute;
left: 74px;
top: 45px;
width: 435px;
height: 15px;
box-shadow: 0 0 10px rgba(5, 5, 5, 0.3);
}

#goal-current {
position: absolute;
z-index: 3;
left: 0;
right: 0;
font-family: "Lato";
font-style: normal;
font-weight: 600;
line-height: 28px;
font-size: 28px;
text-align: left;
color: #000000;
}

#goal-total {
width: 100px;
text-align: left;
}

#summary {
text-align: left;
font-family: "Lato";
text-shadow: 0.5px 0.9px 3.2px rgba(0, 0, 0, 0.2);
color: white;
font-size: 18px;
font-weight: 500;
}

#end-date {
text-align: center;
font-size: 12px;
line-height: 12px;
font-weight: 800;
}

#current {
float: left;
}

#total {
float: right;
}

#time {
text-align: center;
text-shadow: 1.3px 1.5px 9.5px rgba(0, 0, 0, 0.9);
color: white;
font-family: "Lato";
font-size: 15px;
font-weight: 500;
position: relative;
top: 130px;
}

function update(obj) {
let percentOfTarget = Math.round((obj.detail.amount.current / obj.detail.amount.target) * 435);
let barWidth = percentOfTarget;
const goalBar = document.getElementById('goal-bar');

if (percentOfTarget >= 435) {
barWidth = 435;
}

goalBar.style.width = barWidth + 'px';
const barString = `${obj.detail.amount.current} (${percentOfTarget}%)`;

$('#title').html(obj.detail.title);
$('#goal-current').text(barString);
$('#bottom-info').text( obj.detail.amount.current + "/" + obj.detail.amount.target + " | ends " + moment(obj.detail.to_go.ends_at).fromNow());
$('#time').text(moment(obj.detail.to_go.ends_at).fromNow());
var date = $('#goal-end-date').html();
date = date.split(' ')[0];
var dt = new Date(date + "z");
var today = new Date();
var dt_ms = dt.getTime();
var today_ms = today.getTime();
var timeDiff = dt_ms - today_ms;
var remaining = Math.round(timeDiff / (60 * 60 * 24 * 1000));

if (remaining === 1 ) {
$('#goal-end-date').html(remaining + " day to go");
} else if (remaining === 0 remaining > 1) {
$('#goal-end-date').html(remaining + " days to go");
}
}
// Events will be sent when someone followers
// Please use event listeners to run functions.
document.addEventListener('goalLoad', function(obj) {
// obj.detail will contain information about the current goal
// this will fire only once when the widget loads
update(obj);
});

document.addEventListener('goalEvent', function(obj) {
// obj.detail will contain information about the goal
update(obj);

});