Youtube Live Stats Counter Jquery App - Open Source Tool
Youtube Live Stats Counter Jquery App - Open Source Tool

Today i will share YouTube live stats counter jQuery app with you which will show up realtime youtube stats of any youtube video. This tool uses jquery and youtube api to fetch results.

Good day designers today we are going to design Youtube Live Stats Counter Jquery App

As you know the HTML markup is needed for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below your can download them if you want:https://badurski.pl/files/odometer-theme-default.css
https://image.flaticon.com/icons/svg/159/159766.svg
https://image.flaticon.com/icons/svg/159/159775.svg
https://image.flaticon.com/icons/svg/159/159833.svg
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://badurski.pl/scripts/odometer.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
https://badurski.pl/scripts/jscolor.js

Save It As Youtube Live Stats Counter Jquery App/index.html :

<!DOCTYPE html>
<html lang="en" ><head><meta charset="UTF-8"><title>Youtube Live Stats Counter - jquery app</title><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Quicksand:700|Roboto'>
<link rel='stylesheet' href='https://badurski.pl/files/odometer-theme-default.css'><link rel="stylesheet" href="css/style.css"></head><body><header><div class='navigation'><nav><ul><li><a class='settings'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 478.703 478.703"><path d="M454.2,189.101l-33.6-5.7c-3.5-11.3-8-22.2-13.5-32.6l19.8-27.7c8.4-11.8,7.1-27.9-3.2-38.1l-29.8-29.8c-5.6-5.6-13-8.7-20.9-8.7c-6.2,0-12.1,1.9-17.1,5.5l-27.8,19.8c-10.8-5.7-22.1-10.4-33.8-13.9l-5.6-33.2c-2.4-14.3-14.7-24.7-29.2-24.7h-42.1c-14.5,0-26.8,10.4-29.2,24.7l-5.8,34c-11.2,3.5-22.1,8.1-32.5,13.7l-27.5-19.8c-5-3.6-11-5.5-17.2-5.5c-7.9,0-15.4,3.1-20.9,8.7l-29.9,29.8c-10.2,10.2-11.6,26.3-3.2,38.1l20,28.1c-5.5,10.5-9.9,21.4-13.3,32.7l-33.2,5.6c-14.3,2.4-24.7,14.7-24.7,29.2v42.1c0,14.5,10.4,26.8,24.7,29.2l34,5.8c3.5,11.2,8.1,22.1,13.7,32.5l-19.7,27.4c-8.4,11.8-7.1,27.9,3.2,38.1l29.8,29.8c5.6,5.6,13,8.7,20.9,8.7c6.2,0,12.1-1.9,17.1-5.5l28.1-20c10.1,5.3,20.7,9.6,31.6,13l5.6,33.6c2.4,14.3,14.7,24.7,29.2,24.7h42.2c14.5,0,26.8-10.4,29.2-24.7l5.7-33.6c11.3-3.5,22.2-8,32.6-13.5l27.7,19.8c5,3.6,11,5.5,17.2,5.5l0,0c7.9,0,15.3-3.1,20.9-8.7l29.8-29.8c10.2-10.2,11.6-26.3,3.2-38.1l-19.8-27.8c5.5-10.5,10.1-21.4,13.5-32.6l33.6-5.6c14.3-2.4,24.7-14.7,24.7-29.2v-42.1C478.9,203.801,468.5,191.501,454.2,189.101z M451.9,260.401c0,1.3-0.9,2.4-2.2,2.6l-42,7c-5.3,0.9-9.5,4.8-10.8,9.9c-3.8,14.7-9.6,28.8-17.4,41.9c-2.7,4.6-2.5,10.3,0.6,14.7l24.7,34.8c0.7,1,0.6,2.5-0.3,3.4l-29.8,29.8c-0.7,0.7-1.4,0.8-1.9,0.8c-0.6,0-1.1-0.2-1.5-0.5l-34.7-24.7c-4.3-3.1-10.1-3.3-14.7-0.6c-13.1,7.8-27.2,13.6-41.9,17.4c-5.2,1.3-9.1,5.6-9.9,10.8l-7.1,42c-0.2,1.3-1.3,2.2-2.6,2.2h-42.1c-1.3,0-2.4-0.9-2.6-2.2l-7-42c-0.9-5.3-4.8-9.5-9.9-10.8c-14.3-3.7-28.1-9.4-41-16.8c-2.1-1.2-4.5-1.8-6.8-1.8c-2.7,0-5.5,0.8-7.8,2.5l-35,24.9c-0.5,0.3-1,0.5-1.5,0.5c-0.4,0-1.2-0.1-1.9-0.8l-29.8-29.8c-0.9-0.9-1-2.3-0.3-3.4l24.6-34.5c3.1-4.4,3.3-10.2,0.6-14.8c-7.8-13-13.8-27.1-17.6-41.8c-1.4-5.1-5.6-9-10.8-9.9l-42.3-7.2c-1.3-0.2-2.2-1.3-2.2-2.6v-42.1c0-1.3,0.9-2.4,2.2-2.6l41.7-7c5.3-0.9,9.6-4.8,10.9-10c3.7-14.7,9.4-28.9,17.1-42c2.7-4.6,2.4-10.3-0.7-14.6l-24.9-35c-0.7-1-0.6-2.5,0.3-3.4l29.8-29.8c0.7-0.7,1.4-0.8,1.9-0.8c0.6,0,1.1,0.2,1.5,0.5l34.5,24.6c4.4,3.1,10.2,3.3,14.8,0.6c13-7.8,27.1-13.8,41.8-17.6c5.1-1.4,9-5.6,9.9-10.8l7.2-42.3c0.2-1.3,1.3-2.2,2.6-2.2h42.1c1.3,0,2.4,0.9,2.6,2.2l7,41.7c0.9,5.3,4.8,9.6,10,10.9c15.1,3.8,29.5,9.7,42.9,17.6c4.6,2.7,10.3,2.5,14.7-0.6l34.5-24.8c0.5-0.3,1-0.5,1.5-0.5c0.4,0,1.2,0.1,1.9,0.8l29.8,29.8c0.9,0.9,1,2.3,0.3,3.4l-24.7,34.7c-3.1,4.3-3.3,10.1-0.6,14.7c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z"/><path d="M239.4,136.001c-57,0-103.3,46.3-103.3,103.3s46.3,103.3,103.3,103.3s103.3-46.3,103.3-103.3S296.4,136.001,239.4,136.001z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z"/></a></li></ul></nav></div>
</header>
</svg>
<section class='side-box settings-menu'><div class='container'><div class='control-group'><span class='for_input'>Link Youtube:</span><input id='video_url' type='text'><div class='block'><button id='counter_update'>Update</button></div></div><div class='control-group'><span class='for_input'>Refreshing counters:</span><input id='refresh' max='10000' min='3000' step='100' type='range' value='4000'><div class='refresh_time range-text'>4000ms (4s)</div></div><div class='control-group'><span class='for_input'>Counters:</span><div class='block'><label class='control control--checkbox'><input checked='checked' id='toggle_likes' type='checkbox'>Like</input><div class='control__indicator'></div></label></div><div class='block'><label class='control control--checkbox'><input checked='checked' id='toggle_dislikes' type='checkbox'>Dislike</input><div class='control__indicator'></div></label></div><div class='block'><label class='control control--checkbox'><input checked='checked' id='toggle_viewsLive' type='checkbox'>Views / People live</input><div class='control__indicator'></div></label></div></div><div class='control-group'><label class='control control--radio'>Icons<input checked='checked' id='icons' name='radio' type='radio'><div class='control__indicator'></div></label><label class='control control--radio'>Text<input id='text' name='radio' type='radio'><div class='control__indicator'></div></label><label class='control control--radio'>None<input id='empty' name='radio' type='radio'><div class='control__indicator'></div></label></div><div class='control-group'><div class='block'><span class='for_input'>Font Size:</span><input id='font_size' max='50' min='20' step='1' type='range' value='25'><div class='font_size range-text'>25px</div></div><div class='block'><span class='for_input'>Font Color:</span><input class='jscolor' onchange='updatecolor(this.jscolor)' value='000000'></div></div><div class='control-group'><span class='for_input'>Settings:</span><div class='block'><label class='control control--checkbox'><input checked='checked' disabled='disabled' type='checkbox'>Animation</input><div class='control__indicator'></div></label></div><div class='block'><label class='control control--checkbox'><input id='handy_move' type='checkbox'>Manual position change</input><div class='control__indicator'></div></label></div></div></div>
</section>
<main><div class='centered'><div class='counter_container'><div class='counter'><div class='odometer' id='likes'>0</div></div><div class='icon'><img src='https://image.flaticon.com/icons/svg/159/159766.svg'></div><div class='text'>Likes</div></div><div class='counter_container'><div class='counter'><div class='odometer' id='dislikes'>0</div></div><div class='icon'><img src='https://image.flaticon.com/icons/svg/159/159775.svg'></div><div class='text'>Dislikes</div></div><div class='counter_container'><div class='counter'><div class='odometer' id='views_live'>0</div></div><div class='icon'><img src='https://image.flaticon.com/icons/svg/159/159833.svg'></div><div class='text'>Live</div></div></div>
</main><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://badurski.pl/scripts/odometer.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://badurski.pl/scripts/jscolor.js'></script><script src="js/index.js"></script></body></html>

This was our html code i recommend you to download all the files which are included in the above html code.
Without CSS our this script (Youtube Live Stats Counter Jquery App) will never look delicate. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.

So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Youtube Live Stats Counter Jquery App/css/style.css :

body{margin:0;overflow-x:hidden;background:rgba(0, 0, 0, 0)}ul{list-style:none;margin:0}.active{display:block !important;animation:entry 0.3s}@keyframes entry{0%{transform:translate(250px, 0px)}100%{transform:translate(0px, 0px)}}header .navigation{float:right}header nav ul li .settings svg:hover{transform:rotate(30deg)}header nav ul li .settings svg:active{transform:rotate(150deg)}header nav ul li .white_fill{fill:white}header nav ul li a{margin:25px;display:block;cursor:pointer;position:relative;z-index:1000}header nav ul li a svg{height:30px;width:30px;transition:0.3s}.active_panel{transform:translate(calc(-50% - 250px), -50%) !important}main .centered{position:fixed;top:calc(50% - 40px);left:50%;transform:translate(-50%, -50%);display:flex;transition:0.3s}main .centered .counter_container{margin:0px 30px;position:relative;top:0;left:0}main .centered .counter_container .counter .odometer{font-size:25px;font-family:"Quicksand", sans-serif}main .centered .counter_container .goal span{font-size:25px}main .centered .counter_container .icon{height:25px;position:absolute;left:50%;right:50%;margin:10px -12.5px}.side-box{position:absolute;top:0;right:0;width:280px;background:#c5c5c5;display:none;padding:5px 20px;color:black;font-family:"Roboto", sans-serif}.side-box .container{margin-top:75px;display:block}.side-box .control-group{background:white;padding:20px;color:black;width:240px;margin:0px 0px 15px;box-shadow:-4px 4px 10px -5px rgba(0, 0, 0, 0.35);height:initial}.side-box .control-group .for_input{font-size:12px;padding:0px 0px 15px;display:block}.side-box .control-group input[type="text"]{padding:6px 10px;width:calc(100% - 25px)}.side-box .block{margin:5px 0px}.side-box label{font-size:12px;padding:2px 35px;line-height:1.7}.side-box button{padding:10px;width:150px;border:0;background:#2aa1c0;color:white;box-shadow:-4px 4px 10px -5px rgba(0, 0, 0, 0.35);cursor:pointer;margin:15px 0px 0px}.dragME{cursor:move}input[type="range"]{width:200px;margin:8px auto;display:block}.range-{text-align:center;font-size:12px}.jscolor{width:180px;margin:0px auto;display:block;border:0;padding:6px 10px;border-radius:3px}.odometer-inside{display:flex}.text{display:none;position:absolute;left:50%;right:50%;margin:10px -25px;text-align:center;font-family:"Roboto", sans-serif}@media only screen and (max-width:400px){.counter_container{margin:0px 14px !important}.odometer{font-size:13px !important}}.control{display:block;position:relative;padding-left:30px;margin-bottom:15px;cursor:pointer;font-size:18px}.control input:checked ~ .control__indicator{background:#2aa1c0}.control__indicator{position:absolute;top:2px;left:0;height:20px;width:20px;background:#dcdcdc}.control input{position:absolute;z-index:-1;opacity:0}.control--radio .control__indicator{border-radius:50%}.control--radio .control__indicator:after{left:7px;top:7px;height:6px;width:6px;border-radius:50%;background:#fff}.control__indicator:after{content:"";position:absolute;display:none}.control--checkbox .control__indicator:after{left:8px;top:4px;width:3px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.control input:checked ~ .control__indicator:after{display:block}[type=checkbox], [type=radio]{box-sizing:border-box;padding:0}.control--checkbox input:disabled ~ .control__indicator:after{border-color:#7b7b7b}.control input:disabled ~ .control__indicator{background:#e6e6e6;opacity:0.6;pointer-events:none}
This was a simple style code of this youtube stats app.
So we have written HTML markup and customised it and now we will add some functionality in this project (Youtube Live Stats Counter Jquery App).

To make this project (Youtube Live Stats Counter Jquery App) work properly for that we will use JavaScript.

So here is a JavaScript code for our project (Youtube Live Stats Counter Jquery App) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.

The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Youtube Live Stats Counter Jquery App/js/index.js :

// Global variables
var video_id, live, refresh=4000;
// SideBar Settings
$("a.settings").click(function() {
$(".side-box").toggleClass("active");
$(".centered").toggleClass("active_panel");
});
//==============================================
var counter = {
initialize: function() {
counter.form();
counter.global.get_refresh();
setInterval(function() {
counter.update(video_id);
}, refresh);
},
options: {
yt_api: "https://www.googleapis.com/youtube/v3/videos",
yt_key: "AIzaSyAf586_KHJPsrPdxsamOZBqdVKfqT13aaw",
el_likes: "#likes",
el_dislikes: "#dislikes",
el_views_live: "#views_live"
},
update: function(video_id) {
counter.ajax.getLikesDislikesViews(video_id);
counter.ajax.getLive(video_id);
counter.ajax.get_title(video_id);
},
ajax: {
getLive: function(video_id) {
$.ajax({
url: "https://badurski.pl/live.php?url=" + video_id,
dataType: "text",
success: function(data) {
if (data == 0) {
live = 0;
} else {
// Live
live = 1;
$(counter.options.el_views_live).text(data);
console.log("Live:" + data);
}
}
});
},
getLikesDislikesViews: function(video_id) {
var df = {
key: counter.options.yt_key,
part: "statistics",
fields: "items(statistics)",
id: video_id
};
$.ajax({
type: "GET",
data: df,
url: counter.options.yt_api,
async: false,
success: function(response) {
var likes = response.items[0].statistics["likeCount"];
var dislikes = response.items[0].statistics["dislikeCount"];
var views = response.items[0].statistics["viewCount"];
$(counter.options.el_likes).text(likes);
$(counter.options.el_dislikes).text(dislikes);
setTimeout(function() {
if (live == 0) {
$(counter.options.el_views_live).text(views);
}
}, 1000);
console.log(
"Likes: " + likes + ", dislikes:" + dislikes + ", views:" + views
);
}
});
},
get_title: function(video_id) {
var df = {
key: counter.options.yt_key,
part: "snippet",
fields: "items(snippet(title))",
id: video_id
};
var title = $.ajax({
type: "GET",
data: df,
url: counter.options.yt_api,
async: false,
success: function(response) {
var title = response.items[0].snippet["title"];
console.log(title);
}
});
}
},
global: {
isValidURL: function(u) {
if (counter.global.get_hostname(u) == "https://youtu.be") {
return "short";
} else if (counter.global.get_hostname(u) == "https://www.youtube.com") {
return "original";
} else {
return "fail";
}
},
get_hostname: function(url) {
var m = url.match(/^https:\/\/[^/]+/);
return m ? m[0] : false;
},
get_refresh: function() {
var r = $("#refresh").val();
$("#refresh").on("input", function() {
var r = $("#refresh").val();
$(".refresh_time").text(r + "ms" + " (" + r.slice(0, -3) + "s)");
refresh = r;
});
return r;
}
},
form: function() {
var update_btn = $("#counter_update"),
input_url = $("#video_url"),
cc = $(".counter_container");
$("#counter_update").click(function() {
var vurl = input_url.val();
if (counter.global.isValidURL(vurl) == "short") {
var id = vurl.split(".be/")[1];
var id = id.split("?")[0];
video_id = id;
console.log("Short:" + id);
} else if (counter.global.isValidURL(vurl) == "original") {
var id = vurl.split("?v=")[1];
var id = id.split("&")[0];
video_id = id;
console.log("Original:" + id);
} else if (counter.global.isValidURL(vurl) == "fail") {
alert("Wkleiłeś zły link do filmiku!");
}
});
$(".jscolor").on("input", function() {
var c = $(".jscolor").val();
$(".odometer").css("color","#"+c);
});
$("#font_size").on("input", function() {
var fs = $("#font_size").val();
$(".font_size").text(fs+"px");
$(".odometer").css("font-size",fs+"px")
});
$("#toggle_likes").change(function() {
$("#likes").closest(".counter_container").toggle();
});
$("#icons").on( "click", function() {
$(".icon").show();
$(".text").hide();
});
$("#text").on( "click", function() {
$(".text").show();
$(".icon").hide();
});
$("#empty").on( "click", function() {
$(".text").hide();
$(".icon").hide();
});
$("#toggle_dislikes").change(function() {
$("#dislikes").closest(".counter_container").toggle();
});
$("#toggle_viewsLive").change(function() {
$("#views_live").closest(".counter_container").toggle();
});
$("#handy_move").change(function() {
cc.attr("class", "counter_container");
if ($("#handy_move").is(":checked")) {
cc.addClass("dragME");
$(".dragME").draggable();
$(".dragME").draggable("enable");
} else {
cc.removeClass("dragME");
cc.attr("style", "");
cc.draggable("disable");
}
});
}
};
counter.initialize();
// COLOR UPDATE
function updatecolor(jscolor) {
$(".odometer").css("color","#"+jscolor);
}
In the jquery code above i've used youtube api you can replace it with your's if you want.

Outcome :

So here we are, We have done and our project Youtube Live Stats Counter Jquery App is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.


  • Youtube Live Stats Counter Jquery App
    • css
      • style.css
    • js
      • index.js
    • index.html

Download Project (Youtube Live Stats Counter Jquery App) File :

Youtube Live Stats Counter Jquery App.zip
File Size 10.36 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below and keep visiting this site for more open source tools.
Thank you !
Youtube Live Stats Counter Jquery App - Open Source Tool

Youtube Live Stats Counter Jquery App - Open Source Tool

Youtube Live Stats Counter Jquery App - Open Source Tool

Today i will share YouTube live stats counter jQuery app with you which will show up realtime youtube stats of any youtube video. This tool uses jquery and youtube api to fetch results.

Good day designers today we are going to design Youtube Live Stats Counter Jquery App

As you know the HTML markup is needed for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below your can download them if you want:https://badurski.pl/files/odometer-theme-default.css
https://image.flaticon.com/icons/svg/159/159766.svg
https://image.flaticon.com/icons/svg/159/159775.svg
https://image.flaticon.com/icons/svg/159/159833.svg
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://badurski.pl/scripts/odometer.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
https://badurski.pl/scripts/jscolor.js

Save It As Youtube Live Stats Counter Jquery App/index.html :

<!DOCTYPE html>
<html lang="en" ><head><meta charset="UTF-8"><title>Youtube Live Stats Counter - jquery app</title><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Quicksand:700|Roboto'>
<link rel='stylesheet' href='https://badurski.pl/files/odometer-theme-default.css'><link rel="stylesheet" href="css/style.css"></head><body><header><div class='navigation'><nav><ul><li><a class='settings'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 478.703 478.703"><path d="M454.2,189.101l-33.6-5.7c-3.5-11.3-8-22.2-13.5-32.6l19.8-27.7c8.4-11.8,7.1-27.9-3.2-38.1l-29.8-29.8c-5.6-5.6-13-8.7-20.9-8.7c-6.2,0-12.1,1.9-17.1,5.5l-27.8,19.8c-10.8-5.7-22.1-10.4-33.8-13.9l-5.6-33.2c-2.4-14.3-14.7-24.7-29.2-24.7h-42.1c-14.5,0-26.8,10.4-29.2,24.7l-5.8,34c-11.2,3.5-22.1,8.1-32.5,13.7l-27.5-19.8c-5-3.6-11-5.5-17.2-5.5c-7.9,0-15.4,3.1-20.9,8.7l-29.9,29.8c-10.2,10.2-11.6,26.3-3.2,38.1l20,28.1c-5.5,10.5-9.9,21.4-13.3,32.7l-33.2,5.6c-14.3,2.4-24.7,14.7-24.7,29.2v42.1c0,14.5,10.4,26.8,24.7,29.2l34,5.8c3.5,11.2,8.1,22.1,13.7,32.5l-19.7,27.4c-8.4,11.8-7.1,27.9,3.2,38.1l29.8,29.8c5.6,5.6,13,8.7,20.9,8.7c6.2,0,12.1-1.9,17.1-5.5l28.1-20c10.1,5.3,20.7,9.6,31.6,13l5.6,33.6c2.4,14.3,14.7,24.7,29.2,24.7h42.2c14.5,0,26.8-10.4,29.2-24.7l5.7-33.6c11.3-3.5,22.2-8,32.6-13.5l27.7,19.8c5,3.6,11,5.5,17.2,5.5l0,0c7.9,0,15.3-3.1,20.9-8.7l29.8-29.8c10.2-10.2,11.6-26.3,3.2-38.1l-19.8-27.8c5.5-10.5,10.1-21.4,13.5-32.6l33.6-5.6c14.3-2.4,24.7-14.7,24.7-29.2v-42.1C478.9,203.801,468.5,191.501,454.2,189.101z M451.9,260.401c0,1.3-0.9,2.4-2.2,2.6l-42,7c-5.3,0.9-9.5,4.8-10.8,9.9c-3.8,14.7-9.6,28.8-17.4,41.9c-2.7,4.6-2.5,10.3,0.6,14.7l24.7,34.8c0.7,1,0.6,2.5-0.3,3.4l-29.8,29.8c-0.7,0.7-1.4,0.8-1.9,0.8c-0.6,0-1.1-0.2-1.5-0.5l-34.7-24.7c-4.3-3.1-10.1-3.3-14.7-0.6c-13.1,7.8-27.2,13.6-41.9,17.4c-5.2,1.3-9.1,5.6-9.9,10.8l-7.1,42c-0.2,1.3-1.3,2.2-2.6,2.2h-42.1c-1.3,0-2.4-0.9-2.6-2.2l-7-42c-0.9-5.3-4.8-9.5-9.9-10.8c-14.3-3.7-28.1-9.4-41-16.8c-2.1-1.2-4.5-1.8-6.8-1.8c-2.7,0-5.5,0.8-7.8,2.5l-35,24.9c-0.5,0.3-1,0.5-1.5,0.5c-0.4,0-1.2-0.1-1.9-0.8l-29.8-29.8c-0.9-0.9-1-2.3-0.3-3.4l24.6-34.5c3.1-4.4,3.3-10.2,0.6-14.8c-7.8-13-13.8-27.1-17.6-41.8c-1.4-5.1-5.6-9-10.8-9.9l-42.3-7.2c-1.3-0.2-2.2-1.3-2.2-2.6v-42.1c0-1.3,0.9-2.4,2.2-2.6l41.7-7c5.3-0.9,9.6-4.8,10.9-10c3.7-14.7,9.4-28.9,17.1-42c2.7-4.6,2.4-10.3-0.7-14.6l-24.9-35c-0.7-1-0.6-2.5,0.3-3.4l29.8-29.8c0.7-0.7,1.4-0.8,1.9-0.8c0.6,0,1.1,0.2,1.5,0.5l34.5,24.6c4.4,3.1,10.2,3.3,14.8,0.6c13-7.8,27.1-13.8,41.8-17.6c5.1-1.4,9-5.6,9.9-10.8l7.2-42.3c0.2-1.3,1.3-2.2,2.6-2.2h42.1c1.3,0,2.4,0.9,2.6,2.2l7,41.7c0.9,5.3,4.8,9.6,10,10.9c15.1,3.8,29.5,9.7,42.9,17.6c4.6,2.7,10.3,2.5,14.7-0.6l34.5-24.8c0.5-0.3,1-0.5,1.5-0.5c0.4,0,1.2,0.1,1.9,0.8l29.8,29.8c0.9,0.9,1,2.3,0.3,3.4l-24.7,34.7c-3.1,4.3-3.3,10.1-0.6,14.7c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z"/><path d="M239.4,136.001c-57,0-103.3,46.3-103.3,103.3s46.3,103.3,103.3,103.3s103.3-46.3,103.3-103.3S296.4,136.001,239.4,136.001z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z"/></a></li></ul></nav></div>
</header>
</svg>
<section class='side-box settings-menu'><div class='container'><div class='control-group'><span class='for_input'>Link Youtube:</span><input id='video_url' type='text'><div class='block'><button id='counter_update'>Update</button></div></div><div class='control-group'><span class='for_input'>Refreshing counters:</span><input id='refresh' max='10000' min='3000' step='100' type='range' value='4000'><div class='refresh_time range-text'>4000ms (4s)</div></div><div class='control-group'><span class='for_input'>Counters:</span><div class='block'><label class='control control--checkbox'><input checked='checked' id='toggle_likes' type='checkbox'>Like</input><div class='control__indicator'></div></label></div><div class='block'><label class='control control--checkbox'><input checked='checked' id='toggle_dislikes' type='checkbox'>Dislike</input><div class='control__indicator'></div></label></div><div class='block'><label class='control control--checkbox'><input checked='checked' id='toggle_viewsLive' type='checkbox'>Views / People live</input><div class='control__indicator'></div></label></div></div><div class='control-group'><label class='control control--radio'>Icons<input checked='checked' id='icons' name='radio' type='radio'><div class='control__indicator'></div></label><label class='control control--radio'>Text<input id='text' name='radio' type='radio'><div class='control__indicator'></div></label><label class='control control--radio'>None<input id='empty' name='radio' type='radio'><div class='control__indicator'></div></label></div><div class='control-group'><div class='block'><span class='for_input'>Font Size:</span><input id='font_size' max='50' min='20' step='1' type='range' value='25'><div class='font_size range-text'>25px</div></div><div class='block'><span class='for_input'>Font Color:</span><input class='jscolor' onchange='updatecolor(this.jscolor)' value='000000'></div></div><div class='control-group'><span class='for_input'>Settings:</span><div class='block'><label class='control control--checkbox'><input checked='checked' disabled='disabled' type='checkbox'>Animation</input><div class='control__indicator'></div></label></div><div class='block'><label class='control control--checkbox'><input id='handy_move' type='checkbox'>Manual position change</input><div class='control__indicator'></div></label></div></div></div>
</section>
<main><div class='centered'><div class='counter_container'><div class='counter'><div class='odometer' id='likes'>0</div></div><div class='icon'><img src='https://image.flaticon.com/icons/svg/159/159766.svg'></div><div class='text'>Likes</div></div><div class='counter_container'><div class='counter'><div class='odometer' id='dislikes'>0</div></div><div class='icon'><img src='https://image.flaticon.com/icons/svg/159/159775.svg'></div><div class='text'>Dislikes</div></div><div class='counter_container'><div class='counter'><div class='odometer' id='views_live'>0</div></div><div class='icon'><img src='https://image.flaticon.com/icons/svg/159/159833.svg'></div><div class='text'>Live</div></div></div>
</main><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://badurski.pl/scripts/odometer.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://badurski.pl/scripts/jscolor.js'></script><script src="js/index.js"></script></body></html>

This was our html code i recommend you to download all the files which are included in the above html code.
Without CSS our this script (Youtube Live Stats Counter Jquery App) will never look delicate. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.

So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Youtube Live Stats Counter Jquery App/css/style.css :

body{margin:0;overflow-x:hidden;background:rgba(0, 0, 0, 0)}ul{list-style:none;margin:0}.active{display:block !important;animation:entry 0.3s}@keyframes entry{0%{transform:translate(250px, 0px)}100%{transform:translate(0px, 0px)}}header .navigation{float:right}header nav ul li .settings svg:hover{transform:rotate(30deg)}header nav ul li .settings svg:active{transform:rotate(150deg)}header nav ul li .white_fill{fill:white}header nav ul li a{margin:25px;display:block;cursor:pointer;position:relative;z-index:1000}header nav ul li a svg{height:30px;width:30px;transition:0.3s}.active_panel{transform:translate(calc(-50% - 250px), -50%) !important}main .centered{position:fixed;top:calc(50% - 40px);left:50%;transform:translate(-50%, -50%);display:flex;transition:0.3s}main .centered .counter_container{margin:0px 30px;position:relative;top:0;left:0}main .centered .counter_container .counter .odometer{font-size:25px;font-family:"Quicksand", sans-serif}main .centered .counter_container .goal span{font-size:25px}main .centered .counter_container .icon{height:25px;position:absolute;left:50%;right:50%;margin:10px -12.5px}.side-box{position:absolute;top:0;right:0;width:280px;background:#c5c5c5;display:none;padding:5px 20px;color:black;font-family:"Roboto", sans-serif}.side-box .container{margin-top:75px;display:block}.side-box .control-group{background:white;padding:20px;color:black;width:240px;margin:0px 0px 15px;box-shadow:-4px 4px 10px -5px rgba(0, 0, 0, 0.35);height:initial}.side-box .control-group .for_input{font-size:12px;padding:0px 0px 15px;display:block}.side-box .control-group input[type="text"]{padding:6px 10px;width:calc(100% - 25px)}.side-box .block{margin:5px 0px}.side-box label{font-size:12px;padding:2px 35px;line-height:1.7}.side-box button{padding:10px;width:150px;border:0;background:#2aa1c0;color:white;box-shadow:-4px 4px 10px -5px rgba(0, 0, 0, 0.35);cursor:pointer;margin:15px 0px 0px}.dragME{cursor:move}input[type="range"]{width:200px;margin:8px auto;display:block}.range-{text-align:center;font-size:12px}.jscolor{width:180px;margin:0px auto;display:block;border:0;padding:6px 10px;border-radius:3px}.odometer-inside{display:flex}.text{display:none;position:absolute;left:50%;right:50%;margin:10px -25px;text-align:center;font-family:"Roboto", sans-serif}@media only screen and (max-width:400px){.counter_container{margin:0px 14px !important}.odometer{font-size:13px !important}}.control{display:block;position:relative;padding-left:30px;margin-bottom:15px;cursor:pointer;font-size:18px}.control input:checked ~ .control__indicator{background:#2aa1c0}.control__indicator{position:absolute;top:2px;left:0;height:20px;width:20px;background:#dcdcdc}.control input{position:absolute;z-index:-1;opacity:0}.control--radio .control__indicator{border-radius:50%}.control--radio .control__indicator:after{left:7px;top:7px;height:6px;width:6px;border-radius:50%;background:#fff}.control__indicator:after{content:"";position:absolute;display:none}.control--checkbox .control__indicator:after{left:8px;top:4px;width:3px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.control input:checked ~ .control__indicator:after{display:block}[type=checkbox], [type=radio]{box-sizing:border-box;padding:0}.control--checkbox input:disabled ~ .control__indicator:after{border-color:#7b7b7b}.control input:disabled ~ .control__indicator{background:#e6e6e6;opacity:0.6;pointer-events:none}
This was a simple style code of this youtube stats app.
So we have written HTML markup and customised it and now we will add some functionality in this project (Youtube Live Stats Counter Jquery App).

To make this project (Youtube Live Stats Counter Jquery App) work properly for that we will use JavaScript.

So here is a JavaScript code for our project (Youtube Live Stats Counter Jquery App) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.

The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Youtube Live Stats Counter Jquery App/js/index.js :

// Global variables
var video_id, live, refresh=4000;
// SideBar Settings
$("a.settings").click(function() {
$(".side-box").toggleClass("active");
$(".centered").toggleClass("active_panel");
});
//==============================================
var counter = {
initialize: function() {
counter.form();
counter.global.get_refresh();
setInterval(function() {
counter.update(video_id);
}, refresh);
},
options: {
yt_api: "https://www.googleapis.com/youtube/v3/videos",
yt_key: "AIzaSyAf586_KHJPsrPdxsamOZBqdVKfqT13aaw",
el_likes: "#likes",
el_dislikes: "#dislikes",
el_views_live: "#views_live"
},
update: function(video_id) {
counter.ajax.getLikesDislikesViews(video_id);
counter.ajax.getLive(video_id);
counter.ajax.get_title(video_id);
},
ajax: {
getLive: function(video_id) {
$.ajax({
url: "https://badurski.pl/live.php?url=" + video_id,
dataType: "text",
success: function(data) {
if (data == 0) {
live = 0;
} else {
// Live
live = 1;
$(counter.options.el_views_live).text(data);
console.log("Live:" + data);
}
}
});
},
getLikesDislikesViews: function(video_id) {
var df = {
key: counter.options.yt_key,
part: "statistics",
fields: "items(statistics)",
id: video_id
};
$.ajax({
type: "GET",
data: df,
url: counter.options.yt_api,
async: false,
success: function(response) {
var likes = response.items[0].statistics["likeCount"];
var dislikes = response.items[0].statistics["dislikeCount"];
var views = response.items[0].statistics["viewCount"];
$(counter.options.el_likes).text(likes);
$(counter.options.el_dislikes).text(dislikes);
setTimeout(function() {
if (live == 0) {
$(counter.options.el_views_live).text(views);
}
}, 1000);
console.log(
"Likes: " + likes + ", dislikes:" + dislikes + ", views:" + views
);
}
});
},
get_title: function(video_id) {
var df = {
key: counter.options.yt_key,
part: "snippet",
fields: "items(snippet(title))",
id: video_id
};
var title = $.ajax({
type: "GET",
data: df,
url: counter.options.yt_api,
async: false,
success: function(response) {
var title = response.items[0].snippet["title"];
console.log(title);
}
});
}
},
global: {
isValidURL: function(u) {
if (counter.global.get_hostname(u) == "https://youtu.be") {
return "short";
} else if (counter.global.get_hostname(u) == "https://www.youtube.com") {
return "original";
} else {
return "fail";
}
},
get_hostname: function(url) {
var m = url.match(/^https:\/\/[^/]+/);
return m ? m[0] : false;
},
get_refresh: function() {
var r = $("#refresh").val();
$("#refresh").on("input", function() {
var r = $("#refresh").val();
$(".refresh_time").text(r + "ms" + " (" + r.slice(0, -3) + "s)");
refresh = r;
});
return r;
}
},
form: function() {
var update_btn = $("#counter_update"),
input_url = $("#video_url"),
cc = $(".counter_container");
$("#counter_update").click(function() {
var vurl = input_url.val();
if (counter.global.isValidURL(vurl) == "short") {
var id = vurl.split(".be/")[1];
var id = id.split("?")[0];
video_id = id;
console.log("Short:" + id);
} else if (counter.global.isValidURL(vurl) == "original") {
var id = vurl.split("?v=")[1];
var id = id.split("&")[0];
video_id = id;
console.log("Original:" + id);
} else if (counter.global.isValidURL(vurl) == "fail") {
alert("Wkleiłeś zły link do filmiku!");
}
});
$(".jscolor").on("input", function() {
var c = $(".jscolor").val();
$(".odometer").css("color","#"+c);
});
$("#font_size").on("input", function() {
var fs = $("#font_size").val();
$(".font_size").text(fs+"px");
$(".odometer").css("font-size",fs+"px")
});
$("#toggle_likes").change(function() {
$("#likes").closest(".counter_container").toggle();
});
$("#icons").on( "click", function() {
$(".icon").show();
$(".text").hide();
});
$("#text").on( "click", function() {
$(".text").show();
$(".icon").hide();
});
$("#empty").on( "click", function() {
$(".text").hide();
$(".icon").hide();
});
$("#toggle_dislikes").change(function() {
$("#dislikes").closest(".counter_container").toggle();
});
$("#toggle_viewsLive").change(function() {
$("#views_live").closest(".counter_container").toggle();
});
$("#handy_move").change(function() {
cc.attr("class", "counter_container");
if ($("#handy_move").is(":checked")) {
cc.addClass("dragME");
$(".dragME").draggable();
$(".dragME").draggable("enable");
} else {
cc.removeClass("dragME");
cc.attr("style", "");
cc.draggable("disable");
}
});
}
};
counter.initialize();
// COLOR UPDATE
function updatecolor(jscolor) {
$(".odometer").css("color","#"+jscolor);
}
In the jquery code above i've used youtube api you can replace it with your's if you want.

Outcome :

So here we are, We have done and our project Youtube Live Stats Counter Jquery App is ready now you can save all the files as provided.
Like CSS files in css folder and JavaScript files in a JS folder name. Below is folder tree of the files and folders of this project.


  • Youtube Live Stats Counter Jquery App
    • css
      • style.css
    • js
      • index.js
    • index.html

Download Project (Youtube Live Stats Counter Jquery App) File :

Youtube Live Stats Counter Jquery App.zip
File Size 10.36 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below and keep visiting this site for more open source tools.
Thank you !

Related Posts

Disqus Codes

No comments

Subscribe Our Newsletter

Notifications

Disqus Logo