MasterofJOKers/gamers4refugees.js

## gamers4refugees.js
var donations = 0,
    lastCheck = 0,
    lastSumDonated = 0,
    lastSumGoal = 0,
    sumShowing = true,
    sound = new Audio("AlertSound.ogg"),
    project_id = 24307;

function checkForNew(){
    $.getJSON("https://api.betterplace.org/de/api_v4/fundraising_events/"+project_id+"/opinions.json?order=created_at:DESC&facets=has_donation:true&per_page=1", function(data){
        donations = data.total_entries;

        if(donations > lastCheck && lastCheck!=0){
            sound.play();
            var d = data.data[0];
            if (d.author === null || typeof d.author =="undefined"){
                donator = "Anonymer Spender";
            }
            else {
                donator = d.author.name;
            }
            $("#new-follower").html(donator + " (" + d.donated_amount_in_cents/100.0 + "€)");
            $("#new-follower").fadeIn("slow");
            setTimeout(function(){
                $("#new-follower").fadeOut("slow");
            }, 10000);
        }

        // always update sum of donations on changes
        if(donations > lastCheck){
            $("#gamers").fadeOut("slow");
            $.getJSON("https://api.betterplace.org/de/api_v4/fundraising_events/"+project_id+".json", function(data){
                lastSumDonated = data.donated_amount_in_cents/100.0;
                lastSumGoal = data.requested_amount_in_cents/100.0;
                $("#donation-sum").html(lastSumDonated+"€<br />Ziel: "+lastSumGoal+"€");
                sumShowing = true;
                $("#donation-sum").fadeIn("slow");
            });
        }
        // otherwise toggle between #gamersforrefugees and sum
        else {
            if (sumShowing === true){
                $("#donation-sum").fadeOut("slow");
                $("#gamers").fadeIn("slow");
            }
            else {
                $("#gamers").fadeOut("slow");
                $("#donation-sum").fadeIn("slow");
            }
            sumShowing = !sumShowing;
        }

        lastCheck = donations;
    }).fail(function(){
        console.log('An error occurred!');
    });
}

setInterval(checkForNew, 5000);

## index.html
<html>
<head>
    <meta charset="utf-8">
    <title>Follower Alert</title>
    <style>
      body {
        background-color: transparent;
        color: white;
      }

      #follower-alert {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 580px;
        height: 110px;
        background-repeat: no-repeat;
      }

      #follower-alert .text {
        display: none;
        margin-left: 140px;
        padding-top: 45px;
        text-align: left;
        width: 385px;
        line-height: 45px;
        vertical-align: middle;
        font-size: 45px;
        font-family: Impact;
        text-shadow: 2px 2px 1px #000;
        white-space: nowrap;
        color: #ffffff;
      }
      #donation-sum {
        display: none;
        position: absolute;
        height: 50px;
        width: 130px;
        top: 110px;
        left: 0;
        text-align: center;
        font-family: Impact;
        text-shadow: 2px 2px 1px #000;
        color: #fff;
      }
      #gamers {
        position: absolute;
        height: 50px;
        width: 120px;
        top: 110px;
        left: 0;
        text-align: center;
        font-family: Impact;
        text-shadow: 2px 2px 1px #000;
        color: #fff;
      }
    </style>
  <style type="text/css"></style></head>
<body>
<div id="follower-alert" style="background-image: url(template.png);">
 <div class="text" id="new-follower"></div>
</div>
<div id="gamers">#gamers4refugees</div>
<div id="donation-sum"></div>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="gamers4refugees.js"></script>
</body>
</html>

## template.png

      
    Raw
  

              template.png
	var donations = 0,
	lastCheck = 0,
	lastSumDonated = 0,
	lastSumGoal = 0,
	sumShowing = true,
	sound = new Audio("AlertSound.ogg"),
	project_id = 24307;

	function checkForNew(){
	$.getJSON("https://api.betterplace.org/de/api_v4/fundraising_events/"+project_id+"/opinions.json?order=created_at:DESC&facets=has_donation:true&per_page=1", function(data){
	donations = data.total_entries;

	if(donations > lastCheck && lastCheck!=0){
	sound.play();
	var d = data.data[0];
	if (d.author === null \|\| typeof d.author =="undefined"){
	donator = "Anonymer Spender";
	}
	else {
	donator = d.author.name;
	}
	$("#new-follower").html(donator + " (" + d.donated_amount_in_cents/100.0 + "€)");
	$("#new-follower").fadeIn("slow");
	setTimeout(function(){
	$("#new-follower").fadeOut("slow");
	}, 10000);
	}

	// always update sum of donations on changes
	if(donations > lastCheck){
	$("#gamers").fadeOut("slow");
	$.getJSON("https://api.betterplace.org/de/api_v4/fundraising_events/"+project_id+".json", function(data){
	lastSumDonated = data.donated_amount_in_cents/100.0;
	lastSumGoal = data.requested_amount_in_cents/100.0;
	$("#donation-sum").html(lastSumDonated+"€<br />Ziel: "+lastSumGoal+"€");
	sumShowing = true;
	$("#donation-sum").fadeIn("slow");
	});
	}
	// otherwise toggle between #gamersforrefugees and sum
	else {
	if (sumShowing === true){
	$("#donation-sum").fadeOut("slow");
	$("#gamers").fadeIn("slow");
	}
	else {
	$("#gamers").fadeOut("slow");
	$("#donation-sum").fadeIn("slow");
	}
	sumShowing = !sumShowing;
	}

	lastCheck = donations;
	}).fail(function(){
	console.log('An error occurred!');
	});
	}

	setInterval(checkForNew, 5000);
	<html>
	<head>
	<meta charset="utf-8">
	<title>Follower Alert</title>
	<style>
	body {
	background-color: transparent;
	color: white;
	}

	#follower-alert {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 580px;
	height: 110px;
	background-repeat: no-repeat;
	}

	#follower-alert .text {
	display: none;
	margin-left: 140px;
	padding-top: 45px;
	text-align: left;
	width: 385px;
	line-height: 45px;
	vertical-align: middle;
	font-size: 45px;
	font-family: Impact;
	text-shadow: 2px 2px 1px #000;
	white-space: nowrap;
	color: #ffffff;
	}
	#donation-sum {
	display: none;
	position: absolute;
	height: 50px;
	width: 130px;
	top: 110px;
	left: 0;
	text-align: center;
	font-family: Impact;
	text-shadow: 2px 2px 1px #000;
	color: #fff;
	}
	#gamers {
	position: absolute;
	height: 50px;
	width: 120px;
	top: 110px;
	left: 0;
	text-align: center;
	font-family: Impact;
	text-shadow: 2px 2px 1px #000;
	color: #fff;
	}
	</style>
	<style type="text/css"></style></head>
	<body>
	<div id="follower-alert" style="background-image: url(template.png);">
	<div class="text" id="new-follower"></div>
	</div>
	<div id="gamers">#gamers4refugees</div>
	<div id="donation-sum"></div>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="gamers4refugees.js"></script>
	</body>
	</html>