custom streamlabs follower goal widget

customFields.json

{
  "font_type": {
    "label": "Font",
    "type": "fontpicker",
    "value": "Fredoka One"
  },
  "barBackground": {
    "label": "BG Color",
    "type": "colorpicker",
    "value": "#43342e"
  },
  "barForeground": {
    "label": "FG Color",
    "type": "colorpicker",
    "value": "#ffd96e"
  },
  "textColor": {
    "label": "Text Color",
    "type": "colorpicker",
    "value": "#FFFFFF"
  }
}

widget.css

/* All html objects will be wrapped in the #wrap div */
* {
	font-family: "Fredoka One";
}

.goal-cont {
    color: white;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: center;
}

#title-box {
  background-color: {barBackground};
  margin-left: 5px;
  padding: 2px 20px;
  border-radius: 0 25px 0 25px;
  box-shadow: 5px 5px 2px rgba(0,0,0, 0.6);
}

#title {
  position: relative;
  color: {textColor};
  font-size: 1.25em;
  text-shadow: 2px 2px 2px rgba(0,0,0, 0.6);
}

#goal-bar {
  position: relative;
  width: 98%;
  height: 50px;
  background: {barBackground};
  border-radius: 40px;
  margin-top: 10px;
  margin-bottom: 8px;
	box-shadow: 5px 5px 2px rgba(0,0,0, 0.6);
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  overflow: hidden;
}

#goal-bar-current {
  position: relative;
  background-color: {barForeground};
  height: 100%;
  /*border-top-left-radius: 40px;*/
  /*border-bottom-left-radius: 40px;*/
  transition: 0.2s width ease;
  z-index: 2;
}

#goal-current {
	position: absolute;
  display: block;
  top: 25%;
  right: 5%;
 color: {barBackground};
  font-size: 1.25em;
}

#goal-total {
	position: absolute;
  display: block;
  top: 25%;
  right: 5%;
   color: {barForeground};
  font-size: 1.25em;
}

#goal-end-date {
  position: relative;
}

widget.html

<!-- All html objects will be wrapped in the #wrap div -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<div class='goal-cont'>
  <div id='goal-bar'>
    <div id='goal-bar-current'> <span id='goal-current'></span></div>
   	<span id='goal-total'>0</span>
  </div>
  <div id='title-box'>
  	<div id='title'></div>
  </div>
  <div id='goal-end-date'></div>
</div>

widget.js

document.addEventListener('goalLoad', function(obj) {
  $('#title').html(obj.detail.title);
  //$('#goal-end-date').text(obj.detail.to_go.ends_at);
  var total = obj.detail.amount.target,
      current =  Math.min(obj.detail.amount.current, obj.detail.amount.target);
 	$('#goal-bar-current').css('width', (current / total) * 100 + '%');
  $('#goal-total').text(obj.detail.amount.target);
  $('#goal-current').text(obj.detail.amount.current);
});

document.addEventListener('goalEvent', function(obj) {
  var total = obj.detail.amount.target,
      current = Math.min(obj.detail.amount.current, obj.detail.amount.target);
	$('#goal-bar-current').css('width', (current / total) * 100 + '%');
  $('#goal-total').text(obj.detail.amount.target);
  $('#goal-current').text(obj.detail.amount.current);
});