Map buttons and forms

.gitignore

@@ -39,6 +39,9 @@ Thumbs.db
 # Typical Node.js artifacts #
 #############################
 
+# Lock file so we don't bloat the git log stats
+package-lock.json
+
 # Logs
 logs
 *.log

CONTRIBUTING.md

@@ -65,3 +65,5 @@ To resolve any merge conflicts, we recommend you to use rebase to resolve confli
    - We use React as the front-end, so when you want to build the project, open the terminal and type npm -start. Make sure to copy paste the localhost and the corresponding port website to your browser. 
 
 
+# Guide to Contributing
+Delete the contents of this file and replace with the contents of a proper guide to contributing to this project, as described in the [instructions](./instructions.md)

README.md

@@ -1,51 +1,19 @@
+# Project Repository
 
-![ah](https://github.com/agiledev-students-fall2023/4-final-project-teambaker/assets/100020447/b4320f2b-92c8-4dbf-8604-4aca64a8414e)
+This repository will be used for team projects.
 
-## I. Get Started
-TBD--Instruction for how to set up and run this app.
+Several sets of instructions are included in this repository. They should each be treated as separate assignments with their own due dates and sets of requirements.
 
+1. See the [App Map & Wireframes](instructions-0a-app-map-wireframes.md) and [Prototyping](./instructions-0b-prototyping.md) instructions for the requirements of the initial user experience design of the app.
 
+1. Delete the contents of this file and replace with the contents of a proper README.md, as described in the [project setup instructions](./instructions-0c-project-setup.md)
 
-## II.  Contributing Members
-- Nina Xiao (Product Owner): [@nina1o1](https://github.com/nina1o1)
-- Tracy Zhang (Scrum Master): [@yz5835](https://github.com/Ceiceiceii)
-- Lesley Zhao: tz2074  [@lesleyzhao](https://github.com/lesleyzhao)
-- Richard Lee: cl5515 [@Richard](https://github.com/lunnnnnn)
-- Charlotte Ma: rm5592 [@Charlotte Ma](https://github.com/Charlo-M)
+1. See the [Sprint Planning instructions](instructions-0d-sprint-planning.md) for the requirements of Sprint Planning for each Sprint.
 
- #### Contribute to this project
- please refer [CONTRIBUTING.md](https://github.com/agiledev-students-fall2023/4-final-project-teambaker/blob/master/CONTRIBUTING.md) to see how to contribute to this project.
+1. See the [Front-End Development instructions](./instructions-1-front-end.md) for the requirements of the initial Front-End Development.
 
+1. See the [Back-End Development instructions](./instructions-2-back-end.md) for the requirements of the initial Back-End Development.
 
+1. See the [Database Integration instructions](./instructions-3-database.md) for the requirements of integrating a database into the back-end.
 
-
-## III. What and why?
-This is an engaging and educational map application, inspired by the scattered information about art history online. There is no a unified website to summarize all historical periods in art history, which posed challenge for art education. This application will allow users to explore random artwork and music in different historical time periods and regions across Europe. 
-
-The user can select a year in the history, and the map will display corresponding geometric features at that time. When the user click on some location, the application will collect information online and display a random image of artwork and a soundtrack specific to the year and location. In this way, the user can gain a more comprehensive understanding of artworks and compositions relative to countries, time periods, and historical details.
-
-#### Product Vision Statement: 
-GoodOldMap will be an one-stop educational map application enabling students and art lovers to learn different art movements via interactive map and exploration on random artwork across different time periods.
-
-
-## IV. For whom?
-This application is for children and teenagers who are curious to learn about art and culture. The user can explore different art and music of different regions and time periods, building a more comprehensive undertanding of art and cultural with a geometric understanding.
-
-## V. How?
-The platform is composed of three main themes below, as well as ordinary functionalities like sign up an account, login with password, and reset password.
-1. Art Map:
-   - The user will be able to drag the timeline bar to learn about historial art & music based on the unit of the year. The bar will display specific art movement like "The Renaissance" when being dragged and change its content based on years. When the user drag the timeline bar, the map will show the boundaries of countires, cities, and general time periods like "The Renaissance."
-   - When clicking a point of the map, the user will see a popup window that shows random artwork and hear a random composition specific to the location and time.
-2. Art/Music Description:
-   - When the user clicks on the popup window from the previous step, he/she will find a detailed explanation of the artwork and the composition. He/she will also find roughly 10 related works completed at this time and location. He/she will be able to learn more about them by clicking on each.
-   - The users are able to add specific artwork or music to their favorite item list, and access this favorite list later in their profile page.
-3. Profile & My Favorite List
-    - The users can check any previously collected art pieces in their personal profile page, under "My Favorite".
-    - The users can sign up for an account, and the system will match a landscape painting by Van Gogh as their profile photo.
-    - The users can reset their personal information like email address, user name, and password on the profile page.
-
-
-## VI. Scope
-This project requires percise map building technology and web scraping skill. With instruction, a group of 4-6 is able to complete it in the semester.
-
-
+1. See the [Deployment instructions](./instructions-4-deployment.md) for the requirements of deploying an app.

UX-DESIGN.md

@@ -84,4 +84,13 @@ After entering a wrong combination of username and password, a notification will
 ## register
 New user can register for a new account.
 
-![register](./ux-design/wireframes/register.png)
+![register](./ux-design/wireframes/register.png)
+
+# User Experience Design
+
+This repository contains instructions and files for two assignments that together comprise the user experience design phase of a web app.
+
+Replace the contents of this file with the completed assignments, as described in:
+
+- [app map & wireframe instructions](instructions-0a-app-map-wireframes.md).
+- [prototype instructions](instructions-0b-prototyping.md)

front-end/GoodOldMap/src/components/form/formBtn.jsx

@@ -13,4 +13,21 @@ const FormBtn = (props) => {
   )
 }
 
-export default FormBtn
+const FormBtns = (props) =>  {
+  /* props: array of object (buttons)
+    {"value": "str",
+     "function": {"args":"str", "body":"str"}
+    }
+  */
+  return (
+    props?.buttons?.map((button, i) => {
+      const handleClick = new Function(button?.function?.args, button?.function?.body);
+      return(
+        <FormBtn handleClick={handleClick} value = {button?.value} key = {i}/>
+      )
+    })
+  )
+}
+
+export default FormBtn
+export {FormBtns}

front-end/GoodOldMap/src/components/form/formInput.jsx

@@ -21,6 +21,7 @@ const FormInputs = (props) => {
 }
 
 const FormInputsPopup = (props) =>{
+  // array of input objects (fields): type, id, placeholder
   return (
     props?.fields?.map((field, i) => 
       <FormInput type={field?.type} id={field?.id} placeholder={field?.placeholder} key={i}/>)

front-end/GoodOldMap/src/components/popup/popupContent.jsx

@@ -0,0 +1,18 @@
+import { FormInputsPopup } from "../form/formInput";
+import { FormBtns } from "../form/formBtn";
+
+function PopupContent(props){
+    // props: title, input(array of input objects), buttons (array of button objects)
+    return (
+        <>
+            <h2>{props?.title}</h2>
+            <form>
+                <FormInputsPopup fields={props?.input}/>
+                <FormBtns buttons={props?.buttons}/>
+            </form>
+        </>
+    )
+
+}
+
+export default PopupContent

ux-design/prototype/readme.txt

@@ -0,0 +1 @@
+The exported files of the completed prototype should reside in this directory.

ux-design/readme.txt

@@ -1,3 +1,3 @@
 The source files and exported PNG files of the app map and wireframe diagrams should reside in this directory.
 
-Your completed prototype will reside within the 'prototype' subdirectory.
+Your completed prototype will reside within the 'prototype' subdirectory.