Skip to content

Commit 3561b34

Browse files
abdullah-124abdullah-124
committed
file uploded
0 parents  commit 3561b34

File tree

5 files changed

+217
-0
lines changed

5 files changed

+217
-0
lines changed

‎image/1200px-Red_circle.svg.png

44 KB
Loading

‎image/500px-Circle_-_black_simple.svg.png

10.3 KB
Loading

‎index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Pin Generator</title>
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="row">
13+
<div class="col-md-6">
14+
<div class="pin-generator half-width">
15+
<input id="display-pin" class="form-control" type="text">
16+
<button onclick="genaretPin()" class="generate-btn">Generate Pin</button>
17+
</div>
18+
</div>
19+
<div class="col-md-6">
20+
<div class="input-section half-width">
21+
<input id="typed-number" class="form-control" type="text">
22+
<div class="numbers">
23+
<div id="key-pad" class="calc-body">
24+
<div class="calc-button-row">
25+
<div class="button">7</div>
26+
<div class="button">8</div>
27+
<div class="button">9</div>
28+
</div>
29+
<div class="calc-button-row">
30+
<div class="button">4</div>
31+
<div class="button">5</div>
32+
<div class="button">6</div>
33+
</div>
34+
<div class="calc-button-row">
35+
<div class="button">1</div>
36+
<div class="button">2</div>
37+
<div class="button">3</div>
38+
</div>
39+
<div class="calc-button-row">
40+
<div class="button">&lt;</div>
41+
<div class="button">0</div>
42+
<div class="button">C</div>
43+
</div>
44+
<div>
45+
<button onclick="pinVerify()" type="submit" class="submit-btn">Submit</button>
46+
<p class="action-left">3 try left</p>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
<div class="notify-section">
53+
<p id="if-failed" class="notify">❌ Pin Didn't Match, Please try again</p>
54+
<p id="if-passed" class="notify">✅ Pin Matched... Secret door is opening for you</p>
55+
</div>
56+
</div>
57+
<script src="index.js"></script>
58+
</body>
59+
</html>

‎index.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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+
return getPin();
9+
}
10+
}
11+
function genaretPin(){
12+
const pin = getPin();
13+
console.log(pin);
14+
document.getElementById('display-pin').value = pin;
15+
}
16+
document.getElementById('key-pad').addEventListener('click', function(event){
17+
const number = event.target.innerText;
18+
const clacInput = document.getElementById('typed-number');
19+
if(isNaN(number)){
20+
if(number == 'C'){
21+
clacInput.value = '';
22+
}
23+
}
24+
else {
25+
26+
const preNumber = clacInput.value;
27+
const newCalc = preNumber + number
28+
clacInput.value = newCalc;
29+
}
30+
})
31+
32+
function pinVerify(){
33+
const pin = document.getElementById('display-pin').value;
34+
const typedNumber = document.getElementById('typed-number').value;
35+
const passed = document.getElementById('if-passed');
36+
const faield = document.getElementById('if-failed');
37+
if(typedNumber == pin){
38+
// console.log('matched');
39+
passed.style.display = 'block';
40+
faield.style.display = 'none'
41+
}
42+
else{
43+
// console.log('opps! dont matched');
44+
faield.style.display = 'block'
45+
passed.style.display = 'none'
46+
}
47+
}

‎style.css

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
*{
2+
box-sizing: border-box;
3+
}
4+
body {
5+
background: #202036;
6+
height: 100vh;
7+
}
8+
.container {
9+
margin-top: 30px;
10+
}
11+
12+
.half-width {
13+
height: 570px;
14+
background: #000324f6;
15+
padding: 30px;
16+
text-align: center;
17+
border-radius: 20px;
18+
box-shadow: 1px 2px 15px #000000;
19+
}
20+
.generate-btn{
21+
margin-top: 140px;
22+
width: 180px;
23+
padding: 50px;
24+
border-radius: 50%;
25+
border: 8px solid #89398c;
26+
background-color: #c349b9;
27+
color: #b8b8b8;
28+
font-weight: bold;
29+
font-size: 20px;
30+
text-align: center;
31+
}
32+
.generate-btn:focus{
33+
outline: none;
34+
box-shadow: none;
35+
}
36+
37+
input[type='text']{
38+
background-color: #3D4153;
39+
padding: 10px 0px;
40+
color: #ffffff;
41+
width: 80%;
42+
margin: 0 auto;
43+
border: 2px solid #858299;
44+
height: 50px;
45+
padding: 10px;
46+
}
47+
input[type='text']:focus {
48+
background-color: #3D4153;
49+
color: #fff;
50+
font-size: 20px;
51+
}
52+
.numbers {
53+
margin: 30px 0;
54+
}
55+
56+
.calc-typed {
57+
margin-top: 20px;
58+
font-size: 45px;
59+
text-align: right;
60+
color: #fff;
61+
}
62+
63+
.calc-button-row {
64+
width: 100%;
65+
}
66+
67+
.button {
68+
width: 20%;
69+
background: #425062;
70+
color: #fff;
71+
padding: 20px 0;
72+
margin: 5px;
73+
display: inline-block;
74+
font-size: 25px;
75+
text-align: center;
76+
vertical-align: middle;
77+
margin-right: -4px;
78+
border-radius: 10px;
79+
cursor: pointer;
80+
}
81+
.blink-me {
82+
color: #E0B612;
83+
}
84+
.submit-btn {
85+
border: none;
86+
margin-top: 20px;
87+
padding: 10px 120px;
88+
border-radius: 5px;
89+
background: #495BC3;
90+
color: #fff;
91+
}
92+
.notify {
93+
color: #fff;
94+
text-align: center;
95+
margin: 0 auto;
96+
background: #3a0202;
97+
box-shadow: 1px 2px 10px 3px #000000;
98+
margin-top: 40px;
99+
border-radius: 20px;
100+
padding: 20px;
101+
display: none;
102+
}
103+
.notify-section{
104+
width: 35%;
105+
margin: 0 auto;
106+
107+
}
108+
.action-left {
109+
color: #FF3C5F;
110+
margin-top: 10px;
111+
}

0 commit comments

Comments
 (0)