Howl Vote Button
Vote Up button for my chat site, Howl
by Joe Pigott
HTML
<button id="b">
<img src='http://i.imgur.com/ToZz7PB.png'></img>
<div id='p' style='display: inline-block'>Testing Testing 123</div>
</button>
<div style='display: inline-block; font-family: Helvetica'>
<div id='n' style='display: inline-block'>0</div> people have liked this</div>
CSS
#b {
height: 25px;
width: 40px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 0;
background: #371e41;
color: #73318e;
cursor: pointer;
margin-right: 15px;
}
#b:hover {
background: #73318e;
color: #371e41
}
#b:focus {
outline: 0;
}
#p {
height: 25px;
width: 50px;
background: #371e41
}
img {
width: 22px;
height: 21px;
}
JavaScript
/*jshint -W065 */
$(document).ready(function () {
$("#b").click(function () {
var x = parseInt($('#n').html());
var u = x + 1;
$('#n').html(u);
});
if ($('#b').html() == 1) {
var u = "1 person has liked this";
$('#n').html(u);
}
});