Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 7, 2016 17:40
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save anonymous/3d7ff28877de7c7d47d0b55b30fc509b to your computer and use it in GitHub Desktop.
Save anonymous/3d7ff28877de7c7d47d0b55b30fc509b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elections 2016</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
#wrap{
position: relative;
margin: 0px auto;
width: 1280px;
height: 720px;
}
.cover{
padding: 20px 80px;
position: absolute;
width: 1280px;
height: 720px;
top: 0;
left: 0;
z-index: 10;
}
h1{
font-size: 42px;
text-transform: uppercase;
text-align: center;
color: #fff;
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 0 0 25px 0;
}
.blur{
background-color: gray;
opacity: .8;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.title{
background: url('title-bg.png') top left no-repeat;
}
.avatar img{
display: block;
border-radius: 50%;
width: 350px;
height: 350px;
margin: 0 auto;
}
.hilary, .trump{
display: inline-block;
width: 45%;
background: url(blur.png) top left no-repeat;
padding: 15px 0;
}
.trump{
margin-left: 9%;
}
.meta img{
display: block;
width: 60px;
height: 60px;
margin: 20px auto;
}
.votes{
text-align: center;
color: #fff;
font-weight: 30px;
display: block;
width: 100%;
}
.ct, .ch{
width: 100%;
display: block;
color: #fff;
font-size: 40px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.v{
text-align: center;
font-weight: bold;
font-size: 16px;
text-align: center;
margin-top: 10px;
font-family: Verdana, Geneva, sans-serif;
color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<div class="cover">
<div class="title">
<h1>who will win the us <br> presidential elections 2016?</h1>
</div>
<div>
<div class="hilary">
<div class="avatar">
<img src="hillary.jpg" alt="">
</div>
<div class="meta">
<img src="tup.png" alt="" class="icon">
<div class="ch">411251</div>
<div class="v">VOTES</div>
</div>
</div>
<div class="trump">
<div class="avatar">
<img src="trump.jpg" alt="">
</div>
<div class="meta">
<img src="h.png" alt="" class="icon">
<div class="ct">398221</div>
<div class="v">VOTES</div>
</div>
</div>
</div>
</div>
<video src="loop.mp4" autoplay="true" loop="true"></video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.6/lodash.min.js"></script>
<script>
"use strict";
var tc = 251,
hc = 221,
th = $('.ct'),
hh = $('.ch');
var hint,
tint;
function hilary(){
hint = setInterval(function(){
hc += 1;
// console.log(hc);
hh.text(hc);
clearInterval(hint);
hilary();
}, _.random(1, 15) * 1000);
}
function trump(){
tint = setInterval(function(){
// console.log(tc);
tc += 1;
th.text(hc);
clearInterval(tint);
trump();
}, _.random(1, 15) * 1000);
}
// trump();
// hilary();
setInterval(function(){
$.getJSON('https://graph.facebook.com/v2.8/?ids={post_id_goes_here}&fields=reactions.type(LIKE).limit(0).summary(total_count).as(reactions_like),reactions.type(LOVE).limit(0).summary(total_count).as(reactions_love)&access_token={application_access_token_goes_here},function(res){
th.text(9251 + res['{post_id_goes_here}'].reactions_love.summary.total_count);
hh.text(9221 + res['{post_id_goes_here}'].reactions_like.summary.total_count);
setInterval(function(){
th.text(parseInt(th.text()) + 1);
}, _.random(5, 25) * 1000);
setInterval(function(){
hh.text(parseInt(hh.text()) + 1);
}, _.random(5, 25) * 1000);
console.log(res);
});
}, 10000);
</script>
</body>
</html>
@xnidyas
Copy link

xnidyas commented Nov 15, 2016 •
edited

`setInterval(function(){

$.getJSON('https://graph.facebook.com/v2.8/?ids=1077853353741_11517858190342&fields=reactions.type(LIKE).limit(0).summary(total_count).as(reactions_like),reactions.type(LOVE).limit(0).summary(total_count).as(reactions_love)&access_token=EAACEdEose0cBAEDTXqSHp7HABlXD1THWjaMkrBAOZALVhbckZBwVJ6sWssfJxWY2ZB1K3h0CMkh6SHKpVdRGELPIWG2L6uttDC773llK0JClvoUmx2p7d3VAzUlUbvLcwjiKzvRH26yuuD5BoZBp0qnZCWWCL1ZA8DZCFvjqs4tnAZDZD',function(res){
	
	th.text(0 + res['107785335923741_1151785888190342'].reactions_love.summary.total_count);

	hh.text(0 + res['10778533923741_115175888190342'].reactions_like.summary.total_count);

	setInterval(function(){

		th.text(parseInt(th.text()) + 0);

	}, _.random(5, 25) * 1000);

	setInterval(function(){

		hh.text(parseInt(hh.text()) + 0);

	}, _.random(5, 25) * 1000);		

	console.log(res);
});

}, 10000);`

THIS HERE FOR ME Counts Real Votes. = Hopefully it helps someone.

@tommydo1905
Copy link

Thanks @Gamakool and @xnidyas supported me.Now I can do it :))

@yonatanlebo
Copy link

Can someone please post a full code that was tested and it works?

@jengithub3104
Copy link

jengithub3104 commented Nov 15, 2016 •
edited

@tommydo1905 @Gamakool

Can share your working script here ?
Sorry for asking this

@jengithub3104
Copy link

Ok I got these messsages:

"reactions_like": {
"data": [

     ],
     "summary": {
        "total_count": 0
     }
  },
  "reactions_love": {
     "data": [
        
     ],
     "summary": {
        "total_count": 1
     }
  },

But the number of votes didn'y appear on the screen.

Can someone help me to fix this

@IbrahimTchee
Copy link

to change the reactions is it enough just to change these lines ?
because i wanna transform the LIKE reaction into ANGRY reaction so is it enough just to change LIKE into ANGRY ?
th.text(9251 + res[‘{post_id_goes_here}’].reactions_love.summary.total_count);
hh.text(9221 + res[‘{post_id_goes_here}’].reactions_like.summary.total_count);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment