590 lines
23 KiB
Markdown
590 lines
23 KiB
Markdown
**Share Link from StackBlitz:**
|
|
|
|
<https://stackblitz.com/edit/stackblitz-starters-rdsfw2?file=index.html>
|
|
|
|
# **Introduction**
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">Client name: Bloom Valley Nursery</p>
|
|
|
|
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.
|
|
|
|
<p style="font-size: 1.17em; font-weight: bold;">Color Palette and Logo Choice:</p>
|
|
|
|
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.
|
|
|
|
<p style="font-size: 1.17em; font-weight: bold;">Font Color Choice:</p>
|
|
|
|
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.
|
|
|
|
<p style="font-size: 1.17em; font-weight: bold;">Typography Choice:</p>
|
|
|
|
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.
|
|
|
|
<br><br>
|
|
|
|
# **Wireframes**
|
|
|
|
<p style="font-size: 1.17em; font-weight: bold;">1. Mobile Wireframes</p>
|
|
|
|
|
|
|
|
<https://www.figma.com/design/eUGamaGHPuZO8Jzmd6osoD/Bloom-Valley-Nursery---Mobile-Site-Wireframes?node-id=0-1&t=12mnQm94cKrRB6Mj-1>
|
|
|
|
<p style="font-size: 1.17em; font-weight: bold;">2. Desktop Wireframes</p>
|
|
|
|
|
|
|
|
<https://www.figma.com/design/odrWEmoXr1rMRe5zMdi7h9/Bloom-Valley-Nursery---Desktop-Site-Wireframes?t=12mnQm94cKrRB6Mj-1>
|
|
|
|
<br>
|
|
|
|
# **Website Structure and 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.
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">Home Page</p>[**Click Here for the
|
|
Homepage**](https://stackblitz.com/edit/stackblitz-starters-rdsfw2?file=index.html)
|
|
|
|
The homepage features:
|
|
|
|
- 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.
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">2. Gallery Page</p> [Click Here for the Gallery
|
|
Page](https://stackblitz.com/edit/stackblitz-starters-rdsfw2?file=gallery.html)**
|
|
|
|
The Gallery Page features:
|
|
|
|
- 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.
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">3. About Us Page:</p> [Click Here for the About Us
|
|
Page](https://stackblitz.com/edit/stackblitz-starters-rdsfw2?file=about.html)**
|
|
|
|
The About Us Page features:
|
|
|
|
- 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.
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">4. Custom Page:</p> [Click Here for the Community Events
|
|
Page](https://stackblitz.com/edit/stackblitz-starters-rdsfw2?file=community.html)**
|
|
|
|
The Community Events Page features:
|
|
|
|
- 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.
|
|
|
|
<br>
|
|
|
|
# **Website Design and 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>
|
|
|
|
| | **#F7F7F7** (Cloudy Gray) | **#96BAA0** (Meadow Mist) | **#BDD4DA** (Sky Bloom) |
|
|
|--------------------|---------------------------|---------------------------|-------------------------|
|
|
| **Contrast Ratio** | **10.94:1** | **5.49:1** | **7.59:1** |
|
|
| **Against #014038** (Canopy Green) | | | |
|
|
| **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.
|
|
|
|
<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.
|
|
|
|
<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.
|
|
|
|
<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.
|
|
|
|
<br>
|
|
|
|
# **Screenshots of Rendered Webpages**
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">1. Homepage</p>
|
|
|
|
<p style="font-size: 1.17em; font-weight: bold;">Homepage:</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p style="font-size: 1.17em; font-weight: bold;">Subscribe feature:</p>
|
|
|
|
**Subscribe feature input validation:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">2. Gallery Page</p>
|
|
|
|
**Gallery page:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Shopping cart---Add Item:**
|
|
|
|
|
|
|
|
**Shopping cart---View Cart (after adding an item):**
|
|
|
|
|
|
|
|
**Shopping cart---View Cart (after adding multiple items):**
|
|
|
|
|
|
|
|
**Shopping cart---View Cart (alert message after "Clear Cart" button is
|
|
clicked):**
|
|
|
|
|
|
|
|
**Shopping cart---Process Order (alert after "Process Order" button is
|
|
clicked):**
|
|
|
|
|
|
|
|
**Shopping cart---Process Order (alert after the order is already
|
|
processed):**
|
|
|
|
|
|
|
|
**Shopping cart---Clear Cart (empty cart):**
|
|
|
|
|
|
|
|
**Shopping cart---Clear Cart (alert window after clearing cart):**
|
|
|
|
|
|
|
|
**SessionStorage (before processing order):**
|
|
|
|
|
|
**SessionStorage (after processing order):**
|
|
|
|
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">3. About Us</p>
|
|
|
|
**About Us page:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Contact Us form:**
|
|
|
|
**LocalStorage---after form submission:**
|
|
|
|
|
|
|
|
**Contact Us form---input validation:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">4. Community Events</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
# Description of Issues & Lessons Learned
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">Current issues:</p>
|
|
|
|
- **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>
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">Previous issues fixed:</p>
|
|
|
|
- **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>
|
|
|
|
<p style="font-size: 1.5em; font-weight: bold;">Major redesign and project overhaul:</p>
|
|
|
|
- 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.
|