# Web App Project
Team Numbers: Project Web App UI 34
Team members：Tiffany Zhu, Coco Wang, Kathy Zhu, Manya Qi

Our web app URL: https://codepen.io/jz3577/collab/NWMeRGr
Inspiration source: https://opensea.io/collection/genuine-undead

**What does our app do?**
Our website is a NFT trading website that sells a collection of cat pics.
**("OpenCats" - cats version of Opensea )**
The site/page we created is a seller's homepage. This page contains the seller"铲屎官"'s info, account values, and cat pics the seller is selling. Also, this page include a header/nevigation bar users can interact with and a footer containing the website owners' info and contacts. Users are able to add the cat pics they like to cart, make purchases, and as well to ask questions by contacting us.

**How does our app work?**
***1. Header & Navigation Bar-Tiffany Zhu***

The first section of our website is the header/navigation bar. It is the uppermost section and it is the first thing that our users see when they enter this site. It consists of several parts that help users identify what website this is and find what they are looking for on this site including: logo, website name, search box, category and user icon.
* Logo
* The logo represents our app and we added a cat logo with an id of "logo", it is clickable to help the users return to the site's homepage.
* In order to make it clickable, we nested the img element in an a element.
* Website name - "OpenCats"
* Search box
* There is an icon of searching with an id of "search-logo" inserted in front of the search box.
* Users are able to search anything by using this search box: they type the keywords in the search box and click the "Search" button.
* We derived the search box and search button from **Bootstrap**, which is **nav** element with a class name of "**navbar bg-light**".
* We also changed the placeholder, so the users know what keywords they should put in the search box.
The 4 category buttons and 3 user icon buttons belong to the parent nav element with a class name of "navbar" and the child ul element with a class name of "navbar-list".
* Category
* There are 4 categories created for more resources users are able to find on the website: explore, stats, resources, create. All of them are clickable and clicking on each of them will go to its specific page.
* By clicking on the word "Explore", users are able to see more on the website menu;
* By clicking on the word "Stats", users are able to see rankings of the products and the real time selling activity;
* By clicking on the word "Resources", users are able to explore more resources the app provided;
* And by clicking on the word "Create", the user who wants to become a seller will go to a new page to create a seller account.
* User Icon
* There are 3 user icons created for the users to take actions for their account and purchase. Like the categories buttons, they are clickable and link to other pages.
* By clicking on the first icon, users go to their own page, where they are able to see their profile, purchase history, favorite lists, collections, settings, etc.;
* By clicking on the second icon, users go to their wallet to see their accounts and the currency conversion for this app;
* And by clicking on the third icon, users go to the their shopping cart to see the items they added in their cart, and they can check out their purchase there.
* We made the categories and user icons clickable by nesting each category and user icon in an a element. Also, when the cursor is moved on each of them, the cursor is changed to  by applying this css rule: `.navbar > .navbar-list > li: hover {cursor: wait}`.

***2. Seller Info & Account value-Manya Qi***

Our website contains the seller's information in the second section. The seller can personalize their own homepage based on their preferences.

* "User avatar" is the first part, where users can choose an interesting picture to serve as their social icon. User avatars also have shaded boxes and borders to better divide the section.
* The page will change when the user selects the"show more"button,so I identify the class'value as the banner button.Using this function, I can change the color to orange，and change the wireframe to look different.
* The dl and dt elements arrange different text infomation. They control the arrangement and combination of their children.

***3. Cats Photos & Info-Coco Wang***

The third section is for selling the main products. It mainly includes photos(NFTs) of different cats for trading, and some basic info about the products that allow buyers to learn the cats’ name, their worth, and trading period.
* Product pics and infos are mainly separated into two sections so that the user interface is more clear.
* The "column" & "row" properties are used so that the products are evenly spread out on the page.
* Boxes and borders are used to better divide the sections.
* Round corders are incorporated to make the website appear more friendly.
* Even though links are not added for the time being, by clicking on each photo, buyers will be directed to the purchase(shopping cart) section for more detailed info about each product and checking out.

***4. Team Info & Q&A Section-Kathy Zhu***

The last section of our website include two parts, which allows the users to get more information about our teams, and contact us if they have questions.
The first part is *Meet the Team*. The four images represent the four members in our team. Below are our names as well as the link of our homepages (which is the Doodle homework we did last time).
- [ We make the images two in a row to make the page looks clear.]
- We do this by using the **Bootstrap Grid**.
- [ Users click on one of the names, and it will automatically jump to that person's homepage.]
- We do this by adding the element ***a*** within the text.
- `<h6><a href="homepage link">Name</a></h6>`

The second part of this section is *Contact Us*. If the users have any questions and want to contact us, they can use this part. We collect three information from the users. Their names, emails, and the messages they want to send us. Then with the send button, users are able to send their messages.
* [ Users type in their information and the messages they want to send out.]
* Name: We add the **placeholder** as attribute to the input, so the users know where to put first name and where to put last name.
* `<input type="text label="First Name class="form control" placeholder ="First Name" required>`
* Email: Same as the name section, is also the **input**.
* Message: The element is **textarea**.
* We add the attribute of **required** to all three inputs and textarea, so the users must fill out all three questions before click send.
* [ After answering the three questions, users can click on send to send the messages.]
* We apply the bootstrap button here. In order to make the button blue, we add the **class** with "btn btn-primary".

**Project reflection**
*For this project, we learned:*
* Sectioning info while creating a full-on web interface.
* Better incorporating bootstrap into the coding process for a more stylized layout.
* Considering more about the interactive elements for a better user experience.

*The challenges and what can be improved:*
* We found it hard to put things aside/at the same line (for the seller info) and to put the things at certain positions (our team's names are not in the center under our images).
* We noticed that the header/navigation bar would not fit the window anymore when we resize the browser.
* It might be good and convenient to use Bootstrap as a shortcut, however - we don't know how to change the CSS rules which Bootstrap already has. For example, we wanted to make the search form "transparent"(there is no gray background-color) and change the color of the search button. 
* For the cat pic and info part, we set the column as 3 in css but was still getting four columns on the web interface when we maximize the window.
* Also, we are still having trouble getting rid of the tiny dots right next to the photos from "unordered list". We tried changing the dots' color to match w/ the background but did not have the best outcome since our backgrount is gradient.