# **Bloom Valley Nursery Web Design**

**Note:** This README is the writeup for the original project which was written in HTML, CSS, and vanilla JS. It does not reflect changes made while refactoring and modularizing the demo. This file will be updated with those reflections soon.

### **Table of Contents**

-   [Introduction](#introduction)
    -   [Color Palette & Logo Choice](#color-palette--logo-choice)
    -   [Font Color Choice](#font-color-choice)
    -   [Typography Choice](#typography-choice)
-   [Wireframes](#wireframes)
-   [Website Structure & Content](#website-structure--content)
    -   [Homepage](#homepage)
    -   [Gallery Page](#gallery-page)
    -   [About Us Page](#about-us-page)
    -   [Community Events Page](#community-events-page)
-   [Website Design & Styling](#website-design--styling)
    -   [Overall Design](#overall-design)
    -   [Accessibility](#accessibility)
    -   [Table 1: Contrast Ratio](#table-1-contrast-ratio)
    -   [Responsive Web Design](#responsive-web-design)
-   [Website Functionality](#website-functionality)
-   [Website Data Storage](#website-data-storage)
-   [Customization](#customization)
-   [Screenshots of Rendered Pages](#screenshots-of-rendered-pages)
    -   [1. Homepage Screenshots](#1-homepage-screenshots)
    -   [2. Gallery Screenshots](#2-gallery-screenshots)
    -   [3. About Us Screenshots](#3-about-us-screenshots)
    -   [4. Community Events Screenshot](#4-community-events-screenshots)
-   [Description of Issues & Lessons Learned](#description-of-issues--lessons-learned)
    - [Current Issues](#current-issues)
    - [Previous Issues Fixed](#previous-issues-fixed)
    - [Major Redesign & Project Overhaul](#major-redesign--project-overhaul)
    
<br> 

# **Introduction**

**Client name:  Bloom Valley Nursery**

The Bloom Valley Nursery website was designed to create an inviting,
user-friendly experience for customers looking for plants, garden tools,
and expert advice. With a focus on showcasing the products and services
of the nursery, as well as providing information about community events
and promotions, the website aims to be both functional and aesthetically
aligned with the brand's core values. The design prioritizes
accessibility, ease of use, and a clean, professional look, utilizing a
color palette and typography that reflect Bloom Valley Nursery\'s
commitment to nature and community.

##  **Color Palette & Logo Choice**

The color palette used for the website includes shades of green, light
teal, mustard yellow, and white, carefully selected to evoke a sense of
freshness, growth, and sustainability:

-   #014038 (Canopy Green): Represents nature, stability, and trust.

-   #96BAA0 (Meadow Mist): Evokes growth and freshness.

-   #bdd4da (Sky Bloom): Adds a calming touch, reminiscent of tranquil
    nature scenes.

-   #f0c06d (Sunlit Petal): Bright and inviting, used for call-to-action
    buttons and important links.

-   #f7f7f7 (Cloudy Gray): Used for backgrounds to ensure clarity and
    readability.

The Logo color choice of #f0c06d (Sunlit Petal) was made to leverage the
shape of the logo image in this color as a subtle comparison to the Sun.
The aim was to strengthen the association of Bloom Valley Nursery with
nature and environmental sustainability.

##  **Font Color Choice**

The font color choices are designed for high contrast to ensure
readability, while also aligning with the natural and professional
aesthetic of the brand:

-   #00231c (Detritus Green): Used primarily for text, providing strong
    contrast against lighter backgrounds.

-   #96BAA0 (Meadow Mist): Used for subheadings and accents, maintaining
    a soft but readable contrast.

## **Typography Choice**

The typography used on the website was selected to create a balance
between modern and rustic elements:

- A serif font is used for headings and key titles, reflecting the brand's nature-based, traditional feel.

- A sans-serif font is used for body text, offering clarity and readability across devices.

- The font sizes are responsive, with larger text for headings to create emphasis and smaller, easily readable text for body content.

[Back to Top](#table-of-contents)

<br>

# **Wireframes**

### **1. Mobile Wireframes**

![Mobile wireframes for the Bloom Valley Nursery Web Design](media/image1.jpg) 



### **2. Desktop Wireframes**

![Desktop wireframes for the Bloom Valley Nursery Web Design](media/image2.jpg)

[Back to Top](#table-of-contents)

<br>

# **Website Structure & Content**

The website is structured to provide an intuitive and informative
experience for users, with clear navigation options and easily
accessible content related to Bloom Valley Nursery\'s offerings.

## **Homepage**

-   An auto-cycling **Featured Items** section showcasing items
    available for sale.

-   A **Shoppers Perks** section highlighting promotions like discounts
    for new subscribers.

-   A **Testimonials** section featuring customer feedback and
    testimonials that showcase Bloom Valley Nursery's commitment to its
    community.

-   Navigation to the **Gallery Page** via category-specific links,
    allowing users to explore products by category.



## **Gallery Page**

-   A Product Carousel where users can scroll through product cards,
    each displaying an image, description, and price, along with an
    "add-to-cart" button.

-   A View Cart Details button that opens a modal with shopping cart
    items, quantities, and a subtotal.

-   Users can clear the cart or process their order directly from the
    modal. A confirmation dialogue ensures users are aware before
    clearing their cart or processing their order.



## **About Us Pages**

-   Information about Bloom Valley Nursery's mission, commitment to
    community, and business details (e.g., phone number and business
    hours).

-   A feedback form that allows customers to submit inquiries and
    feedback, with input validation in place to ensure all fields are
    properly completed before submission.



## **Community Events Page**

-   An interactive Google Calendar embedded on the page to display
    upcoming events.

-   Descriptions of Bloom Valley Nursery's own events, emphasizing the
    free and educational nature of the workshops and events held at the
    nursery.

-   A section highlighting community-wide events in which Bloom Valley
    Nursery participates, along with details on how customers can
    inquire for more information.

[Back to Top](#table-of-contents)

<br>

# **Website Design & Styling**

### **Overall Design**

The overall design reflects Bloom Valley Nursery's brand values by using
a combination of natural colors and modern typography. Sections are
color-coded for clarity, with vibrant colors like **Sunlit Petal** for
call-to-action buttons and softer colors for backgrounds, ensuring a
visually appealing and functional design. The layout is intuitive, with
clearly marked sections for the nursery's products, services, and
community engagement.

### **Accessibility**

Accessibility is the foundation on which the Bloom Valley Nursery
website was built. To ensure the highest level of accessibility for all
visitors, the design adheres to WCAG AAA Compliance standards for color
contrast. High contrast between text and background, along with readable
font sizes and intuitive navigation, enhances the user experience.
Semantic HTML elements improve screen reader compatibility, and alt text
is provided for all images. Additionally, interactive elements, such as
buttons and forms, are fully keyboard navigable.

The table on the following page highlights key color choices used in the
design and their respective contrast ratios when compared against
**#014038 (Canopy Green)**, demonstrating compliance with WCAG AAA
standards.

<br>

### **Table 1: Contrast Ratio**

**Contrast Ratio Against #014038 (Canopy Green)**
|                    |  | **#F7F7F7** (Cloudy Gray) | **#96BAA0** (Meadow Mist) | **#BDD4DA** (Sky Bloom) |
|--------------------|--|---------------------------|---------------------------|-------------------------|
| **Contrast Ratio** |  | **10.94:1**               | **5.49:1**                | **7.59:1**              |
| **Font <= 17pt**   |  | **PASS**                  | **FAIL**                  | **PASS**                |
| **Font >= 18pt -or- Bold Font >= 14pt** |  | **PASS** | **PASS** | **PASS** |
| **Icons and Actionable Graphics** |  | **PASS**   | **PASS**                  | **PASS**                |

<br>

**Table Key Points:**

-   **Navigation Bars**:

    -   The navigation bars at the top and bottom of each page use
        **#014038 (Canopy Green)** for text against **#F7F7F7 (Cloudy
        Gray)** as a background, ensuring high readability.

    -   Current page indicators use **#014038 (Canopy Green)** against
        **#96BAA0 (Meadow Mist)**. While this pairing does not meet AAA
        compliance for fonts 17pt or smaller, the current-page
        indicators are styled as **20pt bold**, meeting AAA standards.

-   **Hover States**:

    -   On hover, interactive elements like the shopping cart button
        transition to **#96BAA0 (Meadow Mist)** against **#014038
        (Canopy Green)**. While this may not comply for smaller font
        sizes, it meets compliance for icons and actionable graphics.

-   **Headlines**:

    -   Throughout the site, **#014038 (Canopy Green)** is used as a
        font color against **#BDD4DA (Sky Bloom)** for section
        headlines. This contrast ensures both readability and a
        cohesive, intuitive design theme.


### **Responsive Web Design:**

The Bloom Valley Nursery website incorporates responsive web design
(RWD) principles to ensure it is functional and aesthetically pleasing
across a variety of screen sizes and devices. The following elements
were implemented to achieve RWD:

1.  **Flexible Layouts Using Relative Units:**

    -   The website utilizes CSS units like em, rem, and percentages for
        font sizes, margins, and paddings to create a scalable design.
        For example, the font size of the navigation links is defined in
        em to ensure it scales appropriately with the base font size set
        in the HTML. Similarly, the width of the main content area
        adapts to the screen size, ensuring proper utilization of
        available space without horizontal scrolling.

2.  **Media Queries:**

    -   Media queries were used to define styles for different screen
        widths. For instance:

        -   The navigation bar adjusts to a stacked format on smaller
            screens, ensuring links remain readable and accessible.

        -   Product cards in the gallery page dynamically resize and
            rearrange from a horizontal layout to a grid-like structure
            for smaller devices to maintain usability.

3.  **Responsive Images:**

    -   All images, including product images and the logo, use the
        max-width: 100%; height: auto; rule to ensure they scale
        proportionally and never exceed the width of their parent
        containers. This prevents layout breaking on smaller screens
        while maintaining image quality.


[Back to Top](#table-of-contents)

<br>

# **Website Functionality**

1\. **Navigation Bar:**

-   The navigation bar appears at the top and bottom of each webpage,
    providing consistent and intuitive access to the website\'s main
    sections. It highlights the current page with a distinctive style,
    improving the user's sense of location within the website.

-   The navigation links are fully responsive, adjusting size and layout
    for smaller screens. Hover effects enhance usability by visually
    indicating interactable elements, and the links are
    keyboard-accessible for users with mobility impairments.

2\. **Subscribe Feature:**

-   The newsletter subscription form validates email input to ensure
    users provide a properly formatted address. Upon successful
    submission, a custom modal appears, confirming the subscription with
    a thank-you message.

-   This feature is accessible and responsive, with the form scaling
    down and maintaining usability on smaller screens. The modal uses
    clear, high-contrast text and an easily dismissible \"OK\" button.

3\. **Add to Cart Feature:**

-   On the gallery page, users can add products to their shopping cart
    by clicking an \"Add to Cart\" button within each product card. The
    button dynamically updates the session storage to reflect the
    addition of the selected item.

-   A custom modal confirms the item has been added to the cart,
    improving feedback and user experience. The feature ensures session
    persistence, so cart contents remain available even if the user
    navigates to a different page.

4\. **View Cart Feature:**

-   Users can view their cart by clicking either the \"View Cart
    Details\" button or the shopping cart icon located at the top of
    every webpage. This opens a custom modal displaying all items in the
    cart, including their quantities, prices, and the subtotal.

-   The modal provides options to clear the cart or process the order.
    Confirmation dialogs ensure the user's intent before these actions
    are finalized. All updates to the cart are reflected in real time
    without requiring a page refresh.

5\. **Contact Us Feature:**

-   The feedback form on the \"About Us\" page validates all user
    inputs, ensuring that the name, phone number, email, and message
    fields are properly filled out before submission.

-   Input validation prevents SQL injection by stripping special
    characters from the message field and sanitizing all inputs.

-   Upon successful submission, a custom modal confirms the form was
    sent. This feature demonstrates accessibility and responsiveness, as
    the form is fully functional across devices and screen sizes.

[Back to Top](#table-of-contents)

<br>

# **Web Data Storage**

The Bloom Valley Nursery website uses web storage methods, including
sessionStorage and localStorage, to manage and preserve user data during
interactions. These methods allow the website to provide a seamless
experience by temporarily or persistently storing data on the
client-side browser.


**1\. Shopping Cart Feature:**

The shopping cart leverages **sessionStorage** to dynamically manage
cart contents throughout the user\'s session. Key aspects of this
implementation include:

-   **Storing Items in the Cart:**

    -   When a user clicks the \"Add to Cart\" button, the item data
        (e.g., name, price, and quantity) is added to the cart stored in
        sessionStorage. If the item already exists in the cart, its
        quantity is incremented.

    -   Data is saved in JSON format, enabling efficient manipulation of
        the cart\'s structure and content.

-   **Retrieving Cart Contents:**

    -   The sessionStorage cart data is read and rendered in a custom
        modal when the user clicks the \"View Cart Details\" button. The
        cart is displayed in real-time, including item names,
        quantities, and a subtotal.

-   **Clearing the Cart:**

    -   Users can clear the cart by selecting the \"Clear Cart\" option.
        The sessionStorage data is removed, and the modal is refreshed
        to reflect the empty cart.

-   **Processing the Order:**

    -   When the \"Process Order\" button is clicked, sessionStorage
        data is read, and a receipt number is generated. After
        confirmation, the cart data is cleared, and a thank-you message
        is displayed.

Using sessionStorage ensures that cart data is only available during the
current browsing session, preserving user privacy while maintaining
functionality.

**2\. Contact Us Feature:**

The feedback form on the \"About Us\" page uses **localStorage** to
persist user submissions temporarily. Key functionalities include:

-   **Storing Form Data:**

    -   When the form is submitted, user input (name, email, phone
        number, and message) is validated using JavaScript. Valid data
        is then stored in localStorage to ensure it is preserved for
        review, even if the page reloads or the user navigates away
        temporarily.

-   **Preventing SQL Injection:**

    -   The message field strips any potentially harmful characters and
        sanitizes the input before storing or processing it.

-   **Submission Confirmation:**

    -   After submission, the form fields are cleared, and a custom
        modal confirms successful submission. LocalStorage data can be
        accessed later by the website administrators for follow-up.

Using localStorage ensures user data persists beyond the current
session, facilitating communication and operational follow-ups.

[Back to Top](#table-of-contents)

<br>

# **Customization**

The **Community Events Page** serves as the website\'s custom page,
showcasing Bloom Valley Nursery\'s engagement with the local community.
Features of this page include:

1.  **Interactive Google Calendar:**

    -   A Google Calendar embed provides an interactive way for users to
        view upcoming events hosted by the nursery and community. Users
        can navigate between months and click events for additional
        details.

2.  **Nursery Events Section:**

    -   This section highlights workshops and gatherings hosted at Bloom
        Valley Nursery. Each event is described in detail, with emphasis
        on the nursery\'s commitment to offering free educational
        opportunities.

3.  **Community-Wide Events Section:**

    -   A separate section lists events sponsored or partnered by Bloom
        Valley Nursery within the broader community. Descriptions
        include schedules and locations, encouraging user participation
        in local activities.

This page strengthens the nursery\'s community-focused image by
emphasizing its role as both an educator and a supporter of local
initiatives.

[Back to Top](#table-of-contents)

<br>

# **Screenshots of Rendered Webpages**

## **1. Homepage Screenshots**

**Homepage:**

![A screenshot of homepage above the fold](media/image3.jpeg)

![A screenshot of homepage above the fold showing dynamically changed content](media/image4.jpeg)

![A screenshot of homepage below the fold showing dynamically changed content](media/image5.jpeg)

<p style="font-size: 1.17em; font-weight: bold;">Subscribe feature:</p>

**Subscribe feature input validation:**

![A screenshot of validation of user input in subscribe feature](media/image6.jpeg)

![A screenshot of confirmation of newsletter subscription](media/image7.jpeg)

[Back to Top](#table-of-contents)


## **2. Gallery Screenshots**

**Gallery Page:**

![A screenshot of the gallery page above the fold](media/image8.jpeg)

![A screenshot of the gallery page below the fold](media/image9.jpeg)

![A screenshot of the gallery page below the fold showing dynamically changed content](media/image10.jpeg)

![A second screenshot of the gallery page below the fold showing dynamically changed content](media/image11.jpeg)

**Shopping cart---Add Item:**

![A screenshot of alert when item is added to cart](media/image12.jpeg)

**Shopping cart---View Cart Modals:**

![A screenshot of the view cart feature after an item was added](media/image13.jpeg)

![A screenshot of the view cart feature with multiple items added](media/image14.jpeg)

![A screenshot of the confirm screen before clearing the cart](media/image15.jpeg)

**Shopping cart - Process Order Modals:**

![A screenshot of the confirm screen before processing an order](media/image16.jpeg)

![A screenshot of the confirmation that the order has been processed](media/image17.jpeg)

**Shopping cart - Clear Cart Modals:**

![A screenshot of the confirmation that cart was cleared](media/image18.jpeg)

![A screenshot of empty cart after clearing](media/image19.jpeg)

**SessionStorage (before processing order):**

![A screenshot of sessionStorage with an item in cart](media/image20.jpeg)
**SessionStorage (after processing order):**

![A screenshot of sessionStorage as order is processed](media/image21.jpeg)

[Back to Top](#table-of-contents)


## **3. About Us Screenshots**

**About Us page:**

![A screenshot of About Us page above the fold](media/image22.jpeg)

![A screenshot of customer feedback form](media/image23.jpeg)

![A screenshot of About Us page below the fold](media/image24.jpeg)

**Contact Us form:**

**LocalStorage---after form submission:**

![A screenshot of localStorage after feedback form submission](media/image25.jpeg)

**Contact Us form---input validation:**

![A screenshot of phone number input validation in feedback form](media/image26.jpeg)

![A screenshot of name input validation in feedback form](media/image27.jpeg)

![A screenshot of email input validation in feedback form](media/image28.jpeg)

![A second screenshot of email input validation in feedback form](media/image29.jpeg)

[Back to Top](#table-of-contents)


## **4. Community Events Screenshots**

**Community Events Page:**

![A screenshot of the Community Events page above the fold](media/image30.jpeg)

![A screenshot of the Community Events page mid-page](media/image31.jpeg)

![A screenshot of the Community Events page footer](media/image32.jpeg)

[Back to Top](#table-of-contents)
<br>

# Description of Issues & Lessons Learned

### **Current Known Issues**

-   **Add-to-Cart Alert**: I noticed while taking screenshots of the necessary components and functionalities of the Gallery Page that the alert which appears each time an item is added to the cart has reverted to the browser's default pop-up alert. 

<br>

### **Previous Issues Fixed**

-   **Font contrast problems**: Adjustments were made to ensure all text
    has sufficient contrast against the background, improving
    readability for users with visual impairments.

-   **Functionality of the shopping cart**: Issues related to data
    persistence in sessionStorage were resolved, allowing for proper
    display and manipulation of the cart items.

-   **Accessibility issues in navigation**: The hover states of
    navigation links were adjusted to meet WCAG guidelines, ensuring
    clear interaction feedback for all users.

-   **CSS and JavaScript**: An attempt to create a script that
    dynamically added shadows to elements based on their proximity to
    the logo was abandoned due to the redesign and time constraints. The
    new design and theme focused on simplicity and accessibility.

<br>

### **Major Redesign & Project Overhaul**

-   Approximately three weeks into the project, after running into
    problem after problem with the CSS and JavaScript aspects of the
    project, I decided to restart the website with a completely new
    design, theme, and approach to better align with the client's
    branding and goals while making sure accessibility was a genuine
    priority.

-   Despite this major change, I successfully completed the entire
    overhaul in one week, ensuring the intended functionality of the original design was preserved
    while improving accessibility and visual appeal.

[Back to Top](#table-of-contents)

