diff --git a/Product-view.html b/Product-view.html index 9b4547e3..fccecbce 100644 --- a/Product-view.html +++ b/Product-view.html @@ -5,26 +5,27 @@ Product Quick View +
- Product -
- - -
-
-
-

Useful links

-
+
+

© 2024 IcyCo. All Rights Reserved.

+
+ + + + + + + + + + - - - -
- © by DharshiB | All Rights Reserved -
- - - - - - - - \ No newline at end of file diff --git a/contributor.html b/contributor.html index a2e053de..ed2db29c 100644 --- a/contributor.html +++ b/contributor.html @@ -5,15 +5,10 @@ ICYCO - Contributors - - - - - - - - - + + + + - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
+ + + + + +
- -
+ + + +

Your Cart

-
-
    -
-
-
Sub Total: $0
- -
- +
    +
    +
    Sub Total: $0
    + +
    -
    - Delicious Ice Cream + Empty Cart

    Your cart is empty!

    -

    As a cone without ice cream!🍦

    +

    As a cone without ice cream! 🍦

    Fill it up with our delicious flavors!

    +
    -
    @@ -163,143 +135,57 @@

    Our Contributors

    - - -
    -
    -
    -

    Useful links

    - -
    - -
    -

    Opening Hours

    - -

    Locations

    - -
    -
    -

    Need Help?

    - -

    Follow Us

    - -
    -
    -

    Newsletter

    -

    - Subscribe to our newsletter for a weekly dose - of news, updates, helpful tips, and - exclusive offers. -

    -
    - - -
    -
    +
    - -
    - © 2024 by DharshiB | All Rights Reserved -
    - - - - - - +

    © 2023 IcyCo | All rights reserved.

    + + diff --git a/login.html b/login.html index 3f375f69..e9f938f6 100644 --- a/login.html +++ b/login.html @@ -10,36 +10,30 @@ - - - + - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    + + + + + + + + + + + + + + + + + -
    +
    @@ -52,50 +46,46 @@
    - +
    - - - + -

    Login to IcyCo

    +

    Login to IcyCo

    -
    -
    - +
    -
    +
    - - Remember me + +
    Forgot your password?
    +
    -
    - Don't have an account?Create account + Don't have an account? + Create account
    +
    @@ -103,16 +93,16 @@

    Login to IcyCo

    + - - \ No newline at end of file + diff --git a/pagenotfound.html b/pagenotfound.html index 1766b817..29f9d188 100644 --- a/pagenotfound.html +++ b/pagenotfound.html @@ -1,18 +1,18 @@ - + 404 Page Not Found - - + +
    -

    404

    -

    - Oops! The page you're looking for doesn't exist. -

    - Go back to Home +

    404

    +

    + Oops! The page you're looking for doesn't exist. +

    + Go back to Home
    - + diff --git a/script/FAQ.js b/script/FAQ.js index 9dd662cd..56c6b150 100644 --- a/script/FAQ.js +++ b/script/FAQ.js @@ -1,5 +1,5 @@ var acc = document.getElementsByClassName("FAQ-questions"); -let answer = false; + for (let index = 0; index < acc.length; index++) { acc[index].addEventListener("click", () => { showfaq(index); @@ -12,16 +12,17 @@ function showfaq(index) { const icons = document.querySelectorAll(".FAQ-questions i"); const icon = icons[index]; - + + // Toggle the active class for the clicked answer if (answer.classList.contains("active")) { - answer.classList.remove("active"); - icon.style.transform = "rotate(0deg)"; // Reset the icon rotation when closed + answer.classList.remove("active"); + icon.style.transform = "rotate(0deg)"; // Reset the icon rotation when closed } else { // Close all other open answers for (let i = 0; i < answers.length; i++) { if (i !== index) { - answers[i].classList.remove("active"); - icons[i].style.transform = "rotate(0deg)"; + answers[i].classList.remove("active"); + icons[i].style.transform = "rotate(0deg)"; // Reset rotation for other icons } } // Open the clicked answer diff --git a/script/cart.js b/script/cart.js index e2c17687..530f4b61 100644 --- a/script/cart.js +++ b/script/cart.js @@ -2,18 +2,25 @@ const cartIcon = document.querySelector(".cart-icon"); const cart = document.querySelector(".cart"); const close = document.querySelector(".close-cart"); +// Toggle cart visibility when the cart icon is clicked cartIcon.addEventListener("click", () => { - if (cart.classList.contains("active")) { + cart.classList.toggle("active"); +}); + +// Close the cart when the close button is clicked +if (close) { + close.addEventListener("click", () => { cart.classList.remove("active"); - } - else { - cart.classList.add("active"); - } -}) - -close?.addEventListener("click", () => { - cart.classList.remove("active"); -}) + }); +} + + + + + + + + diff --git a/script/catering.js b/script/catering.js index 39694549..eff77cde 100644 --- a/script/catering.js +++ b/script/catering.js @@ -1,3 +1,3 @@ const today = new Date(); -const yesterday = new Date(today.setDate(today.getDate())).toISOString().split('T')[0]; -document.getElementById('dateInput').setAttribute('min', yesterday); \ No newline at end of file +const yesterday = new Date(today.setDate(today.getDate() - 1)).toISOString().split('T')[0]; +document.getElementById('dateInput').setAttribute('min', yesterday); diff --git a/script/contact.js b/script/contact.js index 885d3cc8..59822f0f 100644 --- a/script/contact.js +++ b/script/contact.js @@ -7,51 +7,68 @@ const message = document.getElementById("message"); const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; const phoneRegex = /^[0-9]{10}$/; -contactForm?.addEventListener("submit", (e)=> { +contactForm?.addEventListener("submit", (e) => { e.preventDefault(); let isValid = true; + // First name validation if (firstname.value.trim() === "") { setError(firstname, "First name is required!"); isValid = false; } else if (/[^a-zA-Z]/.test(firstname.value.trim())) { - setError(firstname, "Only letters are allowed in first name!"); + setError(firstname, "Only letters are allowed in the first name!"); isValid = false; + } else { + clearError(firstname); // Clear error if valid } + // Last name validation if (lastname.value.trim() === "") { setError(lastname, "Last name is required!"); isValid = false; } else if (/[^a-zA-Z]/.test(lastname.value.trim())) { - setError(lastname, "Only letters are allowed in last name!"); + setError(lastname, "Only letters are allowed in the last name!"); isValid = false; + } else { + clearError(lastname); // Clear error if valid } - + + // Email validation if (email.value.trim() === "") { setError(email, "Email is required!"); isValid = false; - } - else if (!emailRegex.test(email.value.trim())){ + } else if (!emailRegex.test(email.value.trim())) { setError(email, "Invalid email format!"); isValid = false; + } else { + clearError(email); // Clear error if valid } + + // Phone validation if (phone.value.trim() === "") { setError(phone, "Phone number is required!"); isValid = false; - } - else if (!phoneRegex.test(phone.value.trim())){ - setError(phone, "Contact number must have exactly 10 digits"); + } else if (!phoneRegex.test(phone.value.trim())) { + setError(phone, "Contact number must have exactly 10 digits!"); isValid = false; + } else { + clearError(phone); // Clear error if valid } + + // Message validation if (message.value.trim() === "") { setError(message, "Message is required!"); isValid = false; + } else { + clearError(message); // Clear error if valid } + // If form is valid, submit data if (isValid) { const formData = new FormData(contactForm); contactForm.reset(); - // alert("Your details were submitted Successfully"); + // Uncomment the following line to show a success message + // alert("Your details were submitted successfully"); } }); @@ -59,18 +76,28 @@ contactForm?.addEventListener("submit", (e)=> { const newsletterForm = document.getElementById("news-letter"); const newsletterEmail = document.getElementById("newsletter-email"); -newsletterForm?.addEventListener("submit", (e)=> { +newsletterForm?.addEventListener("submit", (e) => { e.preventDefault(); if (newsletterEmail.value.trim() === "") { setError(newsletterEmail, "Email is required!"); - } - else if (!emailRegex.test(newsletterEmail.value.trim())) { + } else if (!emailRegex.test(newsletterEmail.value.trim())) { setError(newsletterEmail, "Invalid email format!"); + } else { + clearError(newsletterEmail); // Clear error if valid } }); +// Function to set error message function setError(field, errorMessage) { const error = field.parentElement.querySelector("small"); error.textContent = errorMessage; -} \ No newline at end of file + error.style.display = "block"; // Show error message +} + +// Function to clear error message +function clearError(field) { + const error = field.parentElement.querySelector("small"); + error.textContent = ""; // Clear error message + error.style.display = "none"; // Hide error message +} diff --git a/script/cursor.js b/script/cursor.js index 22a857db..d0592cbe 100644 --- a/script/cursor.js +++ b/script/cursor.js @@ -2,62 +2,67 @@ const coords = { x: 0, y: 0 }; const circles = document.querySelectorAll(".circle"); const colors = [ - "#ffb56b", - "#fdaf69", - "#f89d63", - "#f59761", - "#ef865e", - "#ec805d", - "#e36e5c", - "#df685c", - "#d5585c", - "#d1525c", - "#c5415d", - "#c03b5d", - "#b22c5e", - "#ac265e", - "#9c155f", - "#950f5f", - "#830060", - "#7c0060", - "#680060", - "#60005f", - "#48005f", - "#3d005e" + "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", + "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", + "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", + "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", + "#48005f", "#3d005e" ]; +// Initialize circles with position and color circles.forEach(function (circle, index) { + circle.style.position = "absolute"; // Ensure position is absolute circle.x = 0; circle.y = 0; circle.style.backgroundColor = colors[index % colors.length]; }); -window.addEventListener("mousemove", function(e){ +// Update mouse coordinates on movement +window.addEventListener("mousemove", function (e) { coords.x = e.clientX; coords.y = e.clientY; - }); +// Animate circles based on mouse position function animateCircles() { - let x = coords.x; let y = coords.y; - + circles.forEach(function (circle, index) { - circle.style.left = x - 12 + "px"; + circle.style.left = x - 12 + "px"; // Center the circle based on mouse position circle.style.top = y - 12 + "px"; - - circle.style.scale = (circles.length - index) / circles.length; + + // Adjust the scale based on the index + circle.style.transform = `scale(${(circles.length - index) / circles.length})`; circle.x = x; circle.y = y; const nextCircle = circles[index + 1] || circles[0]; - x += (nextCircle.x - x) * 0.3; + x += (nextCircle.x - x) * 0.3; // Smooth movement towards the next circle y += (nextCircle.y - y) * 0.3; }); - - requestAnimationFrame(animateCircles); + + requestAnimationFrame(animateCircles); // Keep animating } -animateCircles(); +animateCircles(); // Start the animation + + + + + + + + + + + + + + + + + + + diff --git a/script/flavor_database.js b/script/flavor_database.js index e33065a3..3945f714 100644 --- a/script/flavor_database.js +++ b/script/flavor_database.js @@ -1,4 +1,4 @@ -const falvors_list = [ +const flavors_list = [ { id: "f001", name: "Regular", @@ -24,6 +24,6 @@ const falvors_list = [ name: "Non-Dairy/Vegan", image: "images/vegan.jpg" } -] +]; -export default falvors_list; +export default flavors_list; diff --git a/script/flavor_section.js b/script/flavor_section.js index 351efeaf..6da8435c 100644 --- a/script/flavor_section.js +++ b/script/flavor_section.js @@ -2,16 +2,20 @@ import flavors from "./flavor_database.js"; document.addEventListener("DOMContentLoaded", function () { const flavorContainer = document.querySelector(".flavors-container"); - flavorContainer.innerHTML = flavors - .map( - (flavor) => ` + + // Check if the container exists before populating it + if (flavorContainer) { + flavorContainer.innerHTML = flavors + .map( + (flavor) => ` -
    - ${flavor.name} -

    ${flavor.name}

    -
    +
    + ${flavor.name} +

    ${flavor.name}

    +
    - ` - ) - .join(""); + ` + ) + .join(""); + } }); diff --git a/script/login.js b/script/login.js index 5ecad7fc..bd3835c5 100644 --- a/script/login.js +++ b/script/login.js @@ -1,12 +1,14 @@ -const toggle_password=document.getElementById("toggle-password"); -const password=document.getElementById("password-input-field"); +const toggle_password = document.getElementById("toggle-password"); +const password = document.getElementById("password-input-field"); password.setAttribute('type', 'password'); -toggle_password.addEventListener("click", function(){ - const type=password.getAttribute('type')==='password'? 'text':'password' - password.setAttribute("type",type); +toggle_password.addEventListener("click", function() { + // Toggle the type attribute between 'password' and 'text' + const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; + password.setAttribute("type", type); - this.classList.toggle('fa-eye-slash'); - this.classList.toggle('fa-eye'); -}) \ No newline at end of file + // Toggle the icon classes for showing/hiding the password + this.classList.toggle('fa-eye-slash'); + this.classList.toggle('fa-eye'); +}); diff --git a/script/nav.js b/script/nav.js index eb855dd8..f90cd605 100644 --- a/script/nav.js +++ b/script/nav.js @@ -6,65 +6,66 @@ window.addEventListener('load', function () { }, 3000); // 3 seconds delay }); - - const menu = document.querySelector(".menu"); -// Selecting the links and sections const links = document.querySelectorAll(".link"); const sections = document.querySelectorAll("section"); +const navlinks = document.querySelector(".nav-links"); +const scrollButton = document.querySelector(".scroll-button"); -menu.addEventListener("click", controlMenu) +// Menu control +menu.addEventListener("click", controlMenu); function controlMenu() { - const navlinks = document.querySelector(".nav-links"); - console.log(navlinks.classList) - if (navlinks.classList.contains("active")) { - navlinks.classList.remove("active"); - } - else { - navlinks.classList.add("active"); - } + navlinks.classList.toggle("active"); + menu.classList.toggle('fa-bars'); + menu.classList.toggle('fa-times'); } function controlLinks() { - const links = document.querySelectorAll(".link"); - const navlinks = document.querySelector(".nav-links"); links.forEach(link => { link.addEventListener("click", () => { if (navlinks.classList.contains("active")) { - navlinks.classList.remove("active") + navlinks.classList.remove("active"); } - }) + }); }); } -document.querySelector('.menu').addEventListener('click', function () { - this.classList.toggle('fa-bars'); - this.classList.toggle('fa-times'); -}); - controlLinks(); - -// ================scroll bottom to top========================== -const scrollButton = document.querySelector(".scroll-button"); - +// ================ Scroll to Top =========================== window.addEventListener("scroll", () => { window.pageYOffset > 100 ? scrollButton.classList.add("show-btn") : scrollButton.classList.remove("show-btn"); }); -// When the button is clicked, scroll to the top instantly -scrollButton?.addEventListener("click", () => { - document.documentElement.scrollTop = 0; // For modern browsers - document.body.scrollTop = 0; // For older browsers -}); +// Smooth scroll to top +scrollButton?.addEventListener("click", smoothScrollToTop); -scrollButton?.addEventListener("click", () => { - requestAnimationFrame(smoothScrollToTop); -}); +function smoothScrollToTop() { + const scrollStep = -window.scrollY / (500 / 15); // Calculate step + const scrollInterval = setInterval(function () { + if (window.scrollY !== 0) { + window.scrollBy(0, scrollStep); + } else { + clearInterval(scrollInterval); + } + }, 15); +} -// copyright +// Copyright Year const year = new Date().getFullYear(); document.getElementById("year").innerText = year; + + + + + + + + + + + + diff --git a/script/popup.js b/script/popup.js index 4dbcb71a..c11ad73d 100644 --- a/script/popup.js +++ b/script/popup.js @@ -1,27 +1,30 @@ - //Show the pop-up automatically when the page loads - window.onload = function() { - document.getElementById('popup').style.display = 'flex'; - }; - // Close the pop-up when the user clicks the close button - document.querySelectorAll('.close-btn').forEach(button => { - button.addEventListener('click', function() { - document.getElementById('popup').style.display = 'none'; - }); - }); - // Handle form submission - document.getElementById('emailForm').addEventListener('submit', function(event) { - event.preventDefault(); - - const email = document.getElementById('email').value; - if (email) { - alert(`Thank you! A 20% discount code has been sent to ${email}`); - document.getElementById('popup').style.display = 'none'; - } - }); +// Show the pop-up automatically when the page loads +window.onload = function() { + document.getElementById('popup').style.display = 'flex'; +}; - // Handle "No thanks" link - document.querySelector('.no-thanks').addEventListener('click', function(event) { - event.preventDefault(); +// Close the pop-up when the user clicks the close button +document.querySelectorAll('.close-btn').forEach(button => { + button.addEventListener('click', function() { document.getElementById('popup').style.display = 'none'; - }); - \ No newline at end of file + }); +}); + +// Handle form submission +document.getElementById('emailForm').addEventListener('submit', function(event) { + event.preventDefault(); + + const email = document.getElementById('email').value; + if (email) { + alert(`Thank you! A 20% discount code has been sent to ${email}`); + document.getElementById('popup').style.display = 'none'; + } else { + alert("Please enter a valid email address."); + } +}); + +// Handle "No thanks" link +document.querySelector('.no-thanks').addEventListener('click', function(event) { + event.preventDefault(); + document.getElementById('popup').style.display = 'none'; +}); diff --git a/script/product_database.js b/script/product_database.js index 55bc5950..a02c6e33 100644 --- a/script/product_database.js +++ b/script/product_database.js @@ -5,7 +5,7 @@ const products_list = [ flavor_id: "f001", off: 5, price: 35, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", + description: "Delicious chocolate chip cookie with a classic taste.", image: "images/chocolate.jpg", rating: 4 }, @@ -15,8 +15,8 @@ const products_list = [ flavor_id: "f001", off: 5, price: 35, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/vannila.jpg", + description: "Rich and creamy Häagen-Dazs vanilla ice cream.", + image: "images/vanilla.jpg", // Corrected image filename rating: 5 }, { @@ -25,8 +25,8 @@ const products_list = [ flavor_id: "f001", off: 5, price: 35, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/mango.jpg", + description: "Smooth and creamy homemade vanilla ice cream.", + image: "images/homemade-vanilla.jpg", // Suggested new image name rating: 4 }, { @@ -35,8 +35,8 @@ const products_list = [ flavor_id: "f001", off: 5, price: 35, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/vannila.jpg", + description: "Classic cookies and cream ice cream with real cookie chunks.", + image: "images/cookies-and-cream.jpg", // Suggested new image name rating: 5 }, { @@ -45,8 +45,8 @@ const products_list = [ flavor_id: "f002", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/strawberry.jpg", + description: "Rich sea salt caramel gelato with a creamy texture.", + image: "images/sea-salt-caramel.jpg", // Suggested new image name rating: 4 }, { @@ -55,8 +55,8 @@ const products_list = [ flavor_id: "f002", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/peanut-butter.jpg", + description: "Delicious stracciatella gelato with chocolate flakes.", + image: "images/stracciatella.jpg", // Suggested new image name rating: 5 }, { @@ -65,8 +65,8 @@ const products_list = [ flavor_id: "f002", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/mango.jpg", + description: "Authentic pistachio gelato made with real pistachios.", + image: "images/pistachio.jpg", // Suggested new image name rating: 4 }, { @@ -75,8 +75,8 @@ const products_list = [ flavor_id: "f002", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/mint.jpg", + description: "Refreshing Mediterranean mint gelato with a cool finish.", + image: "images/mediterranean-mint.jpg", // Suggested new image name rating: 3 }, { @@ -85,8 +85,8 @@ const products_list = [ flavor_id: "f003", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/rainbow.jpg", + description: "Fruity raspberry sorbetto made with real raspberries.", + image: "images/raspberry-sorbetto.jpg", // Suggested new image name rating: 4 }, { @@ -95,8 +95,8 @@ const products_list = [ flavor_id: "f003", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/mango.jpg", + description: "Tropical mango sorbet made from fresh mangoes.", + image: "images/mango-sorbet.jpg", // Suggested new image name rating: 5 }, { @@ -105,8 +105,8 @@ const products_list = [ flavor_id: "f003", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/blue berry.jpg", + description: "Mixed berry sorbet with a delightful blend of flavors.", + image: "images/berry-sorbet.jpg", // Suggested new image name rating: 3 }, { @@ -115,8 +115,8 @@ const products_list = [ flavor_id: "f003", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/chocolate.jpg", + description: "Zesty lemon sorbet for a refreshing treat.", + image: "images/lemon-sorbet.jpg", // Suggested new image name rating: 4 }, { @@ -125,8 +125,8 @@ const products_list = [ flavor_id: "f003", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/strawberry.jpg", + description: "Sweet strawberry sorbet made with real strawberries.", + image: "images/strawberry-sorbet.jpg", // Suggested new image name rating: 5 }, { @@ -135,8 +135,8 @@ const products_list = [ flavor_id: "f003", off: 4, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/chocolate.jpg", + description: "Rich chocolate sorbet for chocolate lovers.", + image: "images/chocolate-sorbet.jpg", // Suggested new image name rating: 4 }, { @@ -145,8 +145,8 @@ const products_list = [ flavor_id: "f004", off: 25, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/peanut-butter.jpg", + description: "Classic frozen yogurt with a creamy texture.", + image: "images/frozen-yogurt.jpg", // Suggested new image name rating: 5 }, { @@ -155,28 +155,28 @@ const products_list = [ flavor_id: "f004", off: 10, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/vannila.jpg", + description: "Vanilla bean frozen yogurt made with real vanilla.", + image: "images/vanilla-bean-yogurt.jpg", // Suggested new image name rating: 4 }, { id: "p017", - name: "Strawberry", + name: "Strawberry Frozen Yogurt", flavor_id: "f004", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/strawberry.jpg", + description: "Strawberry frozen yogurt for a delightful treat.", + image: "images/strawberry-frozen-yogurt.jpg", // Suggested new image name rating: 4 }, { id: "p018", - name: "Cake Batter", + name: "Cake Batter Frozen Yogurt", flavor_id: "f004", off: 12, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/rainbow.jpg", + description: "Fun cake batter frozen yogurt that tastes like dessert.", + image: "images/cake-batter-yogurt.jpg", // Suggested new image name rating: 3 }, { @@ -185,18 +185,18 @@ const products_list = [ flavor_id: "f004", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/vannila.jpg", + description: "Creamy Greek yogurt for a healthy snack.", + image: "images/greek-yogurt.jpg", // Suggested new image name rating: 5 }, { id: "p020", - name: "Pistachio", + name: "Pistachio Frozen Yogurt", flavor_id: "f004", off: 1, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/chocolate.jpg", + description: "Pistachio frozen yogurt with a rich flavor.", + image: "images/pistachio-yogurt.jpg", // Suggested new image name rating: 4 }, { @@ -205,18 +205,18 @@ const products_list = [ flavor_id: "f005", off: 0, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/blue berry.jpg", + description: "Decadent fudge brownie ice cream with chunks of brownie.", + image: "images/fudge-brownie.jpg", // Suggested new image name rating: 5 }, { id: "p022", - name: "Peanut Butter", + name: "Peanut Butter Ice Cream", flavor_id: "f005", off: 3, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/rainbow.jpg", + description: "Creamy peanut butter ice cream with a rich taste.", + image: "images/peanut-butter-ice-cream.jpg", // Suggested new image name rating: 4 }, { @@ -225,8 +225,8 @@ const products_list = [ flavor_id: "f005", off: 15, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/mint.jpg", + description: "Refreshing mint chip ice cream that is dairy-free.", + image: "images/mint-chip.jpg", // Suggested new image name rating: 4 }, { @@ -235,10 +235,10 @@ const products_list = [ flavor_id: "f005", off: 8, price: 50, - description: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium, ad.", - image: "images/chocolate.jpg", + description: "Delicious oat milk chocolate ice cream for a dairy-free treat.", + image: "images/oat-milk-chocolate.jpg", // Suggested new image name rating: 3 } -] +]; export default products_list; diff --git a/script/signup.js b/script/signup.js index 2341ccfd..5a642726 100644 --- a/script/signup.js +++ b/script/signup.js @@ -1,74 +1,86 @@ +const passwordInput = document.getElementById("password-input-field"); +const strengthText = document.getElementById("password-strength-text"); +const strengthBar = document.getElementById("strength-bar"); - const passwordInput = document.getElementById("password-input-field"); - const strengthText = document.getElementById("password-strength-text"); - const strengthBar = document.getElementById("strength-bar"); - - passwordInput.addEventListener("input", function () { - const password = passwordInput.value; - const result = zxcvbn(password); - const strength = result.score; - - // Update strength bar and text - strengthBar.style.width = `${(strength + 1) * 20}%`; - const strengthLevels = ["Very Weak", "Weak", "Okay", "Good", "Strong"]; - strengthText.textContent = strengthLevels[strength]; - - const colors = ["#ff4d4d", "#ff944d", "#ffd24d", "#d2ff4d", "#4dff88"]; - strengthBar.style.backgroundColor = colors[strength]; - }); - - // Form validation logic - document.querySelector("form").addEventListener("submit", function (event) { - event.preventDefault(); - - const firstName = document.querySelector("input[placeholder='First name']"); - const lastName = document.querySelector("input[placeholder='Last name']"); - const email = document.querySelector("input[type='email']"); - const password = document.getElementById("password-input-field"); - - clearErrors(); - - let isValid = true; - - if (firstName.value.trim() === "") { - showError(firstName, "First name is required"); - isValid = false; - } - - if (lastName.value.trim() === "") { - showError(lastName, "Last name is required"); - isValid = false; - } - - if (email.value.trim() === "") { - showError(email, "Email is required"); - isValid = false; - } - - if (password.value.trim() === "") { - showError(password, "Password is required"); - isValid = false; - } - - if (isValid) { - this.submit(); - } - }); - - function showError(inputElement, message) { - inputElement.classList.add("error"); - - const errorMessage = document.createElement("div"); - errorMessage.className = "error-message show-message"; - errorMessage.innerText = message; - - inputElement.parentNode.appendChild(errorMessage); +passwordInput.addEventListener("input", function () { + const password = passwordInput.value; + const result = zxcvbn(password); + const strength = result.score; + + // Update strength bar and text + strengthBar.style.width = `${(strength + 1) * 20}%`; + const strengthLevels = ["Very Weak", "Weak", "Okay", "Good", "Strong"]; + strengthText.textContent = strengthLevels[strength]; + + const colors = ["#ff4d4d", "#ff944d", "#ffd24d", "#d2ff4d", "#4dff88"]; + strengthBar.style.backgroundColor = colors[strength]; +}); + +// Form validation logic +document.querySelector("form").addEventListener("submit", function (event) { + event.preventDefault(); + + const firstName = document.querySelector("input[placeholder='First name']"); + const lastName = document.querySelector("input[placeholder='Last name']"); + const email = document.querySelector("input[type='email']"); + const password = document.getElementById("password-input-field"); + + clearErrors(); + + let isValid = true; + + // Validation checks + if (firstName.value.trim() === "") { + showError(firstName, "First name is required"); + isValid = false; + } + + if (lastName.value.trim() === "") { + showError(lastName, "Last name is required"); + isValid = false; } - function clearErrors() { - const inputs = document.querySelectorAll(".input-field"); - inputs.forEach(input => input.classList.remove("error")); + if (email.value.trim() === "") { + showError(email, "Email is required"); + isValid = false; + } else if (!validateEmail(email.value.trim())) { + showError(email, "Please enter a valid email address"); + isValid = false; + } + + if (password.value.trim() === "") { + showError(password, "Password is required"); + isValid = false; + } - const errorMessages = document.querySelectorAll(".error-message"); - errorMessages.forEach(message => message.remove()); + if (isValid) { + this.submit(); } +}); + +// Show error function +function showError(inputElement, message) { + inputElement.classList.add("error"); + + const errorMessage = document.createElement("div"); + errorMessage.className = "error-message show-message"; + errorMessage.innerText = message; + + // Append the error message to the input element + inputElement.parentNode.appendChild(errorMessage); +} + +// Clear error messages +function clearErrors() { + const inputs = document.querySelectorAll(".input-field"); + inputs.forEach(input => input.classList.remove("error")); + + const errorMessages = document.querySelectorAll(".error-message"); + errorMessages.forEach(message => message.remove()); +} + +// Email validation function +function validateEmail(email) { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return re.test(String(email).toLowerCase()); +} diff --git a/script/topscrollindicator.js b/script/topscrollindicator.js index 7f2ebfed..6d49d72b 100644 --- a/script/topscrollindicator.js +++ b/script/topscrollindicator.js @@ -1,8 +1,11 @@ window.onscroll = function() { var scrollProgress = document.querySelector('.scroll-progress'); - var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; + + // Calculate the percentage scrolled var scrolled = (scrollTop / scrollHeight) * 100; + + // Set the width of the scroll progress element scrollProgress.style.width = scrolled + "%"; }; - diff --git a/signup.html b/signup.html index c2df44aa..6531156b 100644 --- a/signup.html +++ b/signup.html @@ -1,6 +1,5 @@ - @@ -9,14 +8,11 @@ - + - - - - +
    @@ -52,20 +48,18 @@
    - +
    -

    Sign up to IcyCo

    -
    +
    @@ -81,11 +75,11 @@

    Sign up to IcyCo

    - - + +
    -
    + @@ -96,12 +90,12 @@

    Sign up to IcyCo

    -

    - By clicking Continue or registering through a third party you accept the Icyco + By clicking Continue or registering through a third party you accept the IcyCo Terms of Use and acknowledge the Privacy Statement and Cookie Policy
    +
    Already have an account?Login
    @@ -114,23 +108,67 @@

    Sign up to IcyCo

    - - - - - - - - + - - \ No newline at end of file +