Skip to content

Commit 894a4ac

Browse files
sanajitjanasanajitjana
committed
Add email validation API
1 parent 387cc5b commit 894a4ac

File tree

3 files changed

+72
-62
lines changed

3 files changed

+72
-62
lines changed

‎index.html

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1085,22 +1085,6 @@ <h3 class="contact__title">GitHub</h3>
10851085
</div>
10861086
</div>
10871087

1088-
<div class="contact__information">
1089-
<i class="uil uil-phone-alt contact__icon"></i>
1090-
1091-
<div>
1092-
<a
1093-
class="hover-underline"
1094-
href="tel:+91 8372876775"
1095-
style="color: #6a797c"
1096-
title="click to make a call"
1097-
>
1098-
<h3 class="contact__title">Call me</h3>
1099-
<span class="contatc__subtitle">+91 8372876775</span>
1100-
</a>
1101-
</div>
1102-
</div>
1103-
11041088
<div class="contact__information">
11051089
<i class="uil uil-envelope contact__icon"></i>
11061090
<div>
@@ -1126,7 +1110,6 @@ <h3 class="contact__title">E-mail</h3>
11261110
<label for="" class="contact__label">Name</label>
11271111
<input type="text" class="contact__input" id="name" required />
11281112
</div>
1129-
11301113
<div class="contact__content">
11311114
<label for="" class="contact__label">E-mail</label>
11321115
<input
@@ -1143,8 +1126,6 @@ <h3 class="contact__title">E-mail</h3>
11431126
<textarea
11441127
required
11451128
id="message"
1146-
cols="0"
1147-
rows="7"
11481129
class="contact__input"
11491130
title="Please fill out the this field."
11501131
></textarea>
@@ -1154,8 +1135,8 @@ <h3 class="contact__title">E-mail</h3>
11541135
style="font-size: 12px; margin-top: -15px"
11551136
title="Put your mail only"
11561137
>
1157-
<span style="color: #57c9e0">* </span> You will get a confirmation
1158-
mail after sending the message.
1138+
<span style="color: #57c9e0">* </span> You'll get a confirmation
1139+
email after sending.
11591140
</p>
11601141
<div>
11611142
<button
@@ -1166,10 +1147,12 @@ <h3 class="contact__title">E-mail</h3>
11661147
border: none;
11671148
cursor: pointer;
11681149
font-size: 16px;
1150+
font-weight: 500;
1151+
font-family: Poppins, sans-serif;
11691152
"
11701153
title="Send message"
11711154
>
1172-
Send message
1155+
Send Message
11731156
<i class="uil uil-message button__icon"></i>
11741157
</button>
11751158
</div>

‎packages/css/styles.css

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -853,7 +853,6 @@ textarea {
853853
border: none;
854854
outline: none;
855855
background: hsla(260, 100%, 44%, 0.1);
856-
margin-bottom: 1rem;
857856
color: var(--text-color);
858857
}
859858
form input::placeholder,
@@ -904,11 +903,11 @@ form textarea {
904903
color: var(--text-color-light);
905904
}
906905

907-
.contact__content {
906+
/* .contact__content {
908907
background-color: var(--input-color);
909908
border-radius: 0.5rem;
910909
padding: 0.75rem 1rem 0.25rem;
911-
}
910+
} */
912911

913912
.contact__label {
914913
font-size: var(--smaller-font-size);
@@ -923,7 +922,7 @@ form textarea {
923922
font-size: var(--normal-font-size);
924923
border: none;
925924
outline: none;
926-
padding: 0.25rem 0.5rem 0.5rem 0;
925+
padding: 0.5rem;
927926
}
928927

929928
/*==================== FOOTER ====================*/

‎packages/js/main.js

Lines changed: 64 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -125,49 +125,77 @@ function preLoader() {
125125
preloader.style.display = "none";
126126
}
127127

128+
/*==================== END EMAIL VIA emailJs ====================*/
129+
const sendEmail = (params) => {
130+
const serviceID = "service_embce24";
131+
const templateID = "template_cci0niw";
132+
133+
emailjs
134+
.send(serviceID, templateID, params)
135+
.then((res) => {
136+
document.getElementById("name").value = "";
137+
document.getElementById("email").value = "";
138+
document.getElementById("message").value = "";
139+
140+
document.getElementById("email-submit").innerHTML = `
141+
Send message
142+
<i class="uil uil-message button__icon"></i>`;
143+
144+
alert("Your message send susscessfully!");
145+
return;
146+
})
147+
.catch((err) => {
148+
document.getElementById("email-submit").innerHTML = `
149+
Send message
150+
<i class="uil uil-message button__icon"></i>`;
151+
console.error(err);
152+
});
153+
};
154+
155+
/*==================== EMAIL VALIDATION API ====================*/
156+
const validateEmail = (email, params) => {
157+
const apiKey = "cf7383198f5a4c8a8b282a00c50dd08b";
158+
const apiUrl = `https://emailvalidation.abstractapi.com/v1/?api_key=${apiKey}&email=${encodeURIComponent(
159+
email
160+
)}`;
161+
162+
fetch(apiUrl)
163+
.then((response) => response.json())
164+
.then((data) => {
165+
if (data.deliverability == "DELIVERABLE") sendEmail(params);
166+
else {
167+
alert("Invalid email address");
168+
document.getElementById("email-submit").innerHTML = `
169+
Send message
170+
<i class="uil uil-message button__icon"></i>`;
171+
}
172+
})
173+
.catch((error) => {
174+
console.error(error);
175+
sendEmail(params);
176+
});
177+
};
178+
128179
/*==================== FORM SUBMIT ====================*/
129180
document.getElementById("contact-form").addEventListener("submit", (e) => {
130181
e.preventDefault();
131182

132-
//button animation
133-
document.getElementById("email-submit").innerText = "Sending...";
183+
const name = document.getElementById("name").value;
184+
const email = document.getElementById("email").value;
185+
const message = document.getElementById("message").value;
134186

135-
if (
136-
document.getElementById("name").value != "" &&
137-
document.getElementById("email").value != "" &&
138-
document.getElementById("message").value != ""
139-
) {
140-
let params = {
141-
name: document.getElementById("name").value,
142-
email: document.getElementById("email").value,
143-
message: document.getElementById("message").value,
144-
};
145-
146-
const serviceID = "service_embce24";
147-
const templateID = "template_cci0niw";
148-
149-
emailjs
150-
.send(serviceID, templateID, params)
151-
.then((res) => {
152-
document.getElementById("name").value = "";
153-
document.getElementById("email").value = "";
154-
document.getElementById("message").value = "";
187+
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
188+
const isEmail = emailRegex.test(email);
155189

156-
document.getElementById("email-submit").innerHTML = `
157-
Send message
158-
<i class="uil uil-message button__icon"></i>`;
159-
160-
alert("Your message send susscessfully!");
161-
})
162-
.catch((err) => {
163-
document.getElementById("email-submit").innerHTML = `
164-
Send message
165-
<i class="uil uil-message button__icon"></i>`;
166-
console.log(err);
167-
});
168-
} else {
169-
alert("Please fill out all the fields");
190+
//validate email
191+
if (!isEmail) {
192+
alert("Invalid email address");
193+
return 0;
170194
}
195+
196+
const params = { name: name, email: email, message: message };
197+
document.getElementById("email-submit").innerText = "Sending...";
198+
validateEmail(email, params);
171199
});
172200

173201
/*==================== GITHUB CALENDAR ====================*/

0 commit comments

Comments
 (0)