Programming Simulator
HTML
<div class="center">
<h1>Programming Simulator</h1>
<div class="switch">
<input id="one" class="input" type="checkbox" />
<label for="one" class="slider"></label>
<label for="one" class="label">Bug #1</label>
</div>
<div class="switch">
<input id="two" class="input" type="checkbox" />
<label for="two" class="slider"></label>
<label for="two" class="label">Bug #2</label>
</div>
<div class="switch">
<input id="three" class="input" type="checkbox" />
<label for="three" class="slider"></label>
<label for="three" class="label">Bug #3</label>
</div>
<div class="switch">
<input id="four" class="input" type="checkbox" />
<label for="four" class="slider"></label>
<label for="four" class="label">Bug #4</label>
</div>
<div class="switch">
<input id="five" class="input" type="checkbox" />
<label for="five" class="slider"></label>
<label for="five" class="label">Bug #5</label>
</div>
<div class="switch">
<input id="six" class="input" type="checkbox" />
<label for="six" class="slider"></label>
<label for="six" class="label">Bug #6</label>
</div>
<div class="switch">
<input id="seven" class="input" type="checkbox" />
<label for="seven" class="slider"></label>
<label for="seven" class="label">Bug #7</label>
</div>
<div class="switch">
<input id="eight" class="input" type="checkbox" />
<label for="eight" class="slider"></label>
<label for="eight" class="label">Bug #8</label>
</div>
</div>
SCSS
/**
* Switch Styles by Alexandre Joffroy
* - http://codepen.io/alexjoffroy/pen/ORXOmR
*/
$switch-on-color: #ef0460 !default;
$slider-on-color: lighten($switch-on-color, 20%) !default;
$switch-off-color: #eeeeee;
$slider-off-color: #c5c5c5;
// Sizes
$slider-height: 8px !default;
$slider-width: $slider-height * 4 !default; // 32px
$switch-height: $slider-height * 3 !default; // 24px
$switch-width: $switch-height !default; // 24px
$switch-shift: $slider-height !default; // 8px
// Transitions
$transition-duration: .2s !default;
$transition-function: ease !default;
$transition: all $transition-duration $transition-function !default;
.switch {
display: block;
margin-top: $switch-height;
.slider {
position: relative;
display: inline-block;
height: $slider-height;
width: $slider-width;
border-radius: $slider-height;
cursor: pointer;
background: $slider-off-color;
transition: $transition;
&:after {
background: $switch-off-color;
position: absolute;
left: -$switch-shift;
top: ($slider-height - $switch-height) / 2;
display: block;
width: $switch-height;
height: $switch-width;
border-radius: 50%;
box-shadow: 0px 2px 2px rgba(#000, .2);
content: '';
transition: $transition;
}
}
label {
margin-right: 7px;
}
.input {
display: none;
~ .label {
margin-left: $slider-height;
}
&:checked ~ .slider {
&:after {
left: $slider-width - $switch-width + $switch-shift;
}
}
}
.input:checked ~ .slider {
background: $slider-on-color;
&:after {
background: $switch-on-color;
}
}
}
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
.center {
font-family: 'Source Sans Pro', sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
}
h1 {
font-weight: normal;
margin-top: 0px;
}
JAVASCRIPT
var checkboxes = document.querySelectorAll('input');
for( var i = 0; i < checkboxes.length; i++ ) {
checkboxes[i].addEventListener("change", function() {
updateBugs(this);
});
}
function updateBugs(changedElement) {
var checkedCount = document.querySelectorAll('input:checked').length;
// No bugs, thats impossible!
if( checkedCount === 0 ) {
turnOnRandomBug(changedElement);
if( Math.random() > 0.85 ) {
turnOnRandomBug(changedElement);
}
}
}
function turnOnRandomBug(excluding) {
turnOn = Math.floor(Math.random() * checkboxes.length);
if( checkboxes[turnOn] === excluding) {
turnOn = turnOn + 1;
if( turnOn > (checkboxes.length - 1)) {
turnOn = 0;
}
}
checkboxes[turnOn].checked = true;
}
setTimeout(function() {
turnOnRandomBug(null);
}, 400)
