Final Project Web App UI Group Project #13
Date: 2022/12/18
:::success
Codepen Link:https://codepen.io/mutiprasetyo/pen/yLqBqEG/eb3c106eef79625de573841d4bf5bfd5?editors=0011

:::

**TEAMS**
:::info
Group 13 Members: Muti, Justin, Ingrid, and Jiayi
:::

**PROBLEM**
> Your job is to define a simple problem that your audience [you choose] desire and articulate it in a sentence.

:::info
Too many bubble tea orders are placed during rush hours around 11AM to 3PM at a daily basis. **BeeZeeeee Bubble Tea Shop** only has 2 employees to fulfill orders, and it always understaffed during rush hours.
:::

**SOLUTION**
> Your solution is a web application user interface built in HTML and CSS. When I say web application - it means I'd like for you to include ways in which your user might interact with your design (e.g. user interfaces like buttons, inputs, etc.) Your solution does NOT have to be functional. We don't know much Javascript yet so this is outside the scope of this project. In short, I want you to create a "mock-up" of sorts to demonstrate your idea, where just by seeing the interface and inferring the affordances granted through the user interface - we can imagine how this application would work and possibly feel.
> For an example - think about the interface for the TODO application. Without actually using it - you still understand what it does and how it might work based on the dummy content and placeholders that are present. I want you to build that snapshot of the experience in HTML and CSS.
:::info
We will create an online pre-order system which customers can order bubble tea before the shop opens and then pickup the drinks to pay. In this way, bubble tea shop owners know what to prepare before the rush hours and prepare materials strategically.
:::

**SPECIFICATIONS**
> You will submit DOCUMENTATION with your project:
Along with your code you will also submit a HackMD describing how your code might work.

Think about your application as a collage of components.
* Components users interact with:
:::info
- [x] * Slideshow (a carousel) of all the signature bubble teas

- [x] * Menu
* Information card: Name+Price
- [x] * Hover: Click on the photo, there will be a larger pop up information card on more description of the bubble tea (eg. ingredients, flavor, etc.)
- [x] * Give customers options to choose from (eg. Size, Ice, sugar level, added toppings)
- [x] * **[NEW]** Cart

- [x] List of items including their customization and total price.
- [x] Saving the teas chosen by users

            function getIceValue(event) {
                let iceType = document.querySelector('[name="ice"]:checked');
                  if (iceType == null){
                alert("choose your ice");
                  }else{
                return iceType.value;
                   }
                }

            function getSugarValue(event) {
                let sugarType = document.querySelector('[name="sugar"]:checked');
                  if (sugarType == null){
                alert("choose your sugar");
                  }else{
                return sugarType.value.replace("id= "," ");
                  }
                }

            function getMilkValue(event) {
                    let milkChoice = document.querySelector('[name="milk"]:checked');
                 if (milkChoice == null){
                alert("choose your milk");
                 }else {
                return milkChoice.value;
                 }
            }

- [x] Showing the items chosen and total price in cart section

            function myFunction(event) {

              let myNewDrink = {};
              let teaID = parseInt(event.currentTarget.id);
              for (tea of bubbleTeas) {
                if (tea.id === teaID) var nameTea = tea.name;
              }

              myNewDrink.name = nameTea;
              let newIce = getIceValue();
              myNewDrink.ice = newIce;
              console.log(myNewDrink);
              let newSugar = getSugarValue();
              myNewDrink.sugar = newSugar;
              console.log(myNewDrink);
              let newMilk = getMilkValue();
              myNewDrink.milk = newMilk;
              console.log(myNewDrink);

              if (newIce == null || newSugar == null || newMilk == null) {
                return myNewDrink;
              } else {
                alert("Added to the cart!");
                totalPrice += 5.99;
                checkOutList.push(myNewDrink);
                resetRadio();
                console.log(checkOutList);
                orders.innerHTML = "";
                for (item of checkOutList) {
                  orders.innerHTML += `
                   <div class="col price"> ${item.name} (${teaPrice}) </div>
                 <div class="col"><h5>${item.ice}, ${item.sugar}, ${item.milk}</h5></div>
                 `;
                }
                totalPriceText.innerHTML = `<h1 id="totprice">Total Price $ ${totalPrice}</h1>`;
              }
            }
    - [x] Reset button, removing all the items previously chosen

function resetCart(){
orders.innerHTML = "";
checkOutList = [];
totalPrice = 0;
totalPriceText.innerHTML = `<h1 id="totprice">Total Price $ ${totalPrice}</h1>`;
}

- [x] * **[NEW]** Data Structure/Computational Thinking

    - [x] Put all those things (different properties: description, price )  into an array and show a template.![](https://i.imgur.com/w4Pt1ty.png)

- [x] * **[NEW]** Additional user interaction
    - [x] Send a reminder when the user forgot to choose one of the choice. !![](https://i.imgur.com/GFF80vt.png)


    - [x] Alert for adding bubble tea successfuly to the cart![](https://i.imgur.com/gGtIr24.png)

    - [x] // Users will pick the ice, milk or sugar of a bubble tea each time and then add the bubble tea to the cart.[](https://i.imgur.com/SnVVxfJ.png)


- [x] * Order
    - [x]     * A form to collect customer’s information (eg. Name+Phone Number) 
    - [x]     * [Order now] button for customers to make the order. 
:::
* Components that react to user interaction:

:::info
- [x] * The color of the button changes when hovering. 
- [x] * After users click on the [Order now] button,
    - [x]     * There will be a green pop up message saying that “Thanks for ordering with xxx, here’s your transaction number 12345. Your order has been completed''. **Result: For now we only use the default alert design and try to explore a little bit of Javascript to create the pop up.**![](https://i.imgur.com/w0eBVl0.jpg)
    - [x]     * The users will be directed to other page that indicates that the order is in progress and their!
 order number. **Result: for now, we just put an image URL instead of a real page to indicate the dummy order number.**![](https://i.imgur.com/vtFhFV3.gif)
:::
*  Think about the behaviors of your components and document how their BEHAVIORS/ACTIONS would unfold (if this was a working JS prototype.)
> E.g. Pushing this button will cause this DIV to change colors.
E.g. Entering a value into this text field will change the content of this heading to X.
E.g. When the mouse gesture is made, the computer would detect it clears the screen, replacing it with new HTML that tells the user X message as feedback.
E.g. When the city information is entered into the form, it will be sent to Google and we will get back the LAT and LON coordinates. THEN the computer will place a pin on the map.
Your imagination here is the limit.


:::info
* When the users press the [Order now] button, if there's a full functioning Javascript:
    * Using `method="POST"` in our `<form>`, it will bring the users to the next page showing their order number and the progress of the order. 
    * Using `method="POST"` to also send all the data to a Google Sheet so that the shop owner can see the data. 
        - [x]     Create a googlesheet and paste the sharelink [here](https://docs.google.com/spreadsheets/d/1ynVs7e8x_dqRbG2B7GaMc8i_d9baNzyJx5x00fOmSzY/edit?usp=sharing) 
* **[NEW]** When customer click on "add to the cart", . 
    * [x] Items will be saved to the CART section using `myFunction(event)`function. 
    * [x] When customer click on "Reset", the orders will be reset and removed using `resetCart()`function. 



:::

* Describe step by step what the user does, then how the computer reacts for the most interesting aspects of your idea with specificity.

:::info
1. When a customer first goes into the webpage, he/she sees a slideshow of the images of the signature bubble teas first. 
2. Then, order bubble teas under the “menu” section right after the slideshow. 
3. Consumers will be able to see their orders and the total price in My Cart section.
4. At last, customers fill in their information, like their name and phone number, and then click the [Order now] button. 
5. A green confirmation message will pop up saying that “Thanks for ordering with xxx, here’s your transaction number 12345. Your order has been completed''.  OR If the customer doesn’t fill out the form correctly, a  red pop up message saying “We’re sorry. Your order hasn’t been completed. Please try again.” (Notes: Required, validation for empty info)
:::
**TEAM REFLECTION:**
> Reflect on the process you went through - what did you learn, what was challenging, how do you think you need to improve, what are the next steps forward for you and your learning! etc.
> 
:::info
*    The following comprises the team's thoughts:
    *    It is fun to explore various elements to build our own webpage for the topic we are intereseted in. It encourages our initiative to look for learning sources ourselves and try to make sense of them as much as possible.
    *    We learn to use Javascript by strcuturing our bubble teas data in Javascript, and try to show it in the interface using `inner.HTML`.
    *    The most challenging part is to put the orders into Cart section since it involves a lot of passing data codes. 
    *    Semester experience: HTML CSS are relatively easier than JavaScript. And we feel like we learn too fast for Javascript, so it has given us challenges in working on the assignments. However, we learn that we need to be proactive in learning how to code: looking for various discussions and documentation online. 
*    In this final, we added 
        - [x]         *   Add a Cart on what the customer has selected (eg. House Special Milk Tea, 30% Sugar Level, No Ice) before checkout. 
        - [x]         *  Put the teas info in Javascript data using array of objects. 
        - [x]         *  Add one more page to see their order number and the progress of their order. 


:::

**Articulation Challenge (Extra) specificity is rewarded:**
- [x] **Try to use DOM specific language like: parent, children, class, id, css, properties, values, etc.**

:::info
 * Click on the slide show, it will show several signature bubble teas. 
 * Incomplete customer information will have a feedback as "this field is required". 
 * Customer can click the "add to cart" button, the message "saved to the cart" will pop out. 
 * When the mouse moved close to the picture, the picture will enlarge. 
 * There embedded with card, footer, form, carousel, and JS for increment and decrement, different alignments in our project.  
:::
- [x] **Try to use DATA specific language like: boolean, number, string, array, object**
:::info
- When user types their last and first name, this is the string. 
- When they added amount of the bubble tea using the number input. 
- When customers type their phone number which also using the number input. 
- Boolean function (in JS) will be applied in the future when customer used to removed/add their bubble teas if they do/don't like it. 
:::
This is a challenge and you won't be penalized for getting things "wrong" here. But we're interested in seeing how you're thinking about the things we've been exploring so far.
- [x]  Use clean HackMD Markup to organize your documentation
- [x]  Include a little bit of *reflection on the process you went through - what did you learn, what was challenging, how do you think you need to improve, what are the next steps forward for you and your learning!* etc.

Remember, you don't have to implement this in code yet - but we want you to think explicitly about step-by-step, what your UI affords the user and how the system might respond in interesting (feedback-y) types of ways. How does the user interface change the state of the application (what data might it change) and how can the system react to that state change? The more specifically you can use language pertaining to how user interaction will change the HTML/CSS - the DOM the better.

 **You will submit CODE with your project.** 
- [x] Projects do not have particular specifications about what HTML, CSS, or JS must be included. The concepts and techniques used are wholly dependent on what you need to achieve based on the problem and solution proposed.
- [x] Submit CLEAN code with proper formatting.
- [x] Tab/2-space indentations for child elements
- [x] Other good practices as demonstrated in various examples throughout class.

**SUBMISSION:**
On Canvas - You will submit:
    * HackMD URL with your documentation of what this app is and how it would work.
    * Codepen URL included inside your HackMD for the code submission.

**Rubric GUIDANCE**: 
  Projects are evaluated on the following criteria with 6 points being the top score:
1 - Below Standard
2 - Standard
3 - Above Standard

**Code**
* Limited understanding or limited demonstration of competency with foundational code concepts.
* Meets standards of competency with foundational code concepts. Code is also clean and organized.
* Demonstrates coding competency beyond the scope of what was formally covered in the course.

**Challenge**
* Limited demonstration of challenge appropriate to student ability; Limited demonstration of effort.
* Challenge appropriate to student ability; Effort apparent.
* Demonstrates successive and continual challenge-seeking and clearing behavior, effort.

**Meaningful**
* Reflection obviously shows zero thought into what doing the project and learning from it meant.
* Reflections are introspective and insightful; Demonstrates active meaning-making of learning XP.
* Reflections have a quality to them that is remarkable but cannot quite be summarized in this box.