Skip to content

drilonthaci/front-end-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bonik Ecommerce Website

Features

  • Responsive Design: Adapts to different screen sizes (desktop, tablet, mobile).
  • Navigation Bar: Links to different pages.
  • Slider Section: Showcases promotional content.
  • Flash Deals Section: Highlights discounted products.
  • Categories Section: Displays images and names of product categories.
  • Newsletter Subscription: Form for users to stay updated.
  • Footer Section: Contains contact information and links to additional pages.
  • Team Services Grid: A category grid requiring JavaScript for functionality.
  • Product Detail Page: A consistent page linked to all products.
  • About Us Page: Simple linked page.
  • Contact Us Page: Simple linked page accessible via nav menu links.

Enhancements

  • Mobile Navigation Bar: Added functionality for better mobile experience.
  • Hover Effects: Applied to cards, links, and buttons.
  • Page Animations: Added animations at the beginning of the page.

DOM Manipulation

  • Updated the welcome message based on the time of day (e.g., different discounts in the afternoon).
  • Created new elements on the website using JavaScript, such as additional product cards with a "Load More" button.

Event Handling

  • Enabled button functionality, including logging form data when the contact form submit button is clicked.

Form Validation

  • Ensured required fields in forms are correctly filled out and displayed error messages as needed.
  • Validated email addresses and provided feedback messages upon successful form submission.

Interactive Elements

  • Enhanced the carousel with JavaScript features.
  • Added a "Back to Top" button that appears when users scroll down, returning them to the top of the page when clicked.

Advanced JavaScript

  • Used async techniques to fetch and display dynamic data from the Unsplash API, adding fresh images to the website.
  • Displayed 9 additional products via API, with some products manually added.

Cookies and Local Storage

  • Cookies: Used in the Newsletter section to save cookies for one day, displaying a thank you message upon subscription.
  • Local Storage: Used in the contact form to retain data.

Future Improvements

  • Plan to address areas for enhancement with new technologies and updates.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published