clement/naive-keypad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Be convenient and usable on a mobile device

Browse Source
This commit is contained in:
Clément Fréville
2023-10-31 19:56:29 +01:00
parent 054190a958
commit 9509fe4670
2 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/digicode.ts
View File

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

33
src/style.css
View File

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