UNPKG

countup/index.html

Version:

1<!DOCTYPE HTML>
2<html>
3<head>
4
  <meta charset="UTF-8">
  <meta name="robots" content="index,follow">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="A javascript class that animates a numerical value by counting to it.">
10
  <title>CountUp.js</title>
12
  <!-- <link rel="stylesheet" type="text/css" href="../inorganik.github.io/assets/css/style.css?v=20140820"> -->
  <link rel="stylesheet" type="text/css" href="../assets/css/style.css?v=20141210">
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> -->
  <script src="countUp.js"></script>
  <!-- <script type="text/javascript" src="angular-countUp.js"></script> -->
  <script>
19
  //var app = angular.module("demoApp",["countUpModule"]);
21
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
26
  ga('create', 'UA-7742845-9', 'inorganik.github.io');
  ga('send', 'pageview');
29
  </script>
31</head>
32
33<body ng-app="demoApp">
  <a class="forkMe" href="https://github.com/inorganik/CountUp.js"><img src="../assets/img/forkme_custom_indigo.png" alt="Fork me on GitHub"></a>
  <div id="wrap">
      <header>
          <div id="github"><a class="block" href="https://github.com/inorganik"></a></div>
          <div class="leaderLine">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
          <div id="logo"><a class="block" href="http://inorganik.github.io"></a></div>
      </header>
      <section>
          <h1>CountUp.js &nbsp;<small id="version" class="lt-gray"></small></h1>
          <p>CountUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.</p>
          <p>Install via npm using the package name <code class="indigo large">&nbsp;countup.js&nbsp;</code> or bower using <code class="indigo large">&nbsp;countUp.js</code>.</p>
          <h3 class="marginTop marginBottom"><a class="lime weight700" href="https://github.com/inorganik/CountUp.js">Download on Github</a></h3>
      </section>
      <section>
          <p style="position:absolute; top:5px; left:0;">Current stars:</p>
          <h1 class="jumbo" id="myTargetElement">0</h1>
      </section>
      <section>
          <form>
              <h4 class="inlineLeft noMargin weight300">Params:</h4>
              <div class="inlineLeft marginLeft marginRight">
                  <input type="text" value="24.02" id="startVal" style="width:50px" onkeyup="updateCodeVisualizer()">
                  <label class="inlineLabel">Start</label>
              </div>
              <input type="button" class="inlineLeft marginRight" value="Swap" onClick="swapValues()" style="width:80px;">
              <div class="inlineLeft marginRight">
                  <input type="text" value="94.62" id="endVal" style="width:50px" onkeyup="updateCodeVisualizer()">
                  <label class="inlineLabel">End</label>
              </div>
              <div class="inlineLeft marginRight">
                  <input type="number" value="2" id="decimals" step="1" style="width:50px" onkeyup="updateCodeVisualizer()" onchange="updateCodeVisualizer()">
                  <label class="inlineLabel">Decimals</label>
              </div>
              <div class="inlineLeft marginRight">
                  <input type="number" value="2.5" id="duration" step=".1" style="width:50px" onkeyup="updateCodeVisualizer()" onchange="updateCodeVisualizer()">
                  <label class="inlineLabel">Duration</label>
              </div>
          </form>
      </section>
      <section>
          <form>
              <h4 class="inlineLeft noMargin weight300">Options:</h4>
              <div class="inlineLeft marginLeft marginRight">
                  <input type="checkbox" onClick="toggleEasing(this)" checked><label class="inlineLabel">Use easing</label>
              </div>
              <div class="inlineLeft marginRight">
                  <input type="checkbox" onClick="toggleGrouping(this)" checked><label class="inlineLabel">Use grouping</label>
              </div>
              <div class="inlineLeft marginRight">
                  <input type="text" value="," id="separator" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
                  <label class="inlineLabel">Separator</label>
              </div>
              <div class="inlineLeft marginRight">
                  <input type="text" value="." id="decimal" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
                  <label class="inlineLabel">Decimal</label>
              </div>
              <div class="inlineLeft marginRight">
                  <input type="text" value="" id="prefix" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
                  <label class="inlineLabel">Prefix</label>
              </div>
              <div class="inlineLeft marginRight">
                  <input type="text" value="" id="suffix" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
                  <label class="inlineLabel">Suffix</label>
              </div>
          </form>
      </section>
      <section>
          <form>
              <h4 class="inlineLeft noMargin weight300">Methods:</h4>
              <input type="button" value="Start" onClick="createCountUp()" class="inlineLeft marginLeft marginRight">
              <input type="button" value="Pause/Resume" onClick="showCodeAndPauseResume()" class="inlineLeft marginRight">
              <input type="button" value="Reset" onClick="showCodeAndReset()" class="inlineLeft marginRight">
              <input type="button" value="Update:" onClick="showCodeAndUpdate()" class="inlineLeft" style="margin-right:2px">
              <div class="inlineLeft marginRight">
                  <input type="text" value="6789" id="updateVal" style="width:50px" onkeyup="updateCodeVisualizerForUpdate()">
              </div>
              <input type="checkbox" onClick="toggleOnComplete(this)"><label class="inlineLabel">Alert on complete</label>
          </form>
      </section>
      <section id="easingSection">
          <form>
              <h4 class="inlineLeft noMargin weight300">Custom easing:</h4>
              <div class="inlineLeft marginLeft">
                  <select id="easingFnsDropdown" class="marginRight">
                      <option value="easeOutExpo" selected>easeOutExpo (default, built-in)</option>
                      <option value="outQuintic">outQuintic</option>
                      <option value="outCubic">outCubic</option>
                  </select>
                  <input type="button" value="Apply easing" onClick="createCountUp()">
              </div>
          </form>
      </section>
      <section class="marginBottom">
          <div class="col full marginBottom marginTop">
              <div class="code-contain marginBottom">
                  <code id="codeVisualizer" class="indigo">var options = {<br>
                      &emsp;&emsp;useEasing : true, <br>
                      &emsp;&emsp;easingFn : null, <br>
                      &emsp;&emsp;useGrouping : true, <br>
                      &emsp;&emsp;separator : ',', <br>
                      &emsp;&emsp;decimal : '.' <br>
                      }<br>
                      var demo = new CountUp("myTargetElement", 24.02, 94.62, 0, 2, options);<br>
                      demo.start();
                  </code>
              </div>
          </div>
      </section>
  </div>
143
144</body>
145<script type="text/javascript">
146
  // set CountUp options
  // you don't need to do this - you can use the default options
  var useOnComplete = false,
      useEasing = true,
      easingFn = null,
      useGrouping = true,
      options = {
          useEasing : useEasing, // toggle easing
          easingFn : easingFn, // defaults to easeOutExpo, but you can specify your own
          useGrouping : useGrouping, // 1,000,000 vs 1000000
          separator : ',', // character to use as a separator
          decimal : '.', // character to use as a decimal
      };
160
  var demo, code, data, stars, easingFunctions;
162
  // create instance
  window.onload = function() {
      // setup CountUp object
      demo = new CountUp('myTargetElement', 0, 94.62, 2, 2.5, options);
      // you could do demo.start() right here but we are getting actual current star count from github api below
      // since it is an asynchronous call, we fire start() in the success fn of the XMLHttpRequest object
      getStars.send();
170
      // display version (no hassling with markup!)
      document.getElementById('version').innerHTML = 'v'+demo.version();
  };
174
  easingFunctions = {
      easeOutExpo: function(t, b, c, d) {
          return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
      },
      outQuintic: function(t, b, c, d) {
          var ts = (t /= d) * t;
          var tc = ts * t;
          return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
      },
      outCubic: function(t, b, c, d) {
          var ts = (t /= d) * t;
          var tc = ts * t;
          return b + c * (tc + -3 * ts + 3 * t);
      }
  };
190
  // for demo:
  function swapValues() {
      var oldStartVal = document.getElementById("startVal").value;
      var oldEndVal = document.getElementById("endVal").value;
      document.getElementById("startVal").value = oldEndVal;
      document.getElementById("endVal").value = oldStartVal;
      updateCodeVisualizer();
  }
  function getEasingFn() {
      var fn = document.getElementById("easingFnsDropdown").value;
201
      if (fn === 'easeOutExpo') return null;
      if (typeof easingFunctions[fn] === 'undefined') return undefined;
204
      return easingFunctions[fn];
  }
  function getEasingFnBody(fn) {
      fn = typeof fn === 'undefined' ? getEasingFn() : fn;
209
      if (typeof fn === 'undefined') return 'undefined function';
211
      if (fn !== null) {
          return fn.toString().replace(/^ {8}/gm, '');
      }
215
      return '';
  }
  function createCountUp() {
219
      var startVal = document.getElementById("startVal").value;
      startVal = Number(startVal.replace(',','').replace(' ',''));
      var endVal = document.getElementById("endVal").value;
      endVal = Number(endVal.replace(',','').replace(' ',''));
      var decimals = document.getElementById("decimals").value,
          duration = document.getElementById("duration").value,
          prefix = document.getElementById("prefix").value,
          suffix = document.getElementById("suffix").value,
          easingFn = getEasingFn();
229
      options = {
          useEasing : useEasing,
          easingFn : typeof easingFn === 'undefined' ? null : easingFn,
          useGrouping : useGrouping,
          separator : document.getElementById("separator").value,
          decimal : document.getElementById("decimal").value,
          prefix: prefix,
          suffix: suffix
      };
239
      // you don't have to create a new instance of CountUp every time you start an animation,
      // you can just change the properties individually. But I do here in case user changes values in demo.
      demo = new CountUp("myTargetElement", startVal, endVal, decimals, duration, options);
243
      if (useOnComplete) {
          demo.start(methodToCallOnComplete);
      } else {
          demo.start();
      }
249
      updateCodeVisualizer();
  }
  function showCodeAndPauseResume() {
      code = 'demo.pauseResume();';
      document.getElementById("codeVisualizer").innerHTML = code;
255
      demo.pauseResume();
  }
  function showCodeAndReset() {
      code = 'demo.reset();';
      document.getElementById("codeVisualizer").innerHTML = code;
261
      demo.reset();
  }
  function showCodeAndUpdate() {
      var updateVal = document.getElementById("updateVal").value;
      var num = updateVal ? updateVal : 0;
267
      demo.update(num);
  }
  function toggleOnComplete(checkbox) {
271
      if (checkbox.checked) {
          useOnComplete = true;
      } else {
          useOnComplete = false;
      }
      updateCodeVisualizer();
  }
  function toggleEasing(checkbox) {
      var easingSection = document.getElementById("easingSection");
281
      if (checkbox.checked) {
          useEasing = true;
          easingSection.style.display = "";
          document.getElementById("easingFnsDropdown").value = "easeOutExpo";
          document.getElementById("easingFnPreview").value = "";
      } else {
          useEasing = false;
          easingSection.style.display = "none";
      }
      updateCodeVisualizer();
  }
  function toggleGrouping(checkbox) {
294
      if (checkbox.checked) {
          useGrouping = true;
      } else {
          useGrouping = false;
      }
      updateCodeVisualizer();
  }
  function methodToCallOnComplete() {
      console.log('COMPLETE!');
      alert('COMPLETE!');
  }
  function updateCodeVisualizer() {
      var startVal = document.getElementById("startVal").value;
      startVal = Number(startVal.replace(',','').replace(' ',''));
      var endVal = document.getElementById("endVal").value;
      endVal = Number(endVal.replace(',','').replace(' ',''));
      var decimals = document.getElementById("decimals").value;
      var duration = document.getElementById("duration").value;
      var separator = document.getElementById("separator").value;
      var decimal = document.getElementById("decimal").value;
      var prefix = document.getElementById("prefix").value;
      var suffix = document.getElementById("suffix").value;
317
      var easingFn = getEasingFn();
      var easingFnBody = getEasingFnBody(easingFn);
320
      var code = '';
322
      if (useEasing && easingFn) {
          code += 'var easingFn = ';
          var split = easingFnBody.split('\n');
326
          for (var line in split) {
              code += split[line].replace(' ', '&nbsp;') + '<br>';
          }
      }
331
      code += 'var options = {<br>';
      code += (useEasing) ? '&emsp;&emsp;useEasing : true, <br>' : '&emsp;&emsp;useEasing : false, <br>';
      code += (easingFn && useEasing) ? '&emsp;&emsp;easingFn: easingFn, <br>' : '';
      code += (useGrouping) ? '&emsp;&emsp;useGrouping : true, <br>' : '&emsp;&emsp;useGrouping : false, <br>';
      code += '&emsp;&emsp;separator : \''+separator+'\', <br>';
      code += '&emsp;&emsp;decimal : \''+decimal+'\', <br>';
      code += '&emsp;&emsp;prefix : \''+prefix+'\', <br>';
      code += '&emsp;&emsp;suffix : \''+suffix+'\' <br>';
      code += '};<br>';
      code += 'var demo = new CountUp("myTargetElement", '+startVal+', '+endVal+', '+decimals+', '+duration+', options);<br>';
      if (useOnComplete) {
          code += 'demo.start(methodToCallOnComplete);';
      } else {
          code += 'demo.start();';
      }
      document.getElementById("codeVisualizer").innerHTML = code;
  }
  function updateCodeVisualizerForUpdate() {
      var updateVal = document.getElementById("updateVal").value;
      var num = updateVal ? updateVal : 0;
      code = 'demo.update(' + updateVal + ');';
      document.getElementById("codeVisualizer").innerHTML = code;
  }
355
  // get current star count
  var repoInfoUrl = 'https://api.github.com/repos/inorganik/CountUp.js';
  var getStars = new XMLHttpRequest();
  getStars.open('GET', repoInfoUrl, true);
  getStars.timeout = 5000;
361
  getStars.onreadystatechange = function() {
      // 2: received headers,  3: loading, 4: done
      if (getStars.readyState == 4) {
          if (getStars.status == 200) {
              if (getStars.responseText !== 'undefined') {
                  if (getStars.responseText.length > 0) {
                      data = JSON.parse(getStars.responseText);
                      stars = data.stargazers_count;
                      // change input values
                      document.getElementById("startVal").value = 0;
                      document.getElementById("endVal").value = stars;
                      document.getElementById("decimals").value = 0;
                      // change code example values
                      updateCodeVisualizer();
                      // change the startVal and endVal properties of the demo CountUp and run it
                      demo.startVal = 0;
                      demo.endVal = stars;
                      demo.decimals = 0;
                      demo.start();
                  }
              }
          }
      }
  }
  getStars.onerror = function() {
      console.log('error: '+getStars.status)
      demo.start();
  }
390
  </script>
392</html>

1	`<!DOCTYPE HTML>`
2	`<html>`
3	`<head>`
4
5	`<meta charset="UTF-8">`
6	`<meta name="robots" content="index,follow">`
7	`<meta name="apple-mobile-web-app-capable" content="yes">`
8	`<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">`
9	`<meta name="description" content="A javascript class that animates a numerical value by counting to it.">`
10
11	`<title>CountUp.js</title>`
12
13	`<!-- <link rel="stylesheet" type="text/css" href="../inorganik.github.io/assets/css/style.css?v=20140820"> -->`
14	`<link rel="stylesheet" type="text/css" href="../assets/css/style.css?v=20141210">`
15	`<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> -->`
16	`<script src="countUp.js"></script>`
17	`<!-- <script type="text/javascript" src="angular-countUp.js"></script> -->`
18	`<script>`
19
20	`//var app = angular.module("demoApp",["countUpModule"]);`
21
22	`(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){`
23	`(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),`
24	`m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)`
25	`})(window,document,'script','//www.google-analytics.com/analytics.js','ga');`
26
27	`ga('create', 'UA-7742845-9', 'inorganik.github.io');`
28	`ga('send', 'pageview');`
29
30	`</script>`
31	`</head>`
32
33	`<body ng-app="demoApp">`
34	`<a class="forkMe" href="https://github.com/inorganik/CountUp.js"><img src="../assets/img/forkme_custom_indigo.png" alt="Fork me on GitHub"></a>`
35	`<div id="wrap">`
36	`<header>`
37	`<div id="github"><a class="block" href="https://github.com/inorganik"></a></div>`
38	`<div class="leaderLine">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>`
39	`<div id="logo"><a class="block" href="http://inorganik.github.io"></a></div>`
40	`</header>`
41	`<section>`
42	`<h1>CountUp.js  <small id="version" class="lt-gray"></small></h1>`
43	`<p>CountUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.</p>`
44	`<p>Install via npm using the package name <code class="indigo large"> countup.js </code> or bower using <code class="indigo large"> countUp.js</code>.</p>`
45	`<h3 class="marginTop marginBottom"><a class="lime weight700" href="https://github.com/inorganik/CountUp.js">Download on Github</a></h3>`
46	`</section>`
47	`<section>`
48	`<p style="position:absolute; top:5px; left:0;">Current stars:</p>`
49	`<h1 class="jumbo" id="myTargetElement">0</h1>`
50	`</section>`
51	`<section>`
52	`<form>`
53	`<h4 class="inlineLeft noMargin weight300">Params:</h4>`
54	`<div class="inlineLeft marginLeft marginRight">`
55	`<input type="text" value="24.02" id="startVal" style="width:50px" onkeyup="updateCodeVisualizer()">`
56	`<label class="inlineLabel">Start</label>`
57	`</div>`
58	`<input type="button" class="inlineLeft marginRight" value="Swap" onClick="swapValues()" style="width:80px;">`
59	`<div class="inlineLeft marginRight">`
60	`<input type="text" value="94.62" id="endVal" style="width:50px" onkeyup="updateCodeVisualizer()">`
61	`<label class="inlineLabel">End</label>`
62	`</div>`
63	`<div class="inlineLeft marginRight">`
64	`<input type="number" value="2" id="decimals" step="1" style="width:50px" onkeyup="updateCodeVisualizer()" onchange="updateCodeVisualizer()">`
65	`<label class="inlineLabel">Decimals</label>`
66	`</div>`
67	`<div class="inlineLeft marginRight">`
68	`<input type="number" value="2.5" id="duration" step=".1" style="width:50px" onkeyup="updateCodeVisualizer()" onchange="updateCodeVisualizer()">`
69	`<label class="inlineLabel">Duration</label>`
70	`</div>`
71	`</form>`
72	`</section>`
73	`<section>`
74	`<form>`
75	`<h4 class="inlineLeft noMargin weight300">Options:</h4>`
76	`<div class="inlineLeft marginLeft marginRight">`
77	`<input type="checkbox" onClick="toggleEasing(this)" checked><label class="inlineLabel">Use easing</label>`
78	`</div>`
79	`<div class="inlineLeft marginRight">`
80	`<input type="checkbox" onClick="toggleGrouping(this)" checked><label class="inlineLabel">Use grouping</label>`
81	`</div>`
82	`<div class="inlineLeft marginRight">`
83	`<input type="text" value="," id="separator" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">`
84	`<label class="inlineLabel">Separator</label>`
85	`</div>`
86	`<div class="inlineLeft marginRight">`
87	`<input type="text" value="." id="decimal" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">`
88	`<label class="inlineLabel">Decimal</label>`
89	`</div>`
90	`<div class="inlineLeft marginRight">`
91	`<input type="text" value="" id="prefix" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">`
92	`<label class="inlineLabel">Prefix</label>`
93	`</div>`
94	`<div class="inlineLeft marginRight">`
95	`<input type="text" value="" id="suffix" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">`
96	`<label class="inlineLabel">Suffix</label>`
97	`</div>`
98	`</form>`
99	`</section>`
100	`<section>`
101	`<form>`
102	`<h4 class="inlineLeft noMargin weight300">Methods:</h4>`
103	`<input type="button" value="Start" onClick="createCountUp()" class="inlineLeft marginLeft marginRight">`
104	`<input type="button" value="Pause/Resume" onClick="showCodeAndPauseResume()" class="inlineLeft marginRight">`
105	`<input type="button" value="Reset" onClick="showCodeAndReset()" class="inlineLeft marginRight">`
106	`<input type="button" value="Update:" onClick="showCodeAndUpdate()" class="inlineLeft" style="margin-right:2px">`
107	`<div class="inlineLeft marginRight">`
108	`<input type="text" value="6789" id="updateVal" style="width:50px" onkeyup="updateCodeVisualizerForUpdate()">`
109	`</div>`
110	`<input type="checkbox" onClick="toggleOnComplete(this)"><label class="inlineLabel">Alert on complete</label>`
111	`</form>`
112	`</section>`
113	`<section id="easingSection">`
114	`<form>`
115	`<h4 class="inlineLeft noMargin weight300">Custom easing:</h4>`
116	`<div class="inlineLeft marginLeft">`
117	`<select id="easingFnsDropdown" class="marginRight">`
118	`<option value="easeOutExpo" selected>easeOutExpo (default, built-in)</option>`
119	`<option value="outQuintic">outQuintic</option>`
120	`<option value="outCubic">outCubic</option>`
121	`</select>`
122	`<input type="button" value="Apply easing" onClick="createCountUp()">`
123	`</div>`
124	`</form>`
125	`</section>`
126	`<section class="marginBottom">`
127	`<div class="col full marginBottom marginTop">`
128	`<div class="code-contain marginBottom">`
129	`<code id="codeVisualizer" class="indigo">var options = {<br>`
130	`&emsp;&emsp;useEasing : true, <br>`
131	`&emsp;&emsp;easingFn : null, <br>`
132	`&emsp;&emsp;useGrouping : true, <br>`
133	`&emsp;&emsp;separator : ',', <br>`
134	`&emsp;&emsp;decimal : '.' <br>`
135	`}<br>`
136	`var demo = new CountUp("myTargetElement", 24.02, 94.62, 0, 2, options);<br>`
137	`demo.start();`
138	`</code>`
139	`</div>`
140	`</div>`
141	`</section>`
142	`</div>`
143
144	`</body>`
145	`<script type="text/javascript">`
146
147	`// set CountUp options`
148	`// you don't need to do this - you can use the default options`
149	`var useOnComplete = false,`
150	`useEasing = true,`
151	`easingFn = null,`
152	`useGrouping = true,`
153	`options = {`
154	`useEasing : useEasing, // toggle easing`
155	`easingFn : easingFn, // defaults to easeOutExpo, but you can specify your own`
156	`useGrouping : useGrouping, // 1,000,000 vs 1000000`
157	`separator : ',', // character to use as a separator`
158	`decimal : '.', // character to use as a decimal`
159	`};`
160
161	`var demo, code, data, stars, easingFunctions;`
162
163	`// create instance`
164	`window.onload = function() {`
165	`// setup CountUp object`
166	`demo = new CountUp('myTargetElement', 0, 94.62, 2, 2.5, options);`
167	`// you could do demo.start() right here but we are getting actual current star count from github api below`
168	`// since it is an asynchronous call, we fire start() in the success fn of the XMLHttpRequest object`
169	`getStars.send();`
170
171	`// display version (no hassling with markup!)`
172	`document.getElementById('version').innerHTML = 'v'+demo.version();`
173	`};`
174
175	`easingFunctions = {`
176	`easeOutExpo: function(t, b, c, d) {`
177	`return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;`
178	`},`
179	`outQuintic: function(t, b, c, d) {`
180	`var ts = (t /= d) * t;`
181	`var tc = ts * t;`
182	`return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);`
183	`},`
184	`outCubic: function(t, b, c, d) {`
185	`var ts = (t /= d) * t;`
186	`var tc = ts * t;`
187	`return b + c * (tc + -3 * ts + 3 * t);`
188	`}`
189	`};`
190
191	`// for demo:`
192	`function swapValues() {`
193	`var oldStartVal = document.getElementById("startVal").value;`
194	`var oldEndVal = document.getElementById("endVal").value;`
195	`document.getElementById("startVal").value = oldEndVal;`
196	`document.getElementById("endVal").value = oldStartVal;`
197	`updateCodeVisualizer();`
198	`}`
199	`function getEasingFn() {`
200	`var fn = document.getElementById("easingFnsDropdown").value;`
201
202	`if (fn === 'easeOutExpo') return null;`
203	`if (typeof easingFunctions[fn] === 'undefined') return undefined;`
204
205	`return easingFunctions[fn];`
206	`}`
207	`function getEasingFnBody(fn) {`
208	`fn = typeof fn === 'undefined' ? getEasingFn() : fn;`
209
210	`if (typeof fn === 'undefined') return 'undefined function';`
211
212	`if (fn !== null) {`
213	`return fn.toString().replace(/^ {8}/gm, '');`
214	`}`
215
216	`return '';`
217	`}`
218	`function createCountUp() {`
219
220	`var startVal = document.getElementById("startVal").value;`
221	`startVal = Number(startVal.replace(',','').replace(' ',''));`
222	`var endVal = document.getElementById("endVal").value;`
223	`endVal = Number(endVal.replace(',','').replace(' ',''));`
224	`var decimals = document.getElementById("decimals").value,`
225	`duration = document.getElementById("duration").value,`
226	`prefix = document.getElementById("prefix").value,`
227	`suffix = document.getElementById("suffix").value,`
228	`easingFn = getEasingFn();`
229
230	`options = {`
231	`useEasing : useEasing,`
232	`easingFn : typeof easingFn === 'undefined' ? null : easingFn,`
233	`useGrouping : useGrouping,`
234	`separator : document.getElementById("separator").value,`
235	`decimal : document.getElementById("decimal").value,`
236	`prefix: prefix,`
237	`suffix: suffix`
238	`};`
239
240	`// you don't have to create a new instance of CountUp every time you start an animation,`
241	`// you can just change the properties individually. But I do here in case user changes values in demo.`
242	`demo = new CountUp("myTargetElement", startVal, endVal, decimals, duration, options);`
243
244	`if (useOnComplete) {`
245	`demo.start(methodToCallOnComplete);`
246	`} else {`
247	`demo.start();`
248	`}`
249
250	`updateCodeVisualizer();`
251	`}`
252	`function showCodeAndPauseResume() {`
253	`code = 'demo.pauseResume();';`
254	`document.getElementById("codeVisualizer").innerHTML = code;`
255
256	`demo.pauseResume();`
257	`}`
258	`function showCodeAndReset() {`
259	`code = 'demo.reset();';`
260	`document.getElementById("codeVisualizer").innerHTML = code;`
261
262	`demo.reset();`
263	`}`
264	`function showCodeAndUpdate() {`
265	`var updateVal = document.getElementById("updateVal").value;`
266	`var num = updateVal ? updateVal : 0;`
267
268	`demo.update(num);`
269	`}`
270	`function toggleOnComplete(checkbox) {`
271
272	`if (checkbox.checked) {`
273	`useOnComplete = true;`
274	`} else {`
275	`useOnComplete = false;`
276	`}`
277	`updateCodeVisualizer();`
278	`}`
279	`function toggleEasing(checkbox) {`
280	`var easingSection = document.getElementById("easingSection");`
281
282	`if (checkbox.checked) {`
283	`useEasing = true;`
284	`easingSection.style.display = "";`
285	`document.getElementById("easingFnsDropdown").value = "easeOutExpo";`
286	`document.getElementById("easingFnPreview").value = "";`
287	`} else {`
288	`useEasing = false;`
289	`easingSection.style.display = "none";`
290	`}`
291	`updateCodeVisualizer();`
292	`}`
293	`function toggleGrouping(checkbox) {`
294
295	`if (checkbox.checked) {`
296	`useGrouping = true;`
297	`} else {`
298	`useGrouping = false;`
299	`}`
300	`updateCodeVisualizer();`
301	`}`
302	`function methodToCallOnComplete() {`
303	`console.log('COMPLETE!');`
304	`alert('COMPLETE!');`
305	`}`
306	`function updateCodeVisualizer() {`
307	`var startVal = document.getElementById("startVal").value;`
308	`startVal = Number(startVal.replace(',','').replace(' ',''));`
309	`var endVal = document.getElementById("endVal").value;`
310	`endVal = Number(endVal.replace(',','').replace(' ',''));`
311	`var decimals = document.getElementById("decimals").value;`
312	`var duration = document.getElementById("duration").value;`
313	`var separator = document.getElementById("separator").value;`
314	`var decimal = document.getElementById("decimal").value;`
315	`var prefix = document.getElementById("prefix").value;`
316	`var suffix = document.getElementById("suffix").value;`
317
318	`var easingFn = getEasingFn();`
319	`var easingFnBody = getEasingFnBody(easingFn);`
320
321	`var code = '';`
322
323	`if (useEasing && easingFn) {`
324	`code += 'var easingFn = ';`
325	`var split = easingFnBody.split('\n');`
326
327	`for (var line in split) {`
328	`code += split[line].replace(' ', ' ') + '<br>';`
329	`}`
330	`}`
331
332	`code += 'var options = {<br>';`
333	`code += (useEasing) ? '&emsp;&emsp;useEasing : true, <br>' : '&emsp;&emsp;useEasing : false, <br>';`
334	`code += (easingFn && useEasing) ? '&emsp;&emsp;easingFn: easingFn, <br>' : '';`
335	`code += (useGrouping) ? '&emsp;&emsp;useGrouping : true, <br>' : '&emsp;&emsp;useGrouping : false, <br>';`
336	`code += '&emsp;&emsp;separator : \''+separator+'\', <br>';`
337	`code += '&emsp;&emsp;decimal : \''+decimal+'\', <br>';`
338	`code += '&emsp;&emsp;prefix : \''+prefix+'\', <br>';`
339	`code += '&emsp;&emsp;suffix : \''+suffix+'\' <br>';`
340	`code += '};<br>';`
341	`code += 'var demo = new CountUp("myTargetElement", '+startVal+', '+endVal+', '+decimals+', '+duration+', options);<br>';`
342	`if (useOnComplete) {`
343	`code += 'demo.start(methodToCallOnComplete);';`
344	`} else {`
345	`code += 'demo.start();';`
346	`}`
347	`document.getElementById("codeVisualizer").innerHTML = code;`
348	`}`
349	`function updateCodeVisualizerForUpdate() {`
350	`var updateVal = document.getElementById("updateVal").value;`
351	`var num = updateVal ? updateVal : 0;`
352	`code = 'demo.update(' + updateVal + ');';`
353	`document.getElementById("codeVisualizer").innerHTML = code;`
354	`}`
355
356	`// get current star count`
357	`var repoInfoUrl = 'https://api.github.com/repos/inorganik/CountUp.js';`
358	`var getStars = new XMLHttpRequest();`
359	`getStars.open('GET', repoInfoUrl, true);`
360	`getStars.timeout = 5000;`
361
362	`getStars.onreadystatechange = function() {`
363	`// 2: received headers, 3: loading, 4: done`
364	`if (getStars.readyState == 4) {`
365	`if (getStars.status == 200) {`
366	`if (getStars.responseText !== 'undefined') {`
367	`if (getStars.responseText.length > 0) {`
368	`data = JSON.parse(getStars.responseText);`
369	`stars = data.stargazers_count;`
370	`// change input values`
371	`document.getElementById("startVal").value = 0;`
372	`document.getElementById("endVal").value = stars;`
373	`document.getElementById("decimals").value = 0;`
374	`// change code example values`
375	`updateCodeVisualizer();`
376	`// change the startVal and endVal properties of the demo CountUp and run it`
377	`demo.startVal = 0;`
378	`demo.endVal = stars;`
379	`demo.decimals = 0;`
380	`demo.start();`
381	`}`
382	`}`
383	`}`
384	`}`
385	`}`
386	`getStars.onerror = function() {`
387	`console.log('error: '+getStars.status)`
388	`demo.start();`
389	`}`
390
391	`</script>`
392	`</html>`