Skip to content

Instantly share code, notes, and snippets.

@aazbeltran
Last active September 16, 2015 20:09
Show Gist options
  • Save aazbeltran/648d8ae89a7068918180 to your computer and use it in GitHub Desktop.
Save aazbeltran/648d8ae89a7068918180 to your computer and use it in GitHub Desktop.
* {
font-family: Arial, "Free Sans";
}
#container {
color: #fff;
background: #000;
}
#container #question {
display: block;
padding: 20px;
font-weight: bold;
letter-spacing: -3px;
margin-bottom: 20px;
padding: 10px;
font-size: 40px;
}
#container #options div {
font-weight: bold;
letter-spacing: -3px;
background: #0099cc;
margin-bottom: 15px;
padding: 10px;
font-size: 34px;
color: #ffffff;
border-left: 20px solid #333;
width: 400px;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0 0.5em 0.5em 0;
border-radius: 0 1.5em 1.5em 0;
}
#container #options div a {
border-radius: 0.3em;
text-decoration: none;
color: #0099cc;
padding: 5px 15px;
background: #333;
margin: 0 20px;
}
#container #options div a:hover {
color: #fff;
}
body {
margin: 0;
padding: 0;
}
$(document).ready(function() {
var options = ["PHP", "Ruby", "Java", "ASP", "Perl", "ColdFusion"];
var results = {};
if(localStorage.getItem("results")) results = JSON.parse(localStorage.getItem("results"));
options.map(function(option, index) {
var count = results[index] ? results[index] : 0;
$("#options").append('<div data-option-id="' + index + '"><span>' + count + '</span><a href="">Vote</a>' + option + '</div>');
$("#options div[data-option-id='" + index + "']").animate({
width: '+=' + (100 * count) + 'px'
}, 500);
})
$("body").on("click", "#container div a", function() {
results[$(this).parent().data("optionId")] = results[$(this).parent().data("optionId")] ? results[$(this).parent().data("optionId")] + 1 : 1;
localStorage.setItem("results", JSON.stringify(results));
$(this).parent().animate({
width: '+=100px'
}, 500);
$(this).prev().html(parseInt($(this).prev().html()) + 1);
return false;
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link rel="stylesheet" href="dok3.css" media="screen">
<!-- css declaration -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="dok3.js"></script>
</head>
<body>
<div id="container">
<span id="question">What is your favorite server side language?</span>
<div id="options">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment