Be convenient and usable on a mobile device

src/digicode.ts

@@ -1,25 +1,26 @@
 import './style.css';
 
-const code = '1234';
+const CODE = '1234';
+let builder = '';
 
 const display = document.getElementById('display') as HTMLDivElement;
 const light = document.getElementById('light') as HTMLDivElement;
 const keypad = document.getElementById('keypad') as HTMLDivElement;
 
 function resetCode() {
-  display.innerText = '';
+  display.innerText = '_'.repeat(CODE.length);
   light.classList.remove('is-success', 'is-error');
 }
 
 function composeDigit(digit: number) {
-  const output = display.innerText + digit.toString();
-  display.innerText = output;
-  if (!code.startsWith(output)) {
+  builder += digit.toString();
+  display.innerText = builder + '_'.repeat(CODE.length - builder.length);
+  if (!CODE.startsWith(builder)) {
     light.classList.add('is-error');
     setTimeout(resetCode, 1000);
     return;
   }
-  if (code === output) {
+  if (CODE === builder) {
     light.classList.add('is-success');
   }
 }
@@ -35,3 +36,4 @@ const reset = document.createElement('button');
 reset.innerText = 'C';
 reset.onclick = resetCode;
 keypad.appendChild(reset);
+resetCode();

src/style.css

@@ -19,12 +19,6 @@ body {
   display: flex;
   place-items: center;
   min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
 }
 
 #app {
@@ -39,7 +33,7 @@ button {
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
   margin: 0.2em;
-  font-size: 1em;
+  font-size: 1.1em;
   font-weight: 500;
   font-family: inherit;
   background-color: #1a1a1a;
@@ -56,13 +50,18 @@ button:focus-visible {
 
 #output {
   display: flex;
-  align-items: center;
+  align-items: stretch;
+  letter-spacing: .2em;
   margin-bottom: .4em;
 }
 #display {
   flex-grow: 1;
   text-align: left;
-  padding: 0.5em 1.2em;
+  padding: .25em .75em;
+  font-size: 1.2em;
+  background-color: #1a1a1a;
+  box-shadow: inset -.25rem -.25rem .5rem rgba(0,0,0,.5);
+  height: inherit;
 }
 
 #light {
@@ -70,6 +69,7 @@ button:focus-visible {
   height: 2.5em;
   border-radius: 50%;
   background-color: #1a1a1a;
+  margin-left: .75em;
 }
 #light.is-error {
   background-color: #fd3838;
@@ -95,10 +95,21 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
-  a:hover {
-    color: #747bff;
+  #display {
+    background-color: #eeeeee;
+    box-shadow: inset -.25rem -.25rem .5rem rgba(0,0,0,.1);
   }
   button, #light {
     background-color: #eeeeee;
   }
 }
+@media (max-width: 480px) {
+  #output {
+    font-size: 1.7em;
+  }
+  button {
+    font-size: 1.4em;
+    padding: 0.8em 1.4em;
+    margin: 0.3em;
+  }
+}