Bootcamp
Study group
Collaborate with peers in your dedicated #study-group channel.
Code reviews
Submit projects for review using the /review command in your #code-reviews channel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.rawgit.com/jgthms/minireset.css/master/minireset.css">
<link rel="stylesheet" href="css/debug.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
:root {
--white : #ffffff;
--orange : #ff691f;
--yellow : #fab81e;
--lightgreen : #7fdbb6;
--green : #19cf86;
--lightblue : #91d2fa;
--blue : #1b95e0;
--grey : #abb8c2;
--red : #e81c4f;
--pink : #f58ea8;
--purple : #981ceb;
--black : #000000;
font: 1rem/1.175 "BlinkMacSystemFont", -apple-system, "Roboto", sans-serif;
}
.app {
display: flex;
justify-content: center; align-items: center;
width: 100vw; height: 100vh;
font-weight: 900; font-size: 8rem;
color: var(--green);
user-select: none;
}
img {
width: 8rem; height: 8rem;
vertical-align: calc(-0.12109375em);
}
.jitter {
display: inline-block;
animation: jitter 0.33s infinite alternate;
}
@keyframes jitter {
0% { transform: rotate( 0deg); }
33% { transform: rotate( 3deg); }
67% { transform: rotate(-3deg); }
100% { transform: rotate( 0deg); }
}
.theme--alive { color: var(--white); background: var(--green); }
.theme--dead { color: var(--red ); background: var(--black); }
</style>
</head>
<body>
<div class="app"
:class="{ 'theme--alive': is_open() && is_alive(), 'theme--dead': !is_alive() }">
<p>
Click the box!<br>
The cat's...<!--
--><span
v-html="cat"
@click="quantum_fluctuation()" :class="{ jitter: is_alive() }"
></span><!--
-->!
</p>
</div>
<script>
"use strict"
// emojify returns the corresponding emoji image
function emojify(name) {
var out = `<img src="emojis/` + name + `.png">`
return out
}
// rand returns a random item from an array
function rand(...arr) {
var x = Math.floor(Math.random() * arr.length)
return arr[x]
}
var app = new Vue({
el: ".app",
data: {
cat: emojify("box"),
alive_cats: [
emojify("cat--smile"),
emojify("cat--cheer"),
emojify("cat--laugh"),
emojify("cat--love" ),
emojify("cat--smirk"),
emojify("cat--kiss" ),
emojify("cat--fear" ),
emojify("cat--sad" ),
emojify("cat--mad" )
],
dead_cats: [
emojify("crossbones"),
emojify("skull")
],
},
methods: {
// is_open returns whether the box is open
is_open: function () {
return this.cat != emojify("box")
},
// is_alive returns whether the cat is alive
is_alive: function () {
return (
this.cat != emojify("crossbones") &&
this.cat != emojify("skull" )
)
},
// quantum_fluctuation observes whether the cat is alive or dead
quantum_fluctuation: function () {
if (this.is_open()) {
this.cat = emojify("box")
return
}
this.cat = rand(
rand(...this.alive_cats),
rand(...this.dead_cats ),
)
}
}
})
</script>
</body>
</html>
