Skip to content

Commit 393a5dc

Browse files
Parv-gugnaniParv-gugnani
committed
update
1 parent 4ce9b45 commit 393a5dc

File tree

4 files changed

+546
-0
lines changed

4 files changed

+546
-0
lines changed

‎Pincode Generator/img/favicon.ico‎

708 Bytes
Binary file not shown.

‎Pincode Generator/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>Pincode Generator</title>
7+
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
8+
<link rel="stylesheet" href="style.css" />
9+
<script src="script.js" defer></script>
10+
</head>
11+
<body>
12+
<section id="pincodeSection"></section>
13+
14+
<script type="text/javascript" src="use your script"></script>
15+
<script type="text/javascript">
16+
(function () {
17+
emailjs.init("your id");
18+
})();
19+
</script>
20+
</body>
21+
</html>

‎Pincode Generator/script.js‎

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
const serviceId = "gmail_004";
2+
const templateId = "pincode_generator_004";
3+
4+
const pincodeSectionEl = document.getElementById("pincodeSection");
5+
6+
class PinCode {
7+
/**
8+
*
9+
* @param {html element} parentDOM
10+
* @param {string} authorName
11+
* @param {string} serviceId
12+
* @param {string} templateId
13+
* @param {number} digit
14+
* @param {number} timeLimit
15+
* @returns {object}
16+
*/
17+
constructor(parentDOM, authorName, serviceId, templateId, digit, timeLimit) {
18+
this.parentDOM = parentDOM;
19+
this.authorName = authorName;
20+
this.digit = digit;
21+
this.serviceId = serviceId;
22+
this.templateId = templateId;
23+
this.globalSeconds = parseInt(timeLimit) || 120;
24+
25+
this.userName = null;
26+
this.userEmail = null;
27+
28+
this.currentPinCode = null;
29+
this.isPinCodeSent = false;
30+
this.intervalId = null;
31+
32+
this.DOMHandler();
33+
}
34+
35+
DOMHandler() {
36+
const containerEl = document.createElement("div");
37+
containerEl.setAttribute("class", "container");
38+
containerEl.innerHTML = `
39+
<div class="heading">
40+
<h1>
41+
wanna get a brand new pincode? provide your email below
42+
👇
43+
</h1>
44+
</div>
45+
<div id="formContainer" class="form">
46+
<input
47+
id="usernameField"
48+
type="text"
49+
placeholder="Enter your username..."
50+
autocomplete="off"
51+
/>
52+
<input
53+
id="emailField"
54+
type="text"
55+
placeholder="Enter your email address..."
56+
autocomplete="off"
57+
/>
58+
<input id="btnSubmit" type="submit" value="Submit" />
59+
<p id="formAlert"></p>
60+
</div>
61+
<div id="loader">
62+
<div class="spinner">
63+
<div class="round1"></div>
64+
<div class="round2"></div>
65+
<div class="round3"></div>
66+
</div>
67+
</div>
68+
<div class="authorText">
69+
<p>
70+
build with by
71+
<a target="_blank" href=""
72+
>Parv gugnani</a
73+
>
74+
</p>
75+
</div>
76+
`;
77+
this.parentDOM.appendChild(containerEl);
78+
79+
const headingH1 = document.querySelector(".heading h1");
80+
const formContainerEl = document.getElementById("formContainer");
81+
const emailField = document.getElementById("emailField");
82+
const usernameField = document.getElementById("usernameField");
83+
const btnSubmit = document.getElementById("btnSubmit");
84+
const formAlertEl = document.getElementById("formAlert");
85+
const loaderEl = document.getElementById("loader");
86+
87+
this.DOMObj = {
88+
headingH1,
89+
formContainerEl,
90+
usernameField,
91+
emailField,
92+
btnSubmit,
93+
formAlertEl,
94+
loaderEl,
95+
};
96+
97+
btnSubmit.addEventListener("click", this.btnSubmitHandler.bind(this));
98+
}
99+
100+
async btnSubmitHandler() {
101+
try {
102+
if (!this.isPinCodeSent) {
103+
let clickedStatus = 1;
104+
let usernameAndEmailCurrentValue = await this.inputAuthentication.call(
105+
this,
106+
clickedStatus
107+
);
108+
if (usernameAndEmailCurrentValue) {
109+
this.userName = usernameAndEmailCurrentValue.username.call(this);
110+
this.userEmail = usernameAndEmailCurrentValue.email;
111+
this.pincodeGenerate.call(this);
112+
this.DOMObj.headingH1.textContent =
113+
"A pin code will be sent to your email very soon.";
114+
this.DOMObj.formContainerEl.style.display = "none";
115+
this.DOMObj.loaderEl.style.display = "block";
116+
let sendingEmailResponse = await this.sendEmail.call(this);
117+
if (sendingEmailResponse) {
118+
this.isPinCodeSent = true;
119+
this.DOMObj.formContainerEl.style.display = "flex";
120+
this.DOMObj.loaderEl.style.display = "none";
121+
this.DOMObj.headingH1.innerHTML = `
122+
a Pincode was sent in your email. this will be invalid after <span id="timerSpan">0 second</span>.
123+
`;
124+
this.DOMObj.emailField.value = "";
125+
this.DOMObj.usernameField.remove();
126+
this.DOMObj.emailField.setAttribute(
127+
"placeholder",
128+
"Enter your pincode..."
129+
);
130+
this.startTimer.call(this);
131+
this.DOMObj.btnSubmit.addEventListener("click", async () => {
132+
clickedStatus = 2;
133+
let authenticationResponse = await this.inputAuthentication.call(
134+
this,
135+
clickedStatus
136+
);
137+
if (authenticationResponse) {
138+
if (
139+
parseInt(authenticationResponse.inputedPincode) ===
140+
this.currentPinCode
141+
) {
142+
if (this.globalSeconds > 0) {
143+
this.stopTimer.call(this);
144+
this.DOMObj.formContainerEl.remove();
145+
this.DOMObj.headingH1.textContent =
146+
"Congratulations! a secret door is opening for you.";
147+
} else {
148+
this.DOMObj.formAlertEl.textContent =
149+
"This pincode is now invalid!";
150+
}
151+
} else {
152+
this.DOMObj.formAlertEl.textContent =
153+
"Oops! pincode don't match. try again.";
154+
}
155+
}
156+
});
157+
} else {
158+
this.DOMObj.headingH1.textContent = `There is an error to send your email. please try again later.`;
159+
throw "There is an error found on Email sending...";
160+
}
161+
}
162+
}
163+
} catch (err) {
164+
console.log(err);
165+
}
166+
}
167+
168+
/**
169+
*
170+
* @param {number} clickedStatus
171+
* @returns {<Promise>} -
172+
*/
173+
async inputAuthentication(clickedStatus) {
174+
try {
175+
if (clickedStatus === 1) {
176+
if (
177+
this.DOMObj.emailField.value !== "" &&
178+
this.DOMObj.usernameField.value !== ""
179+
) {
180+
if (this.DOMObj.emailField.value.includes("@")) {
181+
this.DOMObj.formAlertEl.textContent = "";
182+
throw {
183+
username: function () {
184+
let splittedValue = this.DOMObj.usernameField.value.split(" ");
185+
let username = "";
186+
splittedValue.forEach((el) => {
187+
username += `${el.charAt(0).toUpperCase()}${el
188+
.slice(1)
189+
.toLowerCase()} `;
190+
});
191+
return username.trimEnd();
192+
},
193+
email: this.DOMObj.emailField.value,
194+
};
195+
} else {
196+
this.DOMObj.formAlertEl.textContent = "Email must be contains @";
197+
}
198+
} else {
199+
this.DOMObj.formAlertEl.textContent =
200+
"Username & Email field cannot be empty!";
201+
}
202+
} else if (clickedStatus === 2) {
203+
if (this.DOMObj.emailField.value !== "") {
204+
this.DOMObj.formAlertEl.textContent = "";
205+
throw {
206+
inputedPincode: this.DOMObj.emailField.value,
207+
};
208+
} else {
209+
this.DOMObj.formAlertEl.textContent =
210+
"pincode field cannot be empty.";
211+
}
212+
}
213+
} catch (err) {
214+
return err;
215+
}
216+
}
217+
218+
async pincodeGenerate() {
219+
let max = "";
220+
let min = "1";
221+
for (let i = 1; i <= this.digit; i++) {
222+
max += "9";
223+
if (i !== this.digit) {
224+
min += "0";
225+
}
226+
}
227+
max = parseInt(max);
228+
min = parseInt(min);
229+
this.currentPinCode = Math.floor(Math.random() * (max - min) + min);
230+
}
231+
232+
async sendEmail() {
233+
try {
234+
const allParams = {
235+
author_name: this.authorName,
236+
user_name: this.userName,
237+
user_email: this.userEmail,
238+
pin_code: this.currentPinCode,
239+
};
240+
await emailjs
241+
.send(this.serviceId, this.templateId, allParams)
242+
.then((res) => {
243+
console.log(`Success: ${res.status}`);
244+
throw { status: res.status, allParams };
245+
});
246+
} catch (err) {
247+
return err.status;
248+
}
249+
}
250+
251+
startTimer() {
252+
this.intervalId = setInterval(() => {
253+
if (this.globalSeconds > 0) {
254+
this.globalSeconds--;
255+
let timeRecords = {
256+
seconds: this.globalSeconds,
257+
};
258+
this.updateDisplay.call(this, timeRecords);
259+
} else {
260+
this.stopTimer.call(this);
261+
}
262+
}, 1000);
263+
}
264+
265+
stopTimer() {
266+
clearInterval(this.intervalId);
267+
}
268+
269+
/**
270+
*
271+
* @param {object} timeRecords
272+
*/
273+
updateDisplay(timeRecords) {
274+
document.querySelector("#timerSpan").textContent =
275+
timeRecords.seconds < 10
276+
? `0${timeRecords.seconds} second`
277+
: `${timeRecords.seconds} seconds`;
278+
}
279+
}
280+
281+
const test1 = new PinCode(
282+
pincodeSectionEl,
283+
"Parv gugnani",
284+
serviceId,
285+
templateId,
286+
4,
287+
120
288+
);

0 commit comments

Comments
 (0)