15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
55 |
56 |
❌ Pin Didn't Match, Please try again
57 |
✅ Pin Matched... Secret door is opening for you
58 |
59 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | function getPin() {
2 | const pin = Math.round(Math.random() * 10000);
3 | const pinString = pin + '';
4 | if (pinString.length == 4) {
5 | return pin;
6 | }
7 | else {
8 | // console.log('got 3 digit and calling again', pin);
9 | return getPin();
10 | }
11 | }
12 | function generatePin() {
13 | const pin = getPin();
14 | document.getElementById('display-pin').value = pin;
15 | }
16 |
17 | document.getElementById('key-pad').addEventListener('click', function (event) {
18 | const number = event.target.innerText;
19 | const calcInput = document.getElementById('typed-numbers');
20 | if (isNaN(number)) {
21 | if (number == 'C') {
22 | calcInput.value = '';
23 | }
24 | }
25 | else {
26 | const previousNumber = calcInput.value;
27 | const newNumber = previousNumber + number;
28 | calcInput.value = newNumber;
29 | }
30 | });
31 |
32 | function verifyPin() {
33 | const pin = document.getElementById('display-pin').value;
34 | const typedNumbers = document.getElementById('typed-numbers').value;
35 | const successMessage = document.getElementById('notify-success');
36 | const failError = document.getElementById('notify-fail');
37 | if (pin == typedNumbers) {
38 | successMessage.style.display = 'block';
39 | failError.style.display = 'none';
40 | }
41 | else {
42 | successMessage.style.display = 'none';
43 | failError.style.display = 'block';
44 | }
45 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | box-sizing: border-box;
3 | }
4 | body {
5 | background: #10101B;
6 | height: 100vh;
7 | }
8 | .container {
9 | margin-top: 30px;
10 | }
11 |
12 | .half-width {
13 | height: 570px;
14 | background: #222436;
15 | padding: 30px;
16 | text-align: center;
17 | }
18 | .generate-btn{
19 | margin-top: 140px;
20 | width: 180px;
21 | padding: 50px;
22 | border-radius: 50%;
23 | border: 8px solid #39458C;
24 | background-color: #495BC3;
25 | color: #ffffff;
26 | font-weight: bold;
27 | font-size: 20px;
28 | text-align: center;
29 | }
30 | .generate-btn:focus{
31 | outline: none;
32 | box-shadow: none;
33 | }
34 |
35 | input[type='text']{
36 | background-color: #3D4153;
37 | padding: 10px 0px;
38 | color: #ffffff;
39 | width: 80%;
40 | margin: 0 auto;
41 | border: 2px solid #858299;
42 | height: 50px;
43 | padding: 10px;
44 | }
45 | input[type='text']:focus {
46 | background-color: #3D4153;
47 | color: #fff;
48 | font-size: 20px;
49 | }
50 | .numbers {
51 | margin: 30px 0;
52 | }
53 |
54 | .calc-typed {
55 | margin-top: 20px;
56 | font-size: 45px;
57 | text-align: right;
58 | color: #fff;
59 | }
60 |
61 | .calc-button-row {
62 | width: 100%;
63 | }
64 |
65 | .button {
66 | width: 20%;
67 | background: #425062;
68 | color: #fff;
69 | padding: 20px 0;
70 | margin: 5px;
71 | display: inline-block;
72 | font-size: 25px;
73 | text-align: center;
74 | vertical-align: middle;
75 | margin-right: -4px;
76 | border-radius: 10px;
77 | cursor: pointer;
78 | }
79 | .blink-me {
80 | color: #E0B612;
81 | }
82 | .submit-btn {
83 | border: none;
84 | margin-top: 20px;
85 | padding: 10px 120px;
86 | border-radius: 5px;
87 | background: #495BC3;
88 | color: #fff;
89 | }
90 | .notify {
91 | color: #fff;
92 | text-align: center;
93 | margin: 0 auto;
94 | background: #222436;
95 | margin-top: 20px;
96 | border-radius: 15px;
97 | padding: 5px 20px;
98 | display: none;
99 | }
100 | .notify-section{
101 | width: 35%;
102 | margin: 0 auto;
103 | }
104 | .action-left {
105 | color: #FF3C5F;
106 | margin-top: 10px;
107 | }
108 |
--------------------------------------------------------------------------------