Day wesbos#8.5 Dice

mancristiana · mancristiana · commit 560db7cb6083 · 2018-06-24T16:13:02.000+02:00
diff --git a/08.5 - Dice/dice.html b/08.5 - Dice/dice.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>JS + CSS Die</title>
+</head>
+
+<body>
+
+
+  <div class="die">
+    <div class="die-container">
+      <span id="number">10</span>
+    </div>
+  </div>
+
+
+  <style>
+    html {
+      background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+      background-size: cover;
+      font-family: 'helvetica neue';
+      text-align: center;
+      font-size: 10px;
+    }
+
+    body {
+      margin: 0;
+      font-size: 30rem;
+      font-family: 'Roboto';
+      color: white;
+      display: flex;
+      flex: 1;
+      min-height: 100vh;
+      align-items: center;
+    }
+
+    .die {
+      width: 30rem;
+      height: 30rem;
+      margin: 50px auto;
+      position: relative;
+      padding: 2rem;
+    }
+
+    .die-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transform: translateY(-3px);
+      user-select: none;
+      /* account for the height of the clock hands */
+    }
+  </style>
+
+  <script>
+    const number = document.querySelector('#number');
+    const generateRandom = event => {
+      number.innerText = Math.floor(Math.random() * 20) + 1;
+    }
+
+
+    document.addEventListener('keydown', generateRandom);
+    document.addEventListener('click', generateRandom);
+
+  </script>
+</body>
+
+</html>
