WildGenie · October 6, 2021 19:34
diff --git a/bar.html b/bar.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="goal-cont">
      <div id="title"></div>
      <div id="goal-bar-fill"></div>
      <div id="goal-bar">
        <span id="goal-current">0</span>/<span id="goal-total">0</span>
      </div>
      <div id="goal-end-date"></div>
    </div>

    <script>
      // Events will be sent when someone followers
      // Please use event listeners to run functions.

      $("#title").html("Abone Hedefi");
      $("#goal-current").text("0");
      $("#goal-total").text("100");
      $("#goal-end-date").text("7 DAYS TO GO");

      var percent = 20;
      $("#goal-bar-fill").css("width", percent + "%");

      document.addEventListener("goalLoad", function (obj) {
        // obj.detail will contain information about the current goal
        // this will fire only once when the widget loads
        console.log(obj.detail);
        $("#title").html(obj.detail.title);
        $("#goal-current").text(obj.detail.amount.current);
        $("#goal-total").text(obj.detail.amount.target);
        $("#goal-end-date").text(obj.detail.to_go.ends_at);
      });

      document.addEventListener("goalEvent", function (obj) {
        // obj.detail will contain information about the goal
        console.log(obj.detail);
        $("#goal-current").text(obj.detail.amount.current);
      });
    </script>

    <style>
      body {
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
        color: #333;
        background-color: #000;
      }
      .goal-cont {
        width: 100%;
        height: 100px;
        background-color: #f5f5f5;
        border-radius: 5px;
        margin-bottom: 20px;
        padding: 10px;
      }
      .goal-cont #title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .goal-cont #goal-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .goal-cont #goal-bar span {
        font-size: 14px;
        font-weight: bold;
      }
      .goal-cont #goal-end-date {
        font-size: 12px;
        color: #999;
      }
      .goal-cont #goal-bar-fill {
        height: 10px;
        background-color: #00a1e4;
        border-radius: 5px;
        width: 50%;
      }
    </style>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</head>
	<body>
	<div class="goal-cont">
	<div id="title"></div>
	<div id="goal-bar-fill"></div>
	<div id="goal-bar">
	<span id="goal-current">0</span>/<span id="goal-total">0</span>
	</div>
	<div id="goal-end-date"></div>
	</div>

	<script>
	// Events will be sent when someone followers
	// Please use event listeners to run functions.

	$("#title").html("Abone Hedefi");
	$("#goal-current").text("0");
	$("#goal-total").text("100");
	$("#goal-end-date").text("7 DAYS TO GO");

	var percent = 20;
	$("#goal-bar-fill").css("width", percent + "%");

	document.addEventListener("goalLoad", function (obj) {
	// obj.detail will contain information about the current goal
	// this will fire only once when the widget loads
	console.log(obj.detail);
	$("#title").html(obj.detail.title);
	$("#goal-current").text(obj.detail.amount.current);
	$("#goal-total").text(obj.detail.amount.target);
	$("#goal-end-date").text(obj.detail.to_go.ends_at);
	});

	document.addEventListener("goalEvent", function (obj) {
	// obj.detail will contain information about the goal
	console.log(obj.detail);
	$("#goal-current").text(obj.detail.amount.current);
	});
	</script>

	<style>
	body {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	color: #333;
	background-color: #000;
	}
	.goal-cont {
	width: 100%;
	height: 100px;
	background-color: #f5f5f5;
	border-radius: 5px;
	margin-bottom: 20px;
	padding: 10px;
	}
	.goal-cont #title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	}
	.goal-cont #goal-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	}
	.goal-cont #goal-bar span {
	font-size: 14px;
	font-weight: bold;
	}
	.goal-cont #goal-end-date {
	font-size: 12px;
	color: #999;
	}
	.goal-cont #goal-bar-fill {
	height: 10px;
	background-color: #00a1e4;
	border-radius: 5px;
	width: 50%;
	}
	</style>
	</body>
	</html>