WordPress Hosting
Free Photos
WordPress Themes

Trying to fall asleep

HTML
<div class="center"> <h1>Trying to fall asleep</h1> <div class="switch"> <input id="one" class="input" type="checkbox" /> <label for="one" class="slider"></label> <label for="one" class="label">Did I set my alarm?</label> </div> <div class="switch"> <input id="two" class="input" type="checkbox" /> <label for="two" class="slider"></label> <label for="two" class="label">Plan on working out, starting tomorrow.</label> </div> <div class="switch"> <input id="three" class="input" type="checkbox" /> <label for="three" class="slider"></label> <label for="three" class="label">Calculate hours of sleep I'd have if I feel asleep right now.</label> </div> <div class="switch"> <input id="four" class="input" type="checkbox" /> <label for="four" class="slider"></label> <label for="four" class="label">Worry about the future.</label> </div> <div class="switch"> <input id="five" class="input" type="checkbox" /> <label for="five" class="slider"></label> <label for="five" class="label">Think about that dumb thing I did 5 years ago.</label> </div> <div class="switch"> <input id="six" class="input" type="checkbox" /> <label for="six" class="slider"></label> <label for="six" class="label">Second guess todays decisions</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 { height: 50px; display: flex; align-items: center; justify-content: center; .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 { width: 200px; margin-left: 25px; } .input { display: none; &: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'); body { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .center { font-family: 'Source Sans Pro', sans-serif; user-select: none; width: 300px; } h1 { text-align: center; font-weight: normal; font-size: 35px; 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)
Expand for more options Login