Skip to content

Instantly share code, notes, and snippets.

@hibangun

hibangun/index.html

Created August 2, 2018 10:02
Show Gist options
  • Save hibangun/88dacd8b68321a46ebd6053a8ca976ef to your computer and use it in GitHub Desktop.
Save hibangun/88dacd8b68321a46ebd6053a8ca976ef to your computer and use it in GitHub Desktop.
Download ZIP
Imam Besar // source http://jsbin.com/vuqevax/5
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Imam Besar</title>
<style id="jsbin-css">
* {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smothing: antialiased;
font-smothing: antialiased;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 0px solid transparent;
outline-width: 0;
}
html,
body {
height: 100%;
background-color: #32cdff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
overflow: auto;
}
body {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
}
a {
color: rgba(0,0,0,0.8);
}
.none {
display: none !important;
}
.pilih {
width: 100%;
margin-top: 40px;
margin: auto;
}
.pilih h1 {
text-align: center;
}
.pilih a,
.pilih .new-imam {
display: block;
padding: 15px;
background-color: #fff;
border-radius: 5px;
width: 80%;
margin: 20px auto;
text-align: center;
font-size: 20px;
text-decoration: none;
font-weight: 700;
border: 2px solid transparent;
}
.pilih a.active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAB/klEQVRIS71WQVLCQBDssUrxJpyEG75AfyA/UK/GKpcXgC8QXmB8AWspXpUXqC8QX6A38CTcNFY51rLZkGCS3YhlbqmdnZ7pmZ5ZgsN3LV73GdhmcCNuTqB7EA+9XnVgc0NZBj3xVl5D0GJwm4ByniMGJgTyA6ydN2VlkmabCtQXI8GgMxvAokMNyCeerMnFsx9AfTH2AbRsVOSfU8eTm90kzbG/vwExDrnryVrH/EUZKboA6i2XyQ8ym4bGGZAq/Co+novWxBaUqtknSluqQWZAfTHqAHRqu5h1zsAJgScAqfpuJO00hSHQWLXkgoEz7MCT1X1lrfXGN/GbKqsjWa1Q2qEzBDANUKob7WQ1E4EOaBnalINDuXmrArsUo8YK6C49SO4qoHuAdgtkYUwjyvQU+XgEUM/wM/gtkBNlc1B+yAVi4OkTpcYq3n0CHc/FN6fMrcYWoACliin0lRhJBcbgiyNZEwX1N6MuR0McKdvoLcC6H+sy1Qh79vpy16G9k2DGqRtl2nrW3jpSm2CTYAVH1tST1XKBETQH64uxI2UqjdgICnXwYh9DFI59jsa/pT6RDP53TZio/mXx/S1Ycrvqzkv5wm2bslusipkC3HZ6nBhXukHe2wC17U0CBeDHxbwYUua7Lm6oxfm1A9AOwOEbjyYADwkrQ7Mq8vL9BiIkCxIbxDQaAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: 3% center;
border: 2px solid #a560e8;
}
.pilih a.btn {
background-color: #a560e8;
color: #fff;
padding: 20px;
margin-top: 40px;
}
.pilih .new-imam {
opacity: 0.5;
position: relative;
}
.pilih .new-imam input {
width: 100%;
padding: 0;
font-size: 20px;
border: none;
text-align: center;
font-weight: 700;
}
.pilih .new-imam.focused {
opacity: 1;
}
.pilih .new-imam p {
position: absolute;
text-align: center;
width: calc(100% - 30px);
margin-top: 25px;
font-size: 12px;
}
.terpilih {
text-align: center;
margin: auto;
}
.terpilih .progress {
position: fixed;
left: 0;
top: 0;
width: 0%;
height: 100%;
background-color: rgba(0,0,0,0.3);
transition: width 0.5s ease;
}
.terpilih h1 {
border-width: 20px;
border-style: solid;
border-color: transparent;
vertical-align: middle;
font-size: 70px;
}
/* .terpilih h1.done {
-webkit-border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/parrot.gif") 30 round;
-o-border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/parrot.gif") 30 round;
border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/parrot.gif") 30 round;
} */
</style>
</head>
<body>
<div class="pilih">
<h1>Calon</h1>
<div class="list-imam">
<a href="#" class="imam">Irfan</a>
<a href="#" class="imam">Bangun</a>
<a href="#" class="imam">Endi</a>
<a href="#" class="imam">Finno</a>
<a href="#" class="imam">Faisal</a>
</div>
<div class="new-imam">
<input type="text" placeholder="Tulis imam baru">
<p class="none">Tekan enter</p>
</div>
<a href="#" class="btn">PILIH IMAM</a>
</div>
<div class="terpilih none">
<div class="progress none"></div>
<h1></h1>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script id="jsbin-javascript">
IMAM = (function (window, document) {
var init = function () {
bindSelectImam()
bindPilihImam()
bindAddImam()
keydownAddImam()
focusNewImam()
}
var bindSelectImam = function() {
$(document).on('click', '.imam', function() {
if($(this).hasClass('active')) {
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
return false
})
}
var bindPilihImam = function() {
$(document).on('click', '.btn', function() {
var imamArr = []
var imamSelected = $('.imam.active').map(function(){
return $.trim($(this).text());
}).get();
var progress = 0;
if(imamSelected.length) {
$('.pilih').addClass('none')
$('.terpilih').removeClass('none')
$('.restart').addClass('none')
$('.terpilih .progress').removeClass('none')
var randomSelect = setInterval(function() {
var random = randomIntFromInterval(0, imamSelected.length-1)
$('.terpilih h1').text(imamSelected[random])
$('.terpilih .progress').css('width', progress.toString() + '%')
progress += 2.5
}, 100)
setTimeout(function() {
clearInterval(randomSelect)
$('.restart').removeClass('none')
$('.terpilih h1').addClass('done')
$('.terpilih .progress').addClass('none')
setInterval(function() {
if($('.terpilih h1').hasClass('none')) {
$('.terpilih h1').removeClass('none')
} else {
$('.terpilih h1').addClass('none')
}
}, 400)
}, 5000)
}
return false
})
}
var bindAddImam = function() {
$(document).on('keypress', '.new-imam input', function(e) {
var key = e.which;
if(key == 13 && $(this).val() !== '') {
var newImam = $(this).val()
$('.list-imam').append('<a href="#" class="imam">'+newImam+'</a>')
$(this).val('')
$('.list-imam .imam:last-child').click()
return false;
}
})
}
var keydownAddImam = function() {
$(document).on('keyup', '.new-imam input', function(e) {
if($(this).val() !== '') {
$('.new-imam p').removeClass('none')
} else {
$('.new-imam p').addClass('none')
}
})
}
var focusNewImam = function() {
$('.new-imam input')
.focus(function() {
$('.new-imam').addClass('focused');
})
.blur(function() {
$('.new-imam').removeClass('focused');
});
}
var randomIntFromInterval = function (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
return {
init: init
}
})(window, document)
$(function () {
IMAM.init()
})
</script>
<script id="jsbin-source-css" type="text/css">* {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smothing: antialiased;
font-smothing: antialiased;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 0px solid transparent;
outline-width: 0;
}
html,
body {
height: 100%;
background-color: #32cdff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
overflow: auto;
}
body {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
}
a {
color: rgba(0,0,0,0.8);
}
.none {
display: none !important;
}
.pilih {
width: 100%;
margin-top: 40px;
margin: auto
}
.pilih h1 {
text-align: center;
}
.pilih a,
.pilih .new-imam {
display: block;
padding: 15px;
background-color: #fff;
border-radius: 5px;
width: 80%;
margin: 20px auto;
text-align: center;
font-size: 20px;
text-decoration: none;
font-weight: 700;
border: 2px solid transparent;
}
.pilih a.active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAB/klEQVRIS71WQVLCQBDssUrxJpyEG75AfyA/UK/GKpcXgC8QXmB8AWspXpUXqC8QX6A38CTcNFY51rLZkGCS3YhlbqmdnZ7pmZ5ZgsN3LV73GdhmcCNuTqB7EA+9XnVgc0NZBj3xVl5D0GJwm4ByniMGJgTyA6ydN2VlkmabCtQXI8GgMxvAokMNyCeerMnFsx9AfTH2AbRsVOSfU8eTm90kzbG/vwExDrnryVrH/EUZKboA6i2XyQ8ym4bGGZAq/Co+novWxBaUqtknSluqQWZAfTHqAHRqu5h1zsAJgScAqfpuJO00hSHQWLXkgoEz7MCT1X1lrfXGN/GbKqsjWa1Q2qEzBDANUKob7WQ1E4EOaBnalINDuXmrArsUo8YK6C49SO4qoHuAdgtkYUwjyvQU+XgEUM/wM/gtkBNlc1B+yAVi4OkTpcYq3n0CHc/FN6fMrcYWoACliin0lRhJBcbgiyNZEwX1N6MuR0McKdvoLcC6H+sy1Qh79vpy16G9k2DGqRtl2nrW3jpSm2CTYAVH1tST1XKBETQH64uxI2UqjdgICnXwYh9DFI59jsa/pT6RDP53TZio/mXx/S1Ycrvqzkv5wm2bslusipkC3HZ6nBhXukHe2wC17U0CBeDHxbwYUua7Lm6oxfm1A9AOwOEbjyYADwkrQ7Mq8vL9BiIkCxIbxDQaAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: 3% center;
border: 2px solid #a560e8;
}
.pilih a.btn {
background-color: #a560e8;
color: #fff;
padding: 20px;
margin-top: 40px;
}
.pilih .new-imam {
opacity: .5;
position: relative;
}
.pilih .new-imam input {
width: 100%;
padding: 0;
font-size: 20px;
border: none;
text-align: center;
font-weight: 700;
}
.pilih .new-imam.focused {
opacity: 1;
}
.pilih .new-imam p {
position: absolute;
text-align: center;
width: calc(100% - 30px);
margin-top: 25px;
font-size: 12px;
}
.terpilih {
text-align: center;
margin: auto;
}
.terpilih .progress {
position: fixed;
left: 0;
top: 0;
width: 0%;
height: 100%;
background-color: rgba(0,0,0,.3);
transition: width .5s ease;
}
.terpilih h1 {
border-width: 20px;
border-style: solid;
border-color: transparent;
vertical-align: middle;
font-size: 70px;
}
/* .terpilih h1.done {
-webkit-border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/parrot.gif") 30 round;
-o-border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/parrot.gif") 30 round;
border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/parrot.gif") 30 round;
} */</script>
<script id="jsbin-source-javascript" type="text/javascript">IMAM = (function (window, document) {
var init = function () {
bindSelectImam()
bindPilihImam()
bindAddImam()
keydownAddImam()
focusNewImam()
}
var bindSelectImam = function() {
$(document).on('click', '.imam', function() {
if($(this).hasClass('active')) {
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
return false
})
}
var bindPilihImam = function() {
$(document).on('click', '.btn', function() {
var imamArr = []
var imamSelected = $('.imam.active').map(function(){
return $.trim($(this).text());
}).get();
var progress = 0;
if(imamSelected.length) {
$('.pilih').addClass('none')
$('.terpilih').removeClass('none')
$('.restart').addClass('none')
$('.terpilih .progress').removeClass('none')
var randomSelect = setInterval(function() {
var random = randomIntFromInterval(0, imamSelected.length-1)
$('.terpilih h1').text(imamSelected[random])
$('.terpilih .progress').css('width', progress.toString() + '%')
progress += 2.5
}, 100)
setTimeout(function() {
clearInterval(randomSelect)
$('.restart').removeClass('none')
$('.terpilih h1').addClass('done')
$('.terpilih .progress').addClass('none')
setInterval(function() {
if($('.terpilih h1').hasClass('none')) {
$('.terpilih h1').removeClass('none')
} else {
$('.terpilih h1').addClass('none')
}
}, 400)
}, 5000)
}
return false
})
}
var bindAddImam = function() {
$(document).on('keypress', '.new-imam input', function(e) {
var key = e.which;
if(key == 13 && $(this).val() !== '') {
var newImam = $(this).val()
$('.list-imam').append('<a href="#" class="imam">'+newImam+'</a>')
$(this).val('')
$('.list-imam .imam:last-child').click()
return false;
}
})
}
var keydownAddImam = function() {
$(document).on('keyup', '.new-imam input', function(e) {
if($(this).val() !== '') {
$('.new-imam p').removeClass('none')
} else {
$('.new-imam p').addClass('none')
}
})
}
var focusNewImam = function() {
$('.new-imam input')
.focus(function() {
$('.new-imam').addClass('focused');
})
.blur(function() {
$('.new-imam').removeClass('focused');
});
}
var randomIntFromInterval = function (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
return {
init: init
}
})(window, document)
$(function () {
IMAM.init()
})</script></body>
</html>
Raw
jsbin.vuqevax.css
* {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smothing: antialiased;
font-smothing: antialiased;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 0px solid transparent;
outline-width: 0;
}
html,
body {
height: 100%;
background-color: #32cdff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
overflow: auto;
}
body {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0;
}
a {
color: rgba(0,0,0,0.8);
}
.none {
display: none !important;
}
.pilih {
width: 100%;
margin-top: 40px;
margin: auto;
}
.pilih h1 {
text-align: center;
}
.pilih a,
.pilih .new-imam {
display: block;
padding: 15px;
background-color: #fff;
border-radius: 5px;
width: 80%;
margin: 20px auto;
text-align: center;
font-size: 20px;
text-decoration: none;
font-weight: 700;
border: 2px solid transparent;
}
.pilih a.active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAB/klEQVRIS71WQVLCQBDssUrxJpyEG75AfyA/UK/GKpcXgC8QXmB8AWspXpUXqC8QX6A38CTcNFY51rLZkGCS3YhlbqmdnZ7pmZ5ZgsN3LV73GdhmcCNuTqB7EA+9XnVgc0NZBj3xVl5D0GJwm4ByniMGJgTyA6ydN2VlkmabCtQXI8GgMxvAokMNyCeerMnFsx9AfTH2AbRsVOSfU8eTm90kzbG/vwExDrnryVrH/EUZKboA6i2XyQ8ym4bGGZAq/Co+novWxBaUqtknSluqQWZAfTHqAHRqu5h1zsAJgScAqfpuJO00hSHQWLXkgoEz7MCT1X1lrfXGN/GbKqsjWa1Q2qEzBDANUKob7WQ1E4EOaBnalINDuXmrArsUo8YK6C49SO4qoHuAdgtkYUwjyvQU+XgEUM/wM/gtkBNlc1B+yAVi4OkTpcYq3n0CHc/FN6fMrcYWoACliin0lRhJBcbgiyNZEwX1N6MuR0McKdvoLcC6H+sy1Qh79vpy16G9k2DGqRtl2nrW3jpSm2CTYAVH1tST1XKBETQH64uxI2UqjdgICnXwYh9DFI59jsa/pT6RDP53TZio/mXx/S1Ycrvqzkv5wm2bslusipkC3HZ6nBhXukHe2wC17U0CBeDHxbwYUua7Lm6oxfm1A9AOwOEbjyYADwkrQ7Mq8vL9BiIkCxIbxDQaAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: 3% center;
border: 2px solid #a560e8;
}
.pilih a.btn {
background-color: #a560e8;
color: #fff;
padding: 20px;
margin-top: 40px;
}
.pilih .new-imam {
opacity: 0.5;
position: relative;
}
.pilih .new-imam input {
width: 100%;
padding: 0;
font-size: 20px;
border: none;
text-align: center;
font-weight: 700;
}
.pilih .new-imam.focused {
opacity: 1;
}
.pilih .new-imam p {
position: absolute;
text-align: center;
width: calc(100% - 30px);
margin-top: 25px;
font-size: 12px;
}
.terpilih {
text-align: center;
margin: auto;
}
.terpilih .progress {
position: fixed;
left: 0;
top: 0;
width: 0%;
height: 100%;
background-color: rgba(0,0,0,0.3);
transition: width 0.5s ease;
}
.terpilih h1 {
border-width: 20px;
border-style: solid;
border-color: transparent;
vertical-align: middle;
font-size: 70px;
}
/* .terpilih h1.done {
-webkit-border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/parrot.gif") 30 round;
-o-border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/parrot.gif") 30 round;
border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/parrot.gif") 30 round;
} */
Raw
jsbin.vuqevax.js
IMAM = (function (window, document) {
var init = function () {
bindSelectImam()
bindPilihImam()
bindAddImam()
keydownAddImam()
focusNewImam()
}
var bindSelectImam = function() {
$(document).on('click', '.imam', function() {
if($(this).hasClass('active')) {
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
return false
})
}
var bindPilihImam = function() {
$(document).on('click', '.btn', function() {
var imamArr = []
var imamSelected = $('.imam.active').map(function(){
return $.trim($(this).text());
}).get();
var progress = 0;
if(imamSelected.length) {
$('.pilih').addClass('none')
$('.terpilih').removeClass('none')
$('.restart').addClass('none')
$('.terpilih .progress').removeClass('none')
var randomSelect = setInterval(function() {
var random = randomIntFromInterval(0, imamSelected.length-1)
$('.terpilih h1').text(imamSelected[random])
$('.terpilih .progress').css('width', progress.toString() + '%')
progress += 2.5
}, 100)
setTimeout(function() {
clearInterval(randomSelect)
$('.restart').removeClass('none')
$('.terpilih h1').addClass('done')
$('.terpilih .progress').addClass('none')
setInterval(function() {
if($('.terpilih h1').hasClass('none')) {
$('.terpilih h1').removeClass('none')
} else {
$('.terpilih h1').addClass('none')
}
}, 400)
}, 5000)
}
return false
})
}
var bindAddImam = function() {
$(document).on('keypress', '.new-imam input', function(e) {
var key = e.which;
if(key == 13 && $(this).val() !== '') {
var newImam = $(this).val()
$('.list-imam').append('<a href="#" class="imam">'+newImam+'</a>')
$(this).val('')
$('.list-imam .imam:last-child').click()
return false;
}
})
}
var keydownAddImam = function() {
$(document).on('keyup', '.new-imam input', function(e) {
if($(this).val() !== '') {
$('.new-imam p').removeClass('none')
} else {
$('.new-imam p').addClass('none')
}
})
}
var focusNewImam = function() {
$('.new-imam input')
.focus(function() {
$('.new-imam').addClass('focused');
})
.blur(function() {
$('.new-imam').removeClass('focused');
});
}
var randomIntFromInterval = function (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
return {
init: init
}
})(window, document)
$(function () {
IMAM.init()
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment