Skip to content

amelia2802/ice-cream-site

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🍦 Luvelicious Site

Welcome to the Luvelicious Site! This project showcases a dynamic ice cream website built using React. The site includes various sections such as Header, Hero Section, Offers, Menu, About, Testimonials, and Footer. Brown Modern Visit Our Website Video Instagram Post

Mockups

Mockup Overview

Main Mockup Checkout Mockup Empty Cart Mockup
Main Mockup Checkout Mockup Empty Cart Mockup

🚀 Features

  • Dynamic Ratings: The static site was transformed into a dynamic one by generating random ratings and total orders for each menu item.
  • Star Ratings: Implemented a custom star rating display using JavaScript's Math.random() function to generate ratings. Displayed ratings using filled and blank stars, enhancing the user experience.

🧰 Technologies Used

  • React: The site is built using React, a popular JavaScript library for building user interfaces.
  • JavaScript: Leveraged JavaScript for dynamic content generation and star rating functionality.
  • CSS: Styled the site with CSS for a clean and responsive design.

🖥️ Project Structure

  • Header: Contains the navigation menu and logo.
  • Hero Section: A visually appealing introduction to the site, showcasing featured ice creams.
  • Offers: Displays special offers or discounts.
  • Menu: Lists all available ice creams with dynamic ratings and total orders.
  • About: Information about the ice cream shop and its history.
  • Testimonials: Customer feedback and reviews.
  • Footer: Contains contact information and feedback form.

📂 Installation

  1. Clone the repository:
    git clone https://github.com/your-username/ice-cream-site.git
  2. Navigate to the project directory:
    cd ice-cream-site
  3. Install the dependencies:
    npm install
  4. Start the development server:
    npm start