From d52a69a7bc839382dca7136777a92b431d5480c4 Mon Sep 17 00:00:00 2001 From: Praise Freedom Dike Date: Sat, 29 Jun 2024 02:17:37 +0100 Subject: [PATCH] Update script.js to add new functionality and fix bugs --- quote.html | 1 + script.js | 114 ++++++++++++++++++++++++++--------------------------- 2 files changed, 58 insertions(+), 57 deletions(-) diff --git a/quote.html b/quote.html index 800186e..ebf2d65 100644 --- a/quote.html +++ b/quote.html @@ -182,6 +182,7 @@

Result:

+ \ No newline at end of file diff --git a/script.js b/script.js index 45d5988..396ebee 100644 --- a/script.js +++ b/script.js @@ -7,7 +7,6 @@ function openOrderForm(productName, productImageSrc) { orderFormSection.scrollIntoView({ behavior: "smooth" }); } - function scrollToInstallmentalPlan() { const installmentalPaymentSection = document.getElementById( "installmentalPaymentSection" @@ -16,7 +15,6 @@ function scrollToInstallmentalPlan() { installmentalPaymentSection.scrollIntoView({ behavior: "smooth" }); } - function openProductImagePopup(imageSrc) { const popup = document.getElementById("productImagePopup"); const image = document.getElementById("popupImage"); @@ -24,12 +22,10 @@ function openProductImagePopup(imageSrc) { popup.style.display = "block"; } - function closeProductImagePopup() { document.getElementById("productImagePopup").style.display = "none"; } - document.addEventListener("DOMContentLoaded", function () { const orderButtons = document.querySelectorAll(".order-button"); const orderCovers = document.querySelectorAll(".object-cover"); @@ -61,7 +57,6 @@ document.addEventListener("DOMContentLoaded", function () { }); }); - // to open the product image popup when the order cover is clicked orderCovers.forEach(function (cover) { cover.addEventListener("click", function () { @@ -70,7 +65,7 @@ document.addEventListener("DOMContentLoaded", function () { }); }); -// capture order and send to whatsapp + // capture order and send to whatsapp const orderForm = document.getElementById("orderForm"); orderForm.addEventListener("submit", function (event) { event.preventDefault(); @@ -105,73 +100,78 @@ document.addEventListener("DOMContentLoaded", function () { }); }); +// mobile menu +const mobileMenuButton = document.querySelector(".mobile-menu-button"); +const mobileMenu = document.querySelector(".mobile-menu"); + +mobileMenuButton.addEventListener("click", () => { + mobileMenu.classList.toggle("hidden"); +}); // slides let slideIndex = 1; showSlide(slideIndex); // change slide with the prev/next button function moveSlide(moveStep) { - showSlide(slideIndex += moveStep); - } + showSlide((slideIndex += moveStep)); +} function showSlide(n) { let i; const slides = document.getElementsByClassName("slide"); - const dots = document.getElementsByClassName('dot'); - - if (n > slides.length) { slideIndex = 1 } - if (n < 1) { slideIndex = slides.length } - // hide all slides - for (i = 0; i < slides.length; i++) { - slides[i].classList.add('hidden'); - } - // remove the active class from all dots - for (i = 0; i < dots.length; i++) { - dots[i].classList.remove('active'); - } - - slides[slideIndex - 1].classList.remove('hidden'); - slides[slideIndex - 1].style.animation = 'slideRight 1s forwards'; - - }; - - setInterval(() => { - moveSlide(1); - }, 5000); - - - - // toggle visibility of paragraphs when clicking on Font Awesome icons - document.addEventListener('DOMContentLoaded', function() { - const icons = document.querySelectorAll('.fa-plus-circle'); - - icons.forEach(icon => { - icon.addEventListener('click', function() { - const paragraph = this.parentElement.nextElementSibling; - paragraph.classList.toggle('hidden'); - this.classList.toggle('fa-minus-circle'); - - }); + const dots = document.getElementsByClassName("dot"); + + if (n > slides.length) { + slideIndex = 1; + } + if (n < 1) { + slideIndex = slides.length; + } + // hide all slides + for (i = 0; i < slides.length; i++) { + slides[i].classList.add("hidden"); + } + // remove the active class from all dots + for (i = 0; i < dots.length; i++) { + dots[i].classList.remove("active"); + } + + slides[slideIndex - 1].classList.remove("hidden"); + slides[slideIndex - 1].style.animation = "slideRight 1s forwards"; +} + +setInterval(() => { + moveSlide(1); +}, 5000); + +// toggle visibility of paragraphs when clicking on Font Awesome icons +document.addEventListener("DOMContentLoaded", function () { + const icons = document.querySelectorAll(".fa-plus-circle"); + + icons.forEach((icon) => { + icon.addEventListener("click", function () { + const paragraph = this.parentElement.nextElementSibling; + paragraph.classList.toggle("hidden"); + this.classList.toggle("fa-minus-circle"); }); + }); }); +const contactForm = document.getElementById("contactForm"); +contactForm.addEventListener("submit", (event) => { + event.preventDefault(); // Prevent default form submission + const name = document.getElementById("name").value; + const number = document.getElementById("number").value; + const subject = document.getElementById("subject").value; + const message = document.getElementById("message").value; -const contactForm = document.getElementById('contactForm'); - contactForm.addEventListener('submit', (event) => { - event.preventDefault(); // Prevent default form submission - const name = document.getElementById('name').value; - const number = document.getElementById('number').value; - const subject = document.getElementById('subject').value; - const message = document.getElementById('message').value; - - const contactMessage = `Contact Details: + const contactMessage = `Contact Details: Name: ${name} Phone Number: ${number} Subject: ${subject} Message: ${message}`; - const encodedMessage = encodeURIComponent(contactMessage); - const whatsappURL = `https://wa.me/2348120691079/?text=${encodedMessage}`; - window.location.href = whatsappURL; - } - ); \ No newline at end of file + const encodedMessage = encodeURIComponent(contactMessage); + const whatsappURL = `https://wa.me/2348120691079/?text=${encodedMessage}`; + window.location.href = whatsappURL; +});