woohoo
Version:
Celebration as a Service
70 lines (59 loc) • 2.26 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WooHoo -- Celebration as a Service</title>
<link href="https://nodeshop.nl/design.css" rel="stylesheet">
<link href="https://nodeshop.nl/css/base.min.css" rel="stylesheet">
</head>
<body>
<section class="accent spread">
<article class="container">
<h2>Celebration as a Service</h2>
<h3>Finished an exercise?</h3>
<p>It's time for a celebration! Be proud of our achievement and press the button!</p>
<p>
Prefer CLI applications over a web-ui? Why not install our CLI client?
Simply run <strong>npm install -g woohoo</strong> and everytime you're in
the need of a small celebration just type <strong>woohoo</strong> and our
service will do the rest.
</p>
<button class="button" id="wohoo">Woohoo!</button>
</article>
</section>
<section>
<article class="container">
<h2>So far we've celebrated the completion of <span id="count">%count%</span> excersises</h2>
</article>
</section>
<section class="spread primary">
<div class="container">
<a href="https://nodeshop.nl">
<img src="https://nodeshop.nl/image/nodeshop.png" alt="Nodeshop.nl" width="100" />
</a>
</div>
<section>
<audio id="woohoo" src="/woohoo/wav/woohoo.wav"></audio>
<audio id="can-do" src="/woohoo/wav/can-do.wav"></audio>
<audio id="nooo" src="/woohoo/wav/nooo.wav"></audio>
<audio id="hacking" src="/woohoo/wav/hacking.wav"></audio>
<audio id="start" src="/woohoo/wav/start.wav"></audio>
<audio id="starting" src="/woohoo/wav/starting.wav"></audio>
<audio id="trusting" src="/woohoo/wav/trusting.wav"></audio>
<script src="/primus/primus.js"></script>
<script type="text/javascript">
var primus = Primus.connect('/')
, link = document.getElementById('wohoo')
, count = document.getElementById('count');
link.addEventListener('click', function select(e) {
e.preventDefault();
primus.write({ play: 'woohoo' });
});
primus.on('data', function received(data) {
if (!data || !data.count) return;
count.innerHTML = data.count;
document.getElementById(data.play).play();
});
</script>
</body>
</html>