1034 lines
40 KiB
HTML
1034 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta name="fragment" content="!">
|
|
<link rel="canonical" href="https://youcount.github.io/" />
|
|
<link rel="amphtml" href="https://youcount.github.io/amp">
|
|
<meta name="theme-color" content="#e52d27" />
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="EXPIRES" content="Thu, 10 Jan 2030 12:00:00 GMT">
|
|
<title>|| YouCount: YouTube® LIVE Subscriber Count ||</title>
|
|
<link rel="shortcut icon" href="favicon.ico"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="description" content="Check the LIVE YouTube subscriber count for any channel updated every second."/>
|
|
<meta property="og:title" content="YouCount: YouTube® LIVE Subscriber Count"/>
|
|
<meta property="og:description" content="Check the LIVE YouTube subscriber count for any channel updated every second." />
|
|
<meta property="og:type" content="article"/>
|
|
<meta property="og:image" content="https://youcount.github.io/images/fblogo.jpg" />
|
|
<meta property="og:site_name" content="YouCount" />
|
|
<meta property="article:author" content="https://www.facebook.com/20manas"/>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "http://schema.org",
|
|
"@type": "Article",
|
|
"headline": "YouCount: YouTube® LIVE Subscriber Count",
|
|
"datePublished": "2015-10-07T12:02:41Z",
|
|
"publisher": {
|
|
"@type": "Organization",
|
|
"name":"YouCount",
|
|
"logo": {
|
|
"@type": "ImageObject",
|
|
"url": "https://youcount.github.io/images/amplogo.jpg",
|
|
"width": 600,
|
|
"height": 60
|
|
}
|
|
},
|
|
"author":"Manas Khurana",
|
|
"image": {
|
|
"@type": "ImageObject",
|
|
"url": "https://youcount.github.io/images/fblogo.jpg",
|
|
"width": 1203,
|
|
"height": 630
|
|
},
|
|
"description":"Check the LIVE YouTube subscriber count for any channel updated every second."
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Odometer */
|
|
.odometer.odometer-auto-theme,.odometer.odometer-auto-theme .odometer-digit,.odometer.odometer-theme-minimal,.odometer.odometer-theme-minimal .odometer-digit{display:inline-block;position:relative}.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,.odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer{display:inline-block;visibility:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,.odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner{text-align:left;display:block;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,.odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon{display:block}.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,.odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner{display:block;-webkit-backface-visibility:hidden}.odometer.odometer-auto-theme .odometer-digit .odometer-value,.odometer.odometer-theme-minimal .odometer-digit .odometer-value{display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,.odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value{position:absolute}.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner{-webkit-transition:-webkit-transform .5s;transition:transform .5s}.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,.odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner{-webkit-transition:-webkit-transform .5s;transition:transform .5s;-webkit-transform:translateY(0);transform:translateY(0)}
|
|
/*Odometer End*/
|
|
|
|
body {
|
|
background-color:rgb(250,250,250);
|
|
font-family: Lato, sans-serif;
|
|
outline:none;
|
|
margin:0;
|
|
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
|
transition: background-color 0.5s linear;
|
|
}
|
|
img {
|
|
color:transparent;
|
|
}
|
|
ul {
|
|
list-style-type:none;
|
|
}
|
|
#menu {
|
|
position:absolute;
|
|
width:100%;
|
|
height:30%;
|
|
min-height:50px;
|
|
box-shadow: 0 0 20px -4px black;
|
|
left:0;
|
|
top:0;
|
|
z-index:1001;
|
|
background-color:rgb(229,45,39);
|
|
}
|
|
#buttonBig{
|
|
min-height:50px;
|
|
height:10%;
|
|
z-index:2;
|
|
min-width:2%;
|
|
width:80px;
|
|
left:0;
|
|
top:0;
|
|
position:fixed;
|
|
transition:all 0.5s;
|
|
cursor:pointer;
|
|
}
|
|
#buttonBig hr{
|
|
width:20px;
|
|
height:2px;
|
|
background-color:white;
|
|
border-radius:2px;
|
|
border-color:white;
|
|
border:0.001px;
|
|
margin:5px;
|
|
transition:all 0.5s;
|
|
|
|
}
|
|
.cross hr:nth-child(1) {
|
|
-webkit-transform:rotate(45deg) translate(4.949px,4.949px);
|
|
transform:rotate(45deg) translate(4.949px,4.949px);
|
|
}
|
|
.cross hr:nth-child(2) {
|
|
-webkit-transform:rotate(-45deg);
|
|
transform:rotate(-45deg);
|
|
}
|
|
.cross hr:nth-child(3) {
|
|
opacity:0;
|
|
-webkit-transform: translate(0,-7px);
|
|
transform: translate(0,-7px);
|
|
}
|
|
#buttonSmall{
|
|
position:absolute;
|
|
left:25px;
|
|
top:50%;
|
|
transition: all 0.5s;
|
|
-webkit-transform:translate(0,-50%);
|
|
transform:translate(0,-50%);
|
|
}
|
|
#logo {
|
|
position:absolute;
|
|
height:15vmin;
|
|
width:auto;
|
|
bottom:10%;
|
|
top:auto;
|
|
left:50%;
|
|
-webkit-transform:translate(-50%,0);
|
|
transform:translate(-50%,0);
|
|
cursor:pointer;
|
|
}
|
|
#logo2 {
|
|
display:none;
|
|
position:fixed;
|
|
height:8%;
|
|
min-height:40px;
|
|
width:auto;
|
|
top:1%;
|
|
bottom:auto;
|
|
left:50%;
|
|
cursor:pointer;
|
|
-webkit-transform:translate(-50%,0);
|
|
transform:translate(-50%,0);
|
|
}
|
|
#sharebox {
|
|
position:fixed;
|
|
right:15px;
|
|
top:1.25%;
|
|
width:10%;
|
|
height:7.5%
|
|
}
|
|
.share {
|
|
min-height:30px;
|
|
height:14.2%;
|
|
margin-bottom:20%;
|
|
margin-left:50%;
|
|
border-radius:100px;
|
|
cursor:pointer;
|
|
float:right;
|
|
display:none;
|
|
}
|
|
#share {
|
|
height:100%;
|
|
border:2px solid white;
|
|
display:inherit;
|
|
}
|
|
|
|
#pageUrl,#pageUrl input {
|
|
text-align:center;
|
|
width:80%;
|
|
left:10%;
|
|
border-radius:4px;
|
|
}
|
|
#pageUrl {
|
|
position:fixed;
|
|
top:20%;
|
|
z-index:1010;
|
|
background-color:white;
|
|
box-shadow: 0 0 20px -4px black;
|
|
padding-top:30px;
|
|
font-size:25px;
|
|
display:none;
|
|
}
|
|
#pageUrl input {
|
|
border:none;
|
|
outline:none;
|
|
font-family: Lato, sans-serif;
|
|
font-size:30px;
|
|
padding:10px;
|
|
background-color:gray;
|
|
color:white;
|
|
margin:20px;
|
|
}
|
|
#contents{
|
|
left:0;
|
|
top:10%;
|
|
width:100%;
|
|
position:absolute;
|
|
z-index:502;
|
|
display:none;
|
|
color:gray;
|
|
overflow-x:hidden;
|
|
overflow-y:visible;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
transform: translate3d(0,0,0);
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
-webkit-perspective: 1000;
|
|
perspective: 1000;
|
|
}
|
|
#menuHelp,#menuAbout,#menuEmbed{
|
|
display:block;
|
|
font-size:40px;
|
|
font-weight:300;
|
|
cursor:pointer;
|
|
font-family: Lato, sans-serif;
|
|
left:-40px;
|
|
position:relative;
|
|
padding-left:20px;
|
|
padding-top:10px;
|
|
padding-bottom:10px;
|
|
cursor:pointer;
|
|
transition:all 0.5s;
|
|
}
|
|
#contents hr{
|
|
left:-40px;
|
|
position:relative;
|
|
height:2px;
|
|
outline:0;
|
|
border:0;
|
|
background-color:rgba(0,0,0,0.1);
|
|
}
|
|
#contents a {
|
|
text-decoration:none;color:rgb(229,45,39); padding:10px; font-weight:900;
|
|
}
|
|
#help,#about,#embed {
|
|
display:none;
|
|
color:black;
|
|
left:10%;
|
|
text-align:center;
|
|
background-color:white;
|
|
padding:10px;
|
|
border-left:0.5vw solid rgb(229,45,39);
|
|
}
|
|
#help h1,#about h1,#embed h1{
|
|
font-size:10vw;
|
|
}
|
|
#help p,#help li,#about p,#about li,#embed p,#embed li{
|
|
font-size:25px;
|
|
text-align:center;
|
|
}
|
|
#instruct {
|
|
width:75%;
|
|
}
|
|
#embedUrl {
|
|
font-size:20px;
|
|
}
|
|
.bg{
|
|
left:0;
|
|
top:0;
|
|
height:100%;
|
|
width:100%;
|
|
position:fixed;
|
|
display:none;
|
|
}
|
|
#bg1 {
|
|
background-color:white;
|
|
z-index:501;
|
|
}
|
|
#bg2 {
|
|
background-color:rgba(0,0,0,0.5);
|
|
z-index:1001;
|
|
}
|
|
#mainPage {
|
|
position:absolute;
|
|
width:100%;
|
|
left:0;
|
|
bottom:0;
|
|
top:30%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
.card {
|
|
position:relative;
|
|
width: 80% !important;
|
|
height:auto;
|
|
top:0 !important;
|
|
margin: 2vw auto;
|
|
padding-top:2vw;
|
|
font-size:1vw;
|
|
text-align: center;
|
|
box-shadow: 0 0 20px -4px black;
|
|
border-radius:4px !important;
|
|
background-color:white;
|
|
}
|
|
#prime {
|
|
height:30vw;
|
|
}
|
|
#actualCount {
|
|
font-size: 8vw !important;
|
|
}
|
|
#totalViews, #totalVideos, #pubDate {
|
|
font-size:3vw !important;
|
|
line-height:1;
|
|
font-weight:400;
|
|
}
|
|
#dp {
|
|
position:absolute;
|
|
height:8vw;
|
|
left:5%;
|
|
border-radius:8vw;
|
|
cursor:pointer;
|
|
}
|
|
#username,#input button{
|
|
|
|
border:none;
|
|
outline:none;
|
|
color:white;
|
|
}
|
|
#input {
|
|
position:absolute;
|
|
height:8vw;
|
|
right:5%;
|
|
width:75%;
|
|
background-color:rgba(0,0,0,0.3);
|
|
transition:background-color 0.25s;
|
|
border-radius:0.5vw;
|
|
}
|
|
#input button {
|
|
height:100%;
|
|
background-color:rgb(229,45,39);
|
|
right:0;
|
|
width:8vw;
|
|
overflow:hidden;
|
|
cursor:pointer;
|
|
position:absolute;
|
|
display:none;
|
|
}
|
|
#username {
|
|
font-size:4vw;
|
|
font-family: Lato, sans-serif;
|
|
text-align:center;
|
|
float:left;
|
|
height:100%;
|
|
width:100%;
|
|
background-color:transparent;
|
|
transition:width 0.25s;
|
|
}
|
|
#search {
|
|
height:60%;
|
|
left:20%;
|
|
}
|
|
.bar:before, .bar:after {
|
|
content:'';
|
|
height:0.5vw;
|
|
width:0;
|
|
bottom:0;
|
|
position:absolute;
|
|
background:rgb(229,45,39);
|
|
transition:0.2s ease all;
|
|
}
|
|
.bar:before {
|
|
left:50%;
|
|
}
|
|
.bar:after {
|
|
right:50%;
|
|
}
|
|
input:focus ~ .bar:before, input:focus ~ .bar:after {
|
|
width:50%;
|
|
}
|
|
#username:focus {
|
|
width:87%;
|
|
}
|
|
#suggest {
|
|
position:absolute;
|
|
left:0;
|
|
top:8vw;
|
|
z-index:400;
|
|
width:100%;
|
|
display:none;
|
|
box-shadow:0 4px 10px -4px black;
|
|
list-style-type:none;
|
|
padding:0;
|
|
margin:0;
|
|
background-color:white;
|
|
|
|
}
|
|
.suggest{
|
|
color:black;
|
|
cursor:pointer;
|
|
height:50px;
|
|
padding-bottom:10px;
|
|
padding-top:10px;
|
|
}
|
|
|
|
.suggest div{
|
|
font-size:2.5vw;
|
|
position:relative;
|
|
margin-left:10px;
|
|
left:50%;
|
|
top:50%;
|
|
-webkit-transform:translate(-50%,-50%);
|
|
transform:translate(-50%,-50%);
|
|
}
|
|
|
|
.suggest:hover {
|
|
background-color:rgb(229,45,39);
|
|
color:white;
|
|
}
|
|
|
|
.suggestImg {
|
|
float:left;
|
|
width:50px;
|
|
height:50px;
|
|
border-radius:50%;
|
|
margin-left:10px;
|
|
}
|
|
#topnum {
|
|
width:100%;
|
|
top:12vw;
|
|
position:absolute;
|
|
}
|
|
#extra {
|
|
text-align:center;
|
|
font-weight:400;
|
|
position:relative;
|
|
overflow:hidden;
|
|
top:0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width:4vw;
|
|
}
|
|
.extra {
|
|
height:4vw;
|
|
border-radius:2vw;
|
|
}
|
|
#arrowCircle {
|
|
background-color:rgb(229,45,39);
|
|
width:4vw;
|
|
height:4vw;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
border-radius:5vw;
|
|
cursor:pointer;
|
|
-webkit-transition:transform 0.5s;
|
|
-webkit-transition:-webkit-transform 0.5s;
|
|
transition:transform 0.5s;
|
|
}
|
|
#extraContent {
|
|
opacity:0;
|
|
margin-bottom:10vw;
|
|
}
|
|
#extra table {
|
|
border-collapse: collapse;
|
|
font-size:2vw;
|
|
font-weight:100;
|
|
}
|
|
#extra th, #extra td {
|
|
text-align: left;
|
|
vertical-align: center;
|
|
padding-top: 10px;
|
|
padding-bottom:10px;
|
|
padding-left:2vw;
|
|
padding-right:2vw;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
#milestoneBox {
|
|
font-size:3vw;
|
|
font-weight:100;
|
|
}
|
|
#myChart-wrapper {
|
|
width:80%;
|
|
height:30vh;
|
|
}
|
|
#charts {
|
|
height:15vh;
|
|
display:none;
|
|
overflow:hidden;
|
|
}
|
|
#showchart {
|
|
top:50%;
|
|
left:50%;
|
|
-webkit-transform:translate(-50%,-50%);
|
|
transform:translate(-50%,-50%);
|
|
position:absolute;
|
|
}
|
|
#hidechart {
|
|
display:none;
|
|
}
|
|
.chartbutton {
|
|
border:none;
|
|
outline:none;
|
|
background-color:rgb(229,45,39);
|
|
color:white;
|
|
height:6vh;
|
|
width:15vw;
|
|
border-radius:4px;
|
|
font-weight:900;
|
|
cursor:pointer;
|
|
overflow:hidden;
|
|
z-index:2;
|
|
}
|
|
#hidechart, #myChart-wrapper {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
a {text-decoration:none;}
|
|
@media only screen and (max-width: 800px), screen and (orientation: portrait){
|
|
#instruct {
|
|
width:95%;
|
|
}
|
|
.card {
|
|
width: 98% !important;
|
|
font-size:3vw;
|
|
}
|
|
.extra {
|
|
height:10vw;
|
|
}
|
|
#extra table {
|
|
font-size:5vw;
|
|
}
|
|
#milestoneBox {
|
|
font-size:8vw;
|
|
}
|
|
#actualCount {
|
|
font-size: 15vw !important;
|
|
}
|
|
#totalViews, #totalVideos, #pubDate {
|
|
font-size: 8vw !important;
|
|
}
|
|
#prime {
|
|
height:40vw !important;
|
|
}
|
|
#username:focus {
|
|
width:84%;
|
|
}
|
|
#extra, #arrowCircle {
|
|
width:10vw;
|
|
}
|
|
#arrowCircle {
|
|
height:10vw;
|
|
}
|
|
#arrow {
|
|
box-shadow:0.75vw 0.75vw white;
|
|
height:2.625vw;
|
|
width:2.625vw;
|
|
}
|
|
#username {
|
|
font-size:6vw;
|
|
}
|
|
#input,#dp {
|
|
height:12vw;
|
|
}
|
|
#suggest {
|
|
top:12vw;
|
|
}
|
|
#input button {
|
|
width:12vw;
|
|
}
|
|
#topnum {
|
|
top:14vw;
|
|
}
|
|
.chartbutton {
|
|
height:8vh;
|
|
width:35vw;
|
|
}
|
|
#myChart-wrapper {
|
|
width:95%;
|
|
}
|
|
#charts {
|
|
display:none !important;
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
|
}
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section id="menu">
|
|
<div id="buttonBig">
|
|
<div id="buttonSmall">
|
|
<hr id="hr1"><hr id="hr2"><hr id="hr3">
|
|
</div>
|
|
</div>
|
|
|
|
<img id="logo" alt="YouCount Logo">
|
|
<img id="logo2" alt="YouCount Icon">
|
|
|
|
<div id="sharebox">
|
|
<li id="shareLi"><img id="share" class="share" alt="Share Icon"></li><br>
|
|
<li><img id="fb" class="share" alt="Facebook Icon"></li><br>
|
|
<li><img id="tw" class="share" alt="Twitter Icon"></li><br>
|
|
<li><img id="lnkdIn" class="share" alt="LinkedIn Icon"></li><br>
|
|
<li><img id="tb" class="share" alt="Tumblr Icon"></li><br>
|
|
<li><img id="rdit" class="share" alt="Reddit Icon"></li><br>
|
|
<li><img id="link" class="share" alt="Link Icon"></li>
|
|
</div>
|
|
</section>
|
|
|
|
<span id="pageUrl">
|
|
Select and copy the URL of this page below and use it to share this page anywhere!
|
|
<br><input type="text" value="" onclick="this.select()" readonly />
|
|
</span>
|
|
|
|
<section id="contents">
|
|
<ul>
|
|
<li id="menuHelp" class="help">Help Me!</li><br>
|
|
<article id="help">
|
|
<span class="bar2"></span>
|
|
<h1>HOW TO USE!</h1>
|
|
<p>Click on the grey searchbox on top and write the Username/ID/YouTube Channel Name/Youtube URL (all of them work!)
|
|
of any YouTube channel of your choice and press Enter or the search button. In a way, this is a search engine for YouTube Channels
|
|
which shows you the YouTube subscriber count of the most relevant match of your query, so any keywords related to the YouTube channel
|
|
can be entered in the search query.</p>
|
|
<img id="instruct" alt="The searchbox is the grey area which when clicked becomes red with a search button appearing on the right. The profile image of YouTube Channel can also be clicked to trigger searchbox.">
|
|
<p>For example, to see Fine Brothers Entertainment's live YouTube subscriber count, click on
|
|
the grey area and type in any one of these:
|
|
<ul>
|
|
<li>1. <b>TheFineBros</b> (their username)</li><br>
|
|
<li>2. <b>Fine Brothers Entertainment</b> (their YouTube channel name)</li><br>
|
|
<li>3. <b>fine bros</b> (a search query)</li><br>
|
|
</ul>
|
|
</p>
|
|
<p>All of the above queries show the realtime YouTube subscriber count of the Fine Brothers Entertainment's YouTube channel.</p>
|
|
<p>The YouTube subscriber count is updated every second!</p>
|
|
<p>You can also click on the red arrow button to see other useful information related to the YouTube channel
|
|
like the total views and of the YouTube channel, the total videos uploaded by the YouTube channel and how far the YouTube channel is from
|
|
it's subscriber milestone!</p>
|
|
<p>Further, you can see the graphical representation of the increasing/decreasing YouTube subscriber count of the YouTube channel by
|
|
clicking on the "Show Trend" button.</p>
|
|
</article>
|
|
<hr>
|
|
<li id="menuAbout" class="about">About YouCount</li><br>
|
|
<article id="about">
|
|
<span class="bar2"></span>
|
|
<h1>WHAT IS YOUCOUNT?</h1>
|
|
<p>YouCount allows you to see the YouTube subscriber count of any YouTube Channel in realtime.
|
|
Youtube doesn't allow you to see the subscriber count in realtime.
|
|
But on YouCount, the YouTube subscriber count is updated every second!</p>
|
|
<p>There are other websites that allow you to do this as well,
|
|
but most of them are either badly designed and/or are not optimized for mobile devices.</p>
|
|
<p>YouCount has been specifically designed using the Material Design language to make it look awesome!</p>
|
|
<p>It is also optimized for mobile devices and has been made to work even with older browsers.</p>
|
|
<p>To know more or to get in contact:
|
|
<ul>
|
|
<li>1. <a href="//github.com/YouCount/youcount.github.io">Visit our GitHub Project site</a></li>
|
|
<li>2. Send an Email: <a id="email"></a></li>
|
|
</ul>
|
|
</p>
|
|
<p>Support the website by sharing it with your friends!</p>
|
|
</article>
|
|
<hr>
|
|
<li id="menuEmbed" class="embed">Embed this!</li><br>
|
|
<article id="embed">
|
|
<span class="bar2"></span>
|
|
<h1>EMBED THIS!</h1>
|
|
<p>
|
|
Copy the code below and paste it where you want to embed this:
|
|
</p>
|
|
<code id="embedUrl"></code>
|
|
<p>
|
|
Adjust it's size by changing the "height" and "width" attribute of the iframe.
|
|
The size will automatically adjust to the size of the iframe.
|
|
</p>
|
|
</article>
|
|
<hr>
|
|
</ul>
|
|
</section>
|
|
|
|
<div class="bg" id="bg1"></div><div class="bg" id="bg2"></div>
|
|
|
|
<div id="mainPage">
|
|
<section id="prime" class="card">
|
|
<label for="username">
|
|
<img id="dp" alt="Channel Image">
|
|
</label>
|
|
<div id="input">
|
|
<input type="text" id="username" value="Loading..." onkeypress="trigenter(event)"/>
|
|
<button id="inputButton">
|
|
<img id="search" alt="Search Button to process the query">
|
|
</button>
|
|
<span class="bar"></span>
|
|
<ul id="suggest">
|
|
<li class="suggest" id="suggest1"><img class="suggestImg"><div></div></li>
|
|
<li class="suggest"><img class="suggestImg"><div></div></li>
|
|
<li class="suggest"><img class="suggestImg"><div></div></li>
|
|
<li class="suggest"><img class="suggestImg"><div></div></li>
|
|
<li class="suggest"><img class="suggestImg"><div></div></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="topnum">
|
|
<br>
|
|
<span id="actualCount">Loading...</span>
|
|
<br>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="extra" class="card">
|
|
<button class="chartbutton" id="showchart">SHOW TREND</button>
|
|
<div id="extraContent">
|
|
<span class="milestones" id="milestoneBox">
|
|
<span id="milestoneLeft">Loading...</span> left from <span id="milestoneTarget">Loading...</span>!
|
|
</span>
|
|
<br><br><br>
|
|
<table style="margin-left: auto; margin-right: auto; text-align: center;">
|
|
<tr>
|
|
<td>Total Views:</td>
|
|
<td><span id="totalViews">Loading...</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Total Videos:</td>
|
|
<td><span id="totalVideos">Loading...</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Since:</td>
|
|
<td><span id="pubDate">Loading...</span></td>
|
|
</tr>
|
|
</table>
|
|
<div id="myChart-wrapper">
|
|
<canvas width="400" height="200" id="myChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<button class="chartbutton" id="hidechart">HIDE TREND</button>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
//Odometer
|
|
(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G=[].slice;q='<span class="odometer-value"></span>',n='<span class="odometer-ribbon"><span class="odometer-ribbon-inner">'+q+"</span></span>",d='<span class="odometer-digit"><span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner">'+n+"</span></span>",g='<span class="odometer-formatting-mark"></span>',c="(,ddd).dd",h=/^\(?([^)]*)\)?(?:(.)(d+))?$/,i=30,f=2e3,a=20,j=2,e=.5,k=1e3/i,b=1e3/a,o="transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",y=document.createElement("div").style,p=null!=y.transition||null!=y.webkitTransition||null!=y.mozTransition||null!=y.oTransition,w=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,l=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,s=function(a){var b;return b=document.createElement("div"),b.innerHTML=a,b.children[0]},v=function(a,b){return a.className=a.className.replace(new RegExp("(^| )"+b.split(" ").join("|")+"( |$)","gi")," ")},r=function(a,b){return v(a,b),a.className+=" "+b},z=function(a,b){var c;return null!=document.createEvent?(c=document.createEvent("HTMLEvents"),c.initEvent(b,!0,!0),a.dispatchEvent(c)):void 0},u=function(){var a,b;return null!=(a=null!=(b=window.performance)?"function"==typeof b.now?b.now():void 0:void 0)?a:+new Date},x=function(a,b){return null==b&&(b=0),b?(a*=Math.pow(10,b),a+=.5,a=Math.floor(a),a/=Math.pow(10,b)):Math.round(a)},A=function(a){return 0>a?Math.ceil(a):Math.floor(a)},t=function(a){return a-x(a)},C=!1,(B=function(){var a,b,c,d,e;if(!C&&null!=window.jQuery){for(C=!0,d=["html","text"],e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(function(a){var b;return b=window.jQuery.fn[a],window.jQuery.fn[a]=function(a){var c;return null==a||null==(null!=(c=this[0])?c.odometer:void 0)?b.apply(this,arguments):this[0].odometer.update(a)}}(a));return e}})(),setTimeout(B,0),m=function(){function a(b){var c,d,e,g,h,i,l,m,n,o,p=this;if(this.options=b,this.el=this.options.el,null!=this.el.odometer)return this.el.odometer;this.el.odometer=this,m=a.options;for(d in m)g=m[d],null==this.options[d]&&(this.options[d]=g);null==(h=this.options).duration&&(h.duration=f),this.MAX_VALUES=this.options.duration/k/j|0,this.resetFormat(),this.value=this.cleanValue(null!=(n=this.options.value)?n:""),this.renderInside(),this.render();try{for(o=["innerHTML","innerText","textContent"],i=0,l=o.length;l>i;i++)e=o[i],null!=this.el[e]&&!function(a){return Object.defineProperty(p.el,a,{get:function(){var b;return"innerHTML"===a?p.inside.outerHTML:null!=(b=p.inside.innerText)?b:p.inside.textContent},set:function(a){return p.update(a)}})}(e)}catch(q){c=q,this.watchForMutations()}}return a.prototype.renderInside=function(){return this.inside=document.createElement("div"),this.inside.className="odometer-inside",this.el.innerHTML="",this.el.appendChild(this.inside)},a.prototype.watchForMutations=function(){var a,b=this;if(null!=l)try{return null==this.observer&&(this.observer=new l(function(){var a;return a=b.el.innerText,b.renderInside(),b.render(b.value),b.update(a)})),this.watchMutations=!0,this.startWatchingMutations()}catch(c){a=c}},a.prototype.startWatchingMutations=function(){return this.watchMutations?this.observer.observe(this.el,{childList:!0}):void 0},a.prototype.stopWatchingMutations=function(){var a;return null!=(a=this.observer)?a.disconnect():void 0},a.prototype.cleanValue=function(a){var b;return"string"==typeof a&&(a=a.replace(null!=(b=this.format.radix)?b:".","<radix>"),a=a.replace(/[.,]/g,""),a=a.replace("<radix>","."),a=parseFloat(a,10)||0),x(a,this.format.precision)},a.prototype.bindTransitionEnd=function(){var a,b,c,d,e,f,g=this;if(!this.transitionEndBound){for(this.transitionEndBound=!0,b=!1,e=o.split(" "),f=[],c=0,d=e.length;d>c;c++)a=e[c],f.push(this.el.addEventListener(a,function(){return b?!0:(b=!0,setTimeout(function(){return g.render(),b=!1,z(g.el,"odometerdone")},0),!0)},!1));return f}},a.prototype.resetFormat=function(){var a,b,d,e,f,g,i,j;if(a=null!=(i=this.options.format)?i:c,a||(a="d"),d=h.exec(a),!d)throw new Error("Odometer: Unparsable digit format");return j=d.slice(1,4),g=j[0],f=j[1],b=j[2],e=(null!=b?b.length:void 0)||0,this.format={repeating:g,radix:f,precision:e}},a.prototype.render=function(a){var b,c,d,e,f,g,h,i,j,k,l,m;for(null==a&&(a=this.value),this.stopWatchingMutations(),this.resetFormat(),this.inside.innerHTML="",g=this.options.theme,b=this.el.className.split(" "),f=[],i=0,k=b.length;k>i;i++)c=b[i],c.length&&((e=/^odometer-theme-(.+)$/.exec(c))?g=e[1]:/^odometer(-|$)/.test(c)||f.push(c));for(f.push("odometer"),p||f.push("odometer-no-transitions"),f.push(g?"odometer-theme-"+g:"odometer-auto-theme"),this.el.className=f.join(" "),this.ribbons={},this.digits=[],h=!this.format.precision||!t(a)||!1,m=a.toString().split("").reverse(),j=0,l=m.length;l>j;j++)d=m[j],"."===d&&(h=!0),this.addDigit(d,h);return this.startWatchingMutations()},a.prototype.update=function(a){var b,c=this;return a=this.cleanValue(a),(b=a-this.value)?(v(this.el,"odometer-animating-up odometer-animating-down odometer-animating"),b>0?r(this.el,"odometer-animating-up"):r(this.el,"odometer-animating-down"),this.stopWatchingMutations(),this.animate(a),this.startWatchingMutations(),setTimeout(function(){return c.el.offsetHeight,r(c.el,"odometer-animating")},0),this.value=a):void 0},a.prototype.renderDigit=function(){return s(d)},a.prototype.insertDigit=function(a,b){return null!=b?this.inside.insertBefore(a,b):this.inside.children.length?this.inside.insertBefore(a,this.inside.children[0]):this.inside.appendChild(a)},a.prototype.addSpacer=function(a,b,c){var d;return d=s(g),d.innerHTML=a,c&&r(d,c),this.insertDigit(d,b)},a.prototype.addDigit=function(a,b){var c,d,e,f;if(null==b&&(b=!0),"-"===a)return this.addSpacer(a,null,"odometer-negation-mark");if("."===a)return this.addSpacer(null!=(f=this.format.radix)?f:".",null,"odometer-radix-mark");if(b)for(e=!1;;){if(!this.format.repeating.length){if(e)throw new Error("Bad odometer format without digits");this.resetFormat(),e=!0}if(c=this.format.repeating[this.format.repeating.length-1],this.format.repeating=this.format.repeating.substring(0,this.format.repeating.length-1),"d"===c)break;this.addSpacer(c)}return d=this.renderDigit(),d.querySelector(".odometer-value").innerHTML=a,this.digits.push(d),this.insertDigit(d)},a.prototype.animate=function(a){return p&&"count"!==this.options.animation?this.animateSlide(a):this.animateCount(a)},a.prototype.animateCount=function(a){var c,d,e,f,g,h=this;if(d=+a-this.value)return f=e=u(),c=this.value,(g=function(){var i,j,k;return u()-f>h.options.duration?(h.value=a,h.render(),void z(h.el,"odometerdone")):(i=u()-e,i>b&&(e=u(),k=i/h.options.duration,j=d*k,c+=j,h.render(Math.round(c))),null!=w?w(g):setTimeout(g,b))})()},a.prototype.getDigitCount=function(){var a,b,c,d,e,f;for(d=1<=arguments.length?G.call(arguments,0):[],a=e=0,f=d.length;f>e;a=++e)c=d[a],d[a]=Math.abs(c);return b=Math.max.apply(Math,d),Math.ceil(Math.log(b+1)/Math.log(10))},a.prototype.getFractionalDigitCount=function(){var a,b,c,d,e,f,g;for(e=1<=arguments.length?G.call(arguments,0):[],b=/^\-?\d*\.(\d*?)0*$/,a=f=0,g=e.length;g>f;a=++f)d=e[a],e[a]=d.toString(),c=b.exec(e[a]),e[a]=null==c?0:c[1].length;return Math.max.apply(Math,e)},a.prototype.resetDigits=function(){return this.digits=[],this.ribbons=[],this.inside.innerHTML="",this.resetFormat()},a.prototype.animateSlide=function(a){var b,c,d,f,g,h,i,j,k,l,m,n,o,p,q,s,t,u,v,w,x,y,z,B,C,D,E;if(s=this.value,j=this.getFractionalDigitCount(s,a),j&&(a*=Math.pow(10,j),s*=Math.pow(10,j)),d=a-s){for(this.bindTransitionEnd(),f=this.getDigitCount(s,a),g=[],b=0,m=v=0;f>=0?f>v:v>f;m=f>=0?++v:--v){if(t=A(s/Math.pow(10,f-m-1)),i=A(a/Math.pow(10,f-m-1)),h=i-t,Math.abs(h)>this.MAX_VALUES){for(l=[],n=h/(this.MAX_VALUES+this.MAX_VALUES*b*e),c=t;h>0&&i>c||0>h&&c>i;)l.push(Math.round(c)),c+=n;l[l.length-1]!==i&&l.push(i),b++}else l=function(){E=[];for(var a=t;i>=t?i>=a:a>=i;i>=t?a++:a--)E.push(a);return E}.apply(this);for(m=w=0,y=l.length;y>w;m=++w)k=l[m],l[m]=Math.abs(k%10);g.push(l)}for(this.resetDigits(),D=g.reverse(),m=x=0,z=D.length;z>x;m=++x)for(l=D[m],this.digits[m]||this.addDigit(" ",m>=j),null==(u=this.ribbons)[m]&&(u[m]=this.digits[m].querySelector(".odometer-ribbon-inner")),this.ribbons[m].innerHTML="",0>d&&(l=l.reverse()),o=C=0,B=l.length;B>C;o=++C)k=l[o],q=document.createElement("div"),q.className="odometer-value",q.innerHTML=k,this.ribbons[m].appendChild(q),o===l.length-1&&r(q,"odometer-last-value"),0===o&&r(q,"odometer-first-value");return 0>t&&this.addDigit("-"),p=this.inside.querySelector(".odometer-radix-mark"),null!=p&&p.parent.removeChild(p),j?this.addSpacer(this.format.radix,this.digits[j-1],"odometer-radix-mark"):void 0}},a}(),m.options=null!=(E=window.odometerOptions)?E:{},setTimeout(function(){var a,b,c,d,e;if(window.odometerOptions){d=window.odometerOptions,e=[];for(a in d)b=d[a],e.push(null!=(c=m.options)[a]?(c=m.options)[a]:c[a]=b);return e}},0),m.init=function(){var a,b,c,d,e,f;if(null!=document.querySelectorAll){for(b=document.querySelectorAll(m.options.selector||".odometer"),f=[],c=0,d=b.length;d>c;c++)a=b[c],f.push(a.odometer=new m({el:a,value:null!=(e=a.innerText)?e:a.textContent}));return f}},null!=(null!=(F=document.documentElement)?F.doScroll:void 0)&&null!=document.createEventObject?(D=document.onreadystatechange,document.onreadystatechange=function(){return"complete"===document.readyState&&m.options.auto!==!1&&m.init(),null!=D?D.apply(this,arguments):void 0}):document.addEventListener("DOMContentLoaded",function(){return m.options.auto!==!1?m.init():void 0},!1),"function"==typeof define&&define.amd?define(["jquery"],function(){return m}):typeof exports===!1?module.exports=m:window.Odometer=m}).call(this);
|
|
//Odometer End
|
|
//This contains the code within the html files which loads up and shows subscriber count. Somw of the comments have not been updated
|
|
//as the script was updated and they are also written in a vague manner as I had commented them to assist me and then later on,
|
|
//I had decided to upload this file as well.
|
|
//--------PRELUDE---------
|
|
//----Variables----
|
|
var APIkeys = ["AIzaSyBAb4nM48dVlty7LPHm_qrcWrhlQ1P205U"];
|
|
var preSelect=["PewDiePie","Smosh","MarquesBrownlee","markiplierGAME","KSIOlajidebt","TheFineBros","JennaMarbles","nigahiga","Vsauce"];
|
|
var username = preSelect[Math.floor(Math.random() * preSelect.length)];
|
|
var rawInput = username;
|
|
var channelname,channeldate="", popstatevar = 1;
|
|
var keyIndex = Math.round(Math.random()*(APIkeys.length-1)),
|
|
isLoaded = 0,
|
|
seconds = 0;
|
|
var actualCount;
|
|
var targets = [10, 25, 50, 1E2, 5E2, 1E3, 2.5E3, 5E3, 1E4, 2.5E4, 5E4, 1E5, 2.5E5, 5E5, 1E6, 2E6, 3E6, 4E6, 5E6, 6E6,7E6, 10E6, 15E6, 20E6, 25E6, 30E6, 40E6, 50E6, 70E6, 1E8, 1.5E8, 2E8, 3E8];
|
|
var data;
|
|
var ctx;
|
|
var myLineChart;
|
|
|
|
//-----select APIkey randomly----
|
|
function getKey() {
|
|
++keyIndex;
|
|
if(keyIndex == APIkeys.length) keyIndex = 0;
|
|
return APIkeys[keyIndex];
|
|
}
|
|
//----AJAX function for code reusability----
|
|
function getText(url, callback) {
|
|
var request = new XMLHttpRequest();
|
|
request.onreadystatechange = function() {
|
|
if(request.readyState == 4) {
|
|
if(request.status == 200) {
|
|
callback(JSON.parse(request.responseText));
|
|
}
|
|
}
|
|
};
|
|
request.open('GET', url);
|
|
request.send();
|
|
}
|
|
//----text changing function for code reusability----
|
|
function changeText(elem, changeVal) {
|
|
if('form' in elem) {
|
|
elem.value = changeVal;
|
|
} else {
|
|
elem.textContent = changeVal;
|
|
}
|
|
}
|
|
|
|
//--------MAIN PROGRAM---------
|
|
//----receives value inputted by user and sends it while input box is starts showing 'Loading...'----
|
|
function getValue() {
|
|
var value = document.getElementById('username').value;
|
|
if(!value || !value.trim() || value.trim() == channelname || value.trim() == "Not Found!" || value.trim() == "Loading...")
|
|
return;
|
|
changeText(document.getElementById('username'), "Loading...");
|
|
document.getElementById("username").blur();
|
|
rawInput = value.trim();
|
|
queryName();
|
|
}
|
|
|
|
/*
|
|
function to:-
|
|
1. determine whether value inputted leads up to a youtube channel
|
|
2. get channel name, picture, total videos, total views, date of starting youtube, and changing url
|
|
*/
|
|
var isChart = 0,
|
|
notFound = 0;
|
|
function queryName() {
|
|
getText("https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + encodeURIComponent(rawInput) + "&type=channel&maxResults=1&key=" + getKey(), function(e) {
|
|
if(e.pageInfo.totalResults < 1) {//if no result found, show not found and hide stuff
|
|
clearInterval(intervalId);
|
|
document.getElementById('actualCount').style.display = "none";
|
|
document.getElementById('milestoneBox').style.display = "none";
|
|
document.getElementById('dp').style.display = "none";
|
|
var arr = ["totalViews","totalVideos","pubDate","username"];
|
|
for(var x=0;x<arr.length;x++){
|
|
changeText(document.getElementById(arr[x]),"Not Found!");
|
|
}
|
|
notFound = 1;
|
|
return;
|
|
}//else
|
|
//show stuff
|
|
if(notFound == 1) {//show HTML elements if previously hidden
|
|
document.getElementById('actualCount').style.display = "inline-block";
|
|
document.getElementById('milestoneBox').style.display = "inline";
|
|
document.getElementById('dp').style.display = "block";
|
|
intervalId = setInterval(live, 1000);
|
|
}
|
|
|
|
//set channel name in input box and title
|
|
channelname = e.items[0].snippet.title;
|
|
document.title = channelname + "'s YouTube Live Subscriber Count - YouCount";
|
|
changeText(document.querySelector("#username"), channelname);
|
|
|
|
//sets username to channel id so that further requests to find out about the channel can be made
|
|
username = e.items[0].snippet.channelId.trim();
|
|
|
|
//resetting charts so it loads again.
|
|
if(isChart===2){
|
|
isChart = 1;
|
|
}
|
|
//running live manually to get updated info immediately
|
|
live();
|
|
|
|
//set date of starting youtube with months in text (jan, feb, etc)
|
|
var pubDate = e.items[0].snippet.publishedAt.split("T")[0];
|
|
pubDate = pubDate.split("-");
|
|
if(pubDate[1]=='01')pubDate[1]='Jan'; else if(pubDate[1]=='02')pubDate[1]='Feb'; else if(pubDate[1]=='03')pubDate[1]='Mar'; else if(pubDate[1]=='04')pubDate[1]='Apr'; else if(pubDate[1]=='05')pubDate[1]='May'; else if(pubDate[1]=='06')pubDate[1]='Jun'; else if(pubDate[1]=='07')pubDate[1]='Jul'; else if(pubDate[1]=='08')pubDate[1]='Aug'; else if(pubDate[1]=='09')pubDate[1]='Sep'; else if(pubDate[1]=='10')pubDate[1]='Oct'; else if(pubDate[1]=='11')pubDate[1]='Nov'; else if(pubDate[1]=='12')pubDate[1]='Dec';
|
|
channeldate = pubDate[2] + '-' + pubDate[1] + '-' + pubDate[0];
|
|
|
|
//sends request to find if customUrl is available. if available, uses it for setting url, otherwise uses title for setting url
|
|
//if pushState has to not be set during a queryName run, popstatevar is set to 0. It automatically resets to 1 after not running once.
|
|
var reqType = (username.length >= 24 && username.substr(0, 2).toUpperCase() == "UC") ? "id" : "forUsername";
|
|
if(popstatevar == 1) {
|
|
var urlCandidate, urlFinalName;
|
|
var url = "https://www.googleapis.com/youtube/v3/channels?part=snippet&" + reqType + "=" + username + "&fields=items/snippet&key=" + getKey();
|
|
getText(url, function(e) {
|
|
if(e.items[0].snippet.customUrl) {
|
|
urlCandidate = e.items[0].snippet.customUrl.trim();
|
|
} else {
|
|
urlCandidate = channelname.trim().replace(/\s+/g, '+');
|
|
}
|
|
var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + encodeURIComponent(urlCandidate) + "&type=channel&maxResults=1&key=" + getKey();
|
|
getText(url, function(f) {
|
|
if((f.pageInfo.totalResults < 1) || (f.items[0].snippet.channelId.trim() != username)){
|
|
urlFinalName = username;
|
|
} else {
|
|
urlFinalName = urlCandidate;
|
|
}
|
|
history.pushState(null, null, "#!/" + urlFinalName);
|
|
//also sets iframe src url for embedding and url for sharing.
|
|
changeText(document.getElementById('embedUrl'), '<iframe src="https://youcount.github.io/e/#!/' + urlFinalName + '" height="100" width="250" frameborder="0"></iframe>');
|
|
changeText(document.querySelector('#pageUrl input'), 'https://youcount.github.io/#!/' + urlFinalName);
|
|
});
|
|
});
|
|
} else popstatevar = 1;//resetting of popstatevar
|
|
|
|
//set profile picture of channel
|
|
document.getElementById("dp").src = e.items[0].snippet.thumbnails.default.url;
|
|
/*
|
|
from https://developers.google.com/youtube/v3/docs/channels#properties
|
|
snippet.description - Channel description
|
|
*/
|
|
});
|
|
loadfunc();
|
|
}
|
|
var isLive = 0;
|
|
|
|
function live() {
|
|
var reqType = (username.length >= 24 && username.substr(0, 2).toUpperCase() == "UC") ? "id" : "forUsername";
|
|
var url = "https://www.googleapis.com/youtube/v3/channels?part=statistics&" + reqType + "=" + username + "&fields=items/statistics/subscriberCount&key=" + getKey();
|
|
getText(url, function(e) {
|
|
var prevCount = actualCount;
|
|
|
|
actualCount = e.items[0].statistics.subscriberCount;//set actualCount to realtime subscribers
|
|
|
|
//get milestones
|
|
var target = 0;
|
|
for(var i = 0; i < targets.length; i++) {
|
|
if(actualCount <= targets[i]) {
|
|
target = targets[i];
|
|
break;
|
|
}
|
|
}
|
|
var subs_left = target - actualCount;
|
|
|
|
if((actualCount-prevCount)>0)document.body.style.backgroundColor = 'rgb(240,255,240)';
|
|
else if((actualCount-prevCount)===0)document.body.style.backgroundColor = 'rgb(250,250,250)';
|
|
else document.body.style.backgroundColor = 'rgb(255,240,240)';
|
|
|
|
//load chart if not already loaded and update it.
|
|
++seconds;
|
|
if(isChart === 1) {
|
|
|
|
data = {
|
|
labels: [''],
|
|
datasets: [{
|
|
fillColor: "rgba(0,0,0,0)",
|
|
strokeColor: "rgba(229,45,39,0.5)",
|
|
pointColor: "rgba(229,45,39,1)",
|
|
data: [actualCount]
|
|
}]
|
|
};
|
|
ctx = document.getElementById("myChart").getContext("2d");
|
|
myLineChart = new Chart(ctx).Line(data, {
|
|
scaleShowGridLines: false,
|
|
pointDot: false,
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
});
|
|
isChart = 2;
|
|
seconds=0;
|
|
}
|
|
|
|
//send updated values of actualCount and milestones
|
|
if(!isLive) {
|
|
new Odometer({
|
|
el: document.getElementById("actualCount"),
|
|
value: actualCount,
|
|
format: '(,ddd)',
|
|
theme: 'minimal'
|
|
});
|
|
new Odometer({
|
|
el: document.getElementById("milestoneLeft"),
|
|
value: subs_left,
|
|
format: '(,ddd)',
|
|
theme: 'minimal'
|
|
});
|
|
isLive = 1;
|
|
} else {
|
|
changeText(document.getElementById("actualCount"), actualCount);
|
|
changeText(document.getElementById("milestoneLeft"), subs_left);
|
|
changeText(document.getElementById("milestoneTarget"), target.toLocaleString("en-US"));
|
|
if(subs_left<1&&subs_left>-1){
|
|
document.getElementById("milestoneBox").innerHTML = "Congratulations!";
|
|
}
|
|
//if chart is already loaded, the value of chart is updated here.
|
|
if(isChart===2) {
|
|
myLineChart.addData([actualCount], '');
|
|
if(seconds > 30) {//the max values of x axis is 30 seconds and after that limit is reached, starting values start getting destroyed.
|
|
myLineChart.removeData();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
//this code below, which is not inside any function, starts in the very beginning.
|
|
|
|
//1. Check if iframe or http
|
|
if (window.top !== window.self || window.top.location != window.self.location || window.location.hostname !='youcount.github.io' || window.top.location.hostname != 'youcount.github.io')
|
|
window.top.location = window.self.location;
|
|
else if(window.location.protocol != "https:")
|
|
try {
|
|
window.location.protocol = "https:";
|
|
}
|
|
catch(err) {
|
|
window.location.protocol = "https";
|
|
}
|
|
else {
|
|
|
|
//2. code below is responsible for starting the processes in the beginning.
|
|
|
|
if(location.hash.split("#!/")[1]) {//if something is there after #!/, make that the search query else if subdirectory is available, make that the query. else do nothing.
|
|
rawInput = location.hash.split("#!/")[1].trim();
|
|
} else if(window.location.pathname != '/') {
|
|
rawInput = window.location.pathname;
|
|
}
|
|
queryName();//after getting the value for search query, queryName is called for the first time.
|
|
var intervalId = setInterval(live, 1000);//this sets live to be automatically called after every 1 second.
|
|
}
|
|
|
|
|
|
window.onpopstate = function() {
|
|
popstatevar = 0;
|
|
if(!location.hash.split("#!/")[1]) return;
|
|
rawInput = location.hash.split("#!/")[1].trim();
|
|
changeText(document.querySelector('#username'), "Loading...");
|
|
queryName();
|
|
};
|
|
//--------MAIN PROGRAM ENDS---------
|
|
|
|
function getScript(source,prop,val,callback) {//used to load jQuery (basically a replacement for $.getScript)
|
|
var script = document.createElement('script');
|
|
var prior = document.getElementsByTagName('script')[0];
|
|
script.async = 1;
|
|
prior.parentNode.insertBefore(script, prior);
|
|
|
|
script.onload = script.onreadystatechange = function( _, isAbort ) {
|
|
if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
|
|
script.onload = script.onreadystatechange = null;
|
|
script = undefined;
|
|
|
|
if(!isAbort) { if(callback) callback(); }
|
|
}
|
|
};
|
|
script.src = source;
|
|
for(var a=0;a<prop.length;a++){
|
|
script[prop[a]]= val[a];
|
|
}
|
|
}
|
|
|
|
function loadfunc() {// this loads jQuery and the rest of the script, so it can run the code i wrote using jquery that has to be run automatically
|
|
if(!window.jQuery) {
|
|
var properties = ["integrity","crossorigin"];
|
|
var values = ["sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=","anonymous"];
|
|
getScript("https://code.jquery.com/jquery-3.0.0.min.js",properties,values, function(){$.getScript("script.js");});
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|