Skip to content

Instantly share code, notes, and snippets.

@lackac

lackac/munchkin_counter.html

Created July 31, 2010 23:10
Show Gist options
  • Save lackac/502723 to your computer and use it in GitHub Desktop.
Save lackac/502723 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
munchkin_counter.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>(Really Stupid) Munchkin Counter</title>
<style type="text/css" media="screen">
body {
font-family: Helvetica;
}
.counter {
float: left;
margin-right: 20px;
width: 210px;
text-align: center;
}
a {
display: block;
text-decoration: none;
font-size: 48pt;
font-weight: bold;
}
a.level-up {
color: green;
}
a.level-down {
color: red;
}
h1 {
font-size: 36pt;
}
h2 {
margin: 0;
font-size: 144pt;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" charset="utf-8">
jQuery(function($) {
$('.level-up').click(function(e) {
var counter = $(this).next();
counter.text(counter.text()-0+1);
});
$('.level-down').click(function(e) {
var counter = $(this).prev();
counter.text(counter.text()-1);
});
});
</script>
</head>
<body>
<div class="counter">
<h1>Player #1</h1>
<a href="#" class='level-up'>↑</a>
<h2>1</h2>
<a href="#" class='level-down'>↓</a>
</div>
<div class="counter">
<h1>Player #2</h1>
<a href="#" class='level-up'>↑</a>
<h2>1</h2>
<a href="#" class='level-down'>↓</a>
</div>
<div class="counter">
<h1>Player #3</h1>
<a href="#" class='level-up'>↑</a>
<h2>1</h2>
<a href="#" class='level-down'>↓</a>
</div>
<div class="counter">
<h1>Player #4</h1>
<a href="#" class='level-up'>↑</a>
<h2>1</h2>
<a href="#" class='level-down'>↓</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment