Skip to content

Added form validation #616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 23, 2025
Merged

Added form validation #616

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 109 additions & 83 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1999,107 +1999,133 @@ <h2 class="feedback-title text-center mb-3">Feedback & Reviews</h2>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"
defer></script>
<script>
// Logo switching functionality for dark mode
document.addEventListener('DOMContentLoaded', function () {
const logo = document.querySelector("#logo");

// Function to update logo based on theme
function updateLogo() {
const isDark = document.documentElement.getAttribute("data-bs-theme") === "dark";
if (isDark) {
logo.src = 'images/Logo.png';
} else {
logo.src = 'images/Logo_new.png';
document.addEventListener("DOMContentLoaded", function () {
/* ----------------------------
Logo Switching for Dark Mode
----------------------------- */
const logo = document.querySelector("#logo");

function updateLogo() {
const isDark = document.documentElement.getAttribute("data-bs-theme") === "dark";
logo.src = isDark ? "images/Logo.png" : "images/Logo_new.png";
}

// Initial update
updateLogo();

// Watch for theme changes
const observer = new MutationObserver(function (mutations) {
for (const mutation of mutations) {
if (mutation.type === "attributes" && mutation.attributeName === "data-bs-theme") {
updateLogo();
}
}
});

// Update logo when page loads
updateLogo();
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["data-bs-theme"],
});

// Watch for theme changes
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
updateLogo();
}
});
/* ----------------------------
Carousel Initialization
----------------------------- */
const carouselEl = document.getElementById("carouselExampleDark");
let carouselInstance = null;
if (carouselEl) {
carouselInstance = new bootstrap.Carousel(carouselEl, {
interval: 4000,
wrap: true,
});
}

observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-bs-theme']
// Custom next button
const customNextButton = document.getElementById("customNextButton");
if (customNextButton && carouselInstance) {
customNextButton.addEventListener("click", function () {
carouselInstance.next();
});
});
}

/* ----------------------------
Feedback Form Handling
----------------------------- */
const feedbackForm = document.getElementById("feedbackForm");
const successMessage = document.getElementById("successMessage");
const errorMessage = document.getElementById("errorMessage");

if (feedbackForm) {
feedbackForm.addEventListener("submit", function (event) {
event.preventDefault();

const name = document.getElementById("userName").value.trim();
const email = document.getElementById("userEmail").value.trim();
const feedback = document.getElementById("userFeedback").value.trim();

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!name || !email || !feedback) {
showError("⚠️ Please fill in all required fields.");
return;
}

if (!emailRegex.test(email)) {
showError("⚠️ Please enter a valid email address.");
return;
}

// JavaScript (custom carousel)
var myCarousel = new bootstrap.Carousel('#carouselExampleDark', {
interval: 4000, // auto-slide time
wrap: true // enables infinite loop
});
// SIMPLE FEEDBACK FUNCTIONS - FORM STAYS VISIBLE
function showSuccessMessage(event) {
event.preventDefault();

// Get form values
var name = document.getElementById('userName').value;
var email = document.getElementById('userEmail').value;
var feedback = document.getElementById('userFeedback').value;

// Check if all fields are filled
if (name && email && feedback) {
// Save to localStorage
var data = {
name: name,
email: email,
feedback: feedback,
timestamp: new Date().toISOString()
const data = {
name,
email,
feedback,
timestamp: new Date().toISOString(),
};
var feedbacks = JSON.parse(localStorage.getItem('growcraft_feedbacks') || '[]');

const feedbacks = JSON.parse(localStorage.getItem("growcraft_feedbacks") || "[]");
feedbacks.push(data);
localStorage.setItem('growcraft_feedbacks', JSON.stringify(feedbacks));

// KEEP FORM VISIBLE - Just show success message below
document.getElementById('successMessage').style.display = 'block';

// Reset form fields and hide success message after 4 seconds
setTimeout(function() {
document.getElementById('successMessage').style.display = 'none';
document.getElementById('feedbackForm').reset();
localStorage.setItem("growcraft_feedbacks", JSON.stringify(feedbacks));

// Show success message
showSuccess("✅ Feedback submitted successfully!");

// Reset after delay
setTimeout(function () {
feedbackForm.reset();
successMessage.style.display = "none";
if (errorMessage) errorMessage.style.display = "none";
}, 4000);

} else {
alert('Please fill all required fields!');
});
}

function showSuccess(msg) {
if (successMessage) {
successMessage.textContent = msg;
successMessage.style.display = "block";
}
if (errorMessage) {
errorMessage.style.display = "none";
}

return false;
}

function clearForm() {
document.getElementById('feedbackForm').reset();
document.getElementById('successMessage').style.display = 'none';

function showError(msg) {
if (errorMessage) {
errorMessage.textContent = msg;
errorMessage.style.display = "block";
}
if (successMessage) {
successMessage.style.display = "none";
}
}

</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
/* ----------------------------
Dynamic Year in Footer
----------------------------- */
const yearSpan = document.getElementById("currentYear");
yearSpan.textContent = new Date().getFullYear();
if (yearSpan) {
yearSpan.textContent = new Date().getFullYear();
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get the custom button and Bootstrap carousel
const customNextButton = document.getElementById('customNextButton');
const carousel = new bootstrap.Carousel(document.getElementById('carouselExampleDark'));

// Add click event to custom button
if (customNextButton) {
customNextButton.addEventListener('click', function() {
carousel.next(); // Go to next slide
});
}
});
</script>
</body>

Expand Down