---
tags: mstu5003, tinker, html, css,final project
---

# MSTU 5003 Final Project

---
Group members: Hao Gong, Ting Li, Wenjing Sun

---

**Codepen link: https://codepen.io/il2446/pen/VwgJBJq

## Intro
Welcome to the official documentation for the Fuzzy Friends website. This document outlines the structure, content, and functionality of the website.

## Website overview

Fuzzy Friends Home is a virtual platform dedicated to promoting the well-being of our furry companions. Our mission is to provide a friendly and informative space for pet lovers, providing resources, community engagement, and allowing users to…:
Learn the basics of Puppy Home Organization
Understand that every term about pets has a meaning
Learn about topics and how their organization works
Learn how to adopt or donate a pet
Learn how to browse the web
Gain experience caring for pets

## Home:
Description: Landing page containing a warm welcome and highlights of our latest initiatives.
> Engaging visuals, a brief mission statement, and links to key sections.
question
Many people have trouble deciding how to care for their animals. And pets also need to find adoptive families.
# Solution
Our web application is designed to help our audience (adults) decide what kind of pet they want to adopt.
On our website you can:
Fill out your adoption preferences and select the pet you would like to adopt
See which pets are available for adoption based on your preferences
Learn more about the age, temperament and health of the pets we have available for you.
Fill out the question form to choose your donation package
Explore our pet facts and fun tips created just for you.
learning target
## Our goals for this page are:
> Description: I hope they see the Puppy Home organization and discover what they can do for their pets.
Attitude: I want them to believe they have the ability to do more for their pets, whether it's paying to keep them or adopting them.

1. About us:
Description: Learn about the history, mission, and team behind Fuzzy Friends Home.
What: Detailed information about our organization, team members and our commitment to animal welfare.
2. Adopt a furry friend:
Description: Explore our adorable adoptable pets.
Contents: Introduction to animals available for adoption, the adoption process and success stories.
user
> Identify
The website's primary users are residents living in the United States and is primarily targeted at adults.
Minor users will also be visitors to the Site, but will not be considered primary users in such case. While other users may use the site, the majority of adoptions in the United States are to adults, making these adults the primary focus.

* User interaction components?
>1.1 Purpose
The purpose of the Puppy Home website is to connect potential adopters with puppies available for adoption. This website is designed to provide a user-friendly interface for browsing, searching, and learning about available puppies.
>1.2 Scope
The website will include features such as puppy profiles, adoption information, user registration and search capabilities. Users can access it on a variety of devices and browsers.
user stories
>2.1 Adopters
As an adopter, I would like to browse available puppies based on criteria such as age, breed, and location.
As an adopter, I would like to see detailed information about each puppy including images, description, and adoption status.
As an adopter, I would like to submit my adoption application form online.
>2.2 Administrator
As an admin, I want to add, edit or delete puppy profiles.
As an administrator, I would like to review and manage adoption applications.
As an administrator, I want to send notifications to users about the status of their adoption applications.
Feature
>3.1 User registration
Allow users to create accounts with a unique username and password.
Send verification email when registering.
>3.2 Puppy List
Displays a list of available puppies on the home page.
Includes filters to sort puppies based on criteria such as age, breed, and location.
>3.3 Introduction to puppies
Provide detailed information about each puppy including images, description and adoption status.
Display a "Contact Adoption" button on every profile.
>3.4 Adoption application
Allows users to submit an adoption application by filling out a form containing personal information and reasons for adoption.
Send a confirmation email to the user upon successful submission.
>3.5 Administrator Dashboard
Provides an admin dashboard for managing puppy profiles and adoption applications.
Allows administrators to update the status of adoption applications.
navigation
>4.1 Title
Includes a navigation menu with links to Home, Puppies, Adoption Process, and Contact Us.
>4.2 Footer
Displays links to privacy policy, terms of service, and contact information.
Technical Requirements
>5.1 Technologies
Use a responsive web design framework for cross-device compatibility.
Implement a backend system for user authentication and data storage.
>5.2 Security
Implement HTTPS for secure data transmission.
Regularly update and patch software to address security vulnerabilities.
User Interface (UI) Design
>6.1 Theme
Choose a friendly and visually appealing theme that aligns with the concept of a Puppy’s Home.
>6.2 Colors
Use a color palette that reflects warmth and approachability.
>6.3 Imagery
Include high-quality images of puppies throughout the website.
Testing
>7.1 User Testing
Conduct usability testing with potential adopters to gather feedback on the website’s ease of use.
Address any identified issues and iterate on the design accordingly.
Maintenance
>8.1 Updates
Regularly update content, including puppy profiles and adoption information.
Monitor and update the website to ensure compatibility with new web technologies.
# Structure
* Interactive Design:
* Navigation: Implement smooth scrolling to partial anchors for a better user experience.
* Puppy Details: Use a modal popup or expandable section to get detailed puppy information.
* Contact Form: Real-time validation and feedback on contact forms.
* Buttons: Add hover effects and transitions for a more interactive feel.
>The user’s action is to scroll down the page, click on the button element that displays more information, until the quiz section. The quiz section provides a series of pairs for the user to choose, click on the radio button and submit at the end. The system then reacts by displaying the correct and incorrect answers. Users can press a button to reset the pet to its starting position. Users can fill in their email address and name in the contact form. Users can select from a list of pet ages and calendar dates before submitting the form.
## Information architecture:
>Logical Sections: Organize content logically into sections (Home, Puppies, Adoption Process, Contact Us).
Clear labeling: Make sure navigation links and section titles are labeled clearly and concisely.
Consistent design: Maintain a consistent design language and layout throughout your website.
This single page takes a top-down approach, starting with the broadest introduction of the content and users scrolling down to see new sections that present the content in a more narrow way. The page ends with a contact form, opening u
p avenues for further personal learning.

## Skeleton & Surface
* Navigation
Since this page is intended to be used as a class assignment, navigation is almost entirely within this page, with only 1 courtesy navigation tool - a link describing the LCC.

* Surface
Bootstrap is used for almost all “surface” level components. However, a JavaScript program is implemented that randomizes the background color of pet objects. Light red is used throughout as this is the official color of the Red Cross.

## Specification
::Process of using this website::
>The user completes registration on the homepage
The user completes the login.
Users browse the available pets throughout the website to find the pets they are interested in.
The user gets the result.
Users can check the pet’s age, gender, personality, health status and other information.
User views all pet photo galleries to find preferences
Users select their preferences by completing a questionnaire
Users get their results
Users can view relevant information such as pet breeds, backgrounds, and interesting facts about Breaded.
Users can provide feedback and upload pets they want to add to our website.
—For the above stages—
Users can click the login box on the page and enter their account name and password to log in.
If the password is forgotten, the user can complete the login by clicking Forgot Password.
If the user has not yet registered an account, the user can complete the registration by clicking the “No Account” button.
Users can click on the navigation bar at the top of the page, and by clicking on different buttons, users can navigate to specific parts of the page.
Users can complete the questionnaire by clicking on checkboxes, radio buttons, ranges, and selection boxes.
Users can submit a feedback form to help us improve;
Users can add pets they want but don’t see to our library in the feedback area.
3. Resources:
Description: adopt materials for pet owners.
Content: Things to do for pets like Donate and Fundraise&Volunteer
4. Community:
Description: Connect with other pet enthusiasts.
Content: Forum, chat, and social media links for community interaction and sharing experiences.
5. Contact Us:
>Description: Reach out to Fuzzy Friends Home.
Content: Contact form, email addresses.
Think of your application as a collage of components.
The component that the user interacts with?
Technologies Used:
Frontend: HTML, CSS, JavaScript
* Responsive Design:
Ensuring a responsive design for a seamless experience across devices.