bugFix for form submit firecrackers

index.html

@@ -760,7 +760,7 @@ <h2>Contact Me</h2>
 						<input type="email" placeholder="Your Email" name="user_email" required />
 						<textarea placeholder="Your Feedback/Message/Query" cols="30" rows="5" name="user_message" required></textarea>
 						<div class="m-justify-center">
-							<button class="styled-btn" type="submit">
+							<button class="styled-btn submit-btn" type="submit">
 								<span class="button-text color-black">Send Me</span>
 							</button>
 						</div>

scripts/dynamicallyLoadChunks.js

@@ -71,7 +71,4 @@ intersectionObserver('#project', () => {
 
 intersectionObserver('#contact', () => {
 	loadJs('scripts/emailjs.js');
-
-	const footerCanvas = document.querySelector('canvas#fireworksFooter');
-	createFooterFirework = getFirework(footerCanvas);
 });

scripts/emailjs.js

@@ -30,19 +30,22 @@
 			submitButton.disabled = true;
 
 			const emailCallback = (success = true) => {
+				let createFooterFirework = () => {};
+				if (getFirework) {
+					const footerFireworkCanvas = document.querySelector('canvas#fireworksFooter');
+					createFooterFirework = getFirework(footerFireworkCanvas);
+				}
 				if (success) {
-					emailCallback(true);
-					document.querySelector('section#home').addEventListener('click', () => {
-						setTimeout(createHomeFirework, 0);
-						setTimeout(createHomeFirework, 100);
-						setTimeout(createHomeFirework, 200);
-					});
+						setTimeout(createFooterFirework, 0);
+						setTimeout(createFooterFirework, 100);
+						setTimeout(createFooterFirework, 200);
 				}
 				form.classList.remove('loading');
 				buttonTextElement.innerText = success ? 'Sent ✅' : 'Failed ❌';
 				setTimeout(() => {
 					buttonTextElement.innerText = 'Send Me';
 					submitButton.disabled = false;
+					form.reset();
 				}, 2000);
 			};
 

styles/style.css

@@ -105,6 +105,10 @@ section .text-content {
 		box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4);
 	}
 }
+.styled-btn.submit-btn:hover {
+	transform: none;
+	cursor: pointer;
+}
 .color-black, a.color-black {
 	text-decoration: none;
 	color: var(--primary-bg-color);