Created
November 7, 2016 17:40
-
-
Save anonymous/3d7ff28877de7c7d47d0b55b30fc509b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Can share your working script here ?
Sorry for asking this
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
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
Can someone please post a full code that was tested and it works?