neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-19 23:59:35 +05:30
Code Issues Wiki Activity

(feat): added basic form validation and alert messages

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-12-10 00:54:11 +05:30
parent 73e2000b73
commit e1ceda1f08
4 changed files with 146 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
htdocs/assets/js/contactform-config.js Normal file
View File

@@ -0,0 +1,49 @@
//--- controls contact form submission
const contactForm = document.getElementById("contactForm");
const nameInput = document.getElementById("contactNameInput");
const emailInput = document.getElementById("contactEmailInput");
const messageInput = document.getElementById("contactMessageInput");
const recaptcha = document.getElementById("recaptcha");
const sendBtn = document.getElementById("contactSendButton");
$(document).ready(function() {
$(contactForm).submit(function(event) {
event.preventDefault();
let name = nameInput.value;
let email = emailInput.value;
let message = emailInput.value;
let recaptchaValue = grecaptcha.getResponse();
if(name !== "" && email !== "" && message !== "") {
if(recaptchaValue !== "") {
}
else {
show_alert("Please check-in reCaptcha", "info")
}
}
else {
show_alert("Please fill-up all the fields", "info");
}
});
});
function show_alert(alertMessage, alertType = "default") {
if(alertType === "success"){
alertMessage = "<div class='p-3 w-full bg-[rgba(22,_163,_74,_0.2)] border-l-[7px] border-[rgb(22,_163,_74)] rounded mt-1 text-sm'><i class='fa-solid fa-circle-check text-[rgb(22,_163,_74)] mr-2 text-base'></i>" + alertMessage + "</div>"
}
else if (alertType === "info") {
alertMessage = "<div class='p-3 w-full bg-[rgba(249,_115,_22,_0.2)] border-l-[7px] border-[rgb(249,_115,_22)] rounded mt-1 text-sm'><i class='fa-solid fa-triangle-exclamation text-[rgb(249,_115,_22)] mr-2 text-base'></i>" + alertMessage + "</div>"
}
else if (alertType === "danger") {
alertMessage = "<div class='p-3 w-full bg-[rgba(255,_29,_72,_0.2)] border-l-[7px] border-[rgb(255,_29,_72)] rounded mt-1 text-sm'><i class='fa-solid fa-circle-exclamation text-[rgb(255,_29,_72)] mr-2 text-base'></i>" + alertMessage + "</div>"
}
$('#contactAlert').html(alertMessage).fadeIn();
setTimeout(function() {
$("#contactAlert").fadeOut();
}, 9000);
}

89
htdocs/assets/style.css
View File

@@ -1275,6 +1275,10 @@ video {
border-top-width: 5px;
}
.border-l-\[7px\] {
border-left-width: 7px;
}
.border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
border-color: rgba(255, 255, 255, 0.15);
}
@@ -1302,6 +1306,21 @@ video {
border-color: rgb(217 217 217 / var(--tw-border-opacity));
}
.border-\[rgb\(249\2c _115\2c _22\)\] {
--tw-border-opacity: 1;
border-color: rgb(249 115 22 / var(--tw-border-opacity));
}
.border-\[rgb\(255\2c _29\2c _72\)\] {
--tw-border-opacity: 1;
border-color: rgb(255 29 72 / var(--tw-border-opacity));
}
.border-\[rgb\(22\2c _163\2c _74\)\] {
--tw-border-opacity: 1;
border-color: rgb(22 163 74 / var(--tw-border-opacity));
}
.border-l-accent_primary {
--tw-border-opacity: 1;
border-left-color: rgb(56 189 248 / var(--tw-border-opacity));
@@ -1345,6 +1364,56 @@ video {
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
.bg-\[rgb\(249\2c _115\2c _22\)\] {
--tw-bg-opacity: 1;
background-color: rgb(249 115 22 / var(--tw-bg-opacity));
}
.bg-\[rgb\(254\2c _215\2c _170\)\] {
--tw-bg-opacity: 1;
background-color: rgb(254 215 170 / var(--tw-bg-opacity));
}
.bg-\[rgb\(249\2c _115\2c _22\2c _0\.3\)\] {
background-color: rgb(249, 115, 22, 0.3);
}
.bg-\[rgb\(255\2c _29\2c _72\2c _0\.3\)\] {
background-color: rgb(255, 29, 72, 0.3);
}
.bg-accent_primary_transparent {
background-color: rgba(56, 189, 248, 0.30);
}
.bg-\[rgb\(22\2c _163\2c _74\2c _0\.3\)\] {
background-color: rgb(22, 163, 74, 0.3);
}
.bg-\[rgb\(255\2c _29\2c _72\2c _0\.2\)\] {
background-color: rgb(255, 29, 72, 0.2);
}
.bg-\[rgb\(22\2c _163\2c _74\2c _0\.2\)\] {
background-color: rgb(22, 163, 74, 0.2);
}
.bg-\[rgb\(249\2c _115\2c _22\2c _0\.2\)\] {
background-color: rgb(249, 115, 22, 0.2);
}
.bg-\[rgba\(22\2c _163\2c _74\2c _0\.2\)\] {
background-color: rgba(22, 163, 74, 0.2);
}
.bg-\[rgba\(249\2c _115\2c _22\2c _0\.2\)\] {
background-color: rgba(249, 115, 22, 0.2);
}
.bg-\[rgba\(255\2c _29\2c _72\2c _0\.2\)\] {
background-color: rgba(255, 29, 72, 0.2);
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
@@ -1576,6 +1645,26 @@ video {
color: rgb(30 41 59 / var(--tw-text-opacity));
}
.text-\[rgb\(234\2c _88\2c _12\)\] {
--tw-text-opacity: 1;
color: rgb(234 88 12 / var(--tw-text-opacity));
}
.text-\[rgb\(249\2c _115\2c _22\)\] {
--tw-text-opacity: 1;
color: rgb(249 115 22 / var(--tw-text-opacity));
}
.text-\[rgb\(255\2c _29\2c _72\)\] {
--tw-text-opacity: 1;
color: rgb(255 29 72 / var(--tw-text-opacity));
}
.text-\[rgb\(22\2c _163\2c _74\)\] {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
.caret-accent_primary {
caret-color: #38BDF8;
}