<title>Vote!</title>
<style>
input { transform: scale(1.5) }
+ div { animation: 2s infinite linear spin }
+ @keyframes spin {
+ from { transform:rotate(0) }
+ to { transform:rotate(1turn) }
+ }
</style>
<script>
window.onload = function() {
for (cb of document.getElementsByTagName('input')) {
+ cb.addEventListener('click', (function(cb) {
+ return function() {
+ cb.style.display = 'none'
+ const spin = document.createElement('div')
+ spin.appendChild(document.createTextNode('⏳'))
+ cb.parentElement.insertBefore(spin, cb)
+
+ const req = new XMLHttpRequest()
+ req.addEventListener('load', function(e) {
+ cb.parentElement.removeChild(cb.previousElementSibling)
+ if (req.status == 200) {
+ cb.style.display = ''
+ } else {
+ cb.parentElement.insertBefore(document.createTextNode('❗'), cb)
+ }
+ })
+ req.open('PUT', window.location.href)
+ req.send((cb.checked ? 1 : 0) + ' ' + cb.parentElement.nextSibling.innerHTML)
+ }
+ })(cb))
cb.disabled = false
}
}