# Final Project Discription
group member: Xinyue Fu, Wanyu Wu, Jingyu Wu, Manru Li
***Our codepen link:***
https://codepen.io/jingyu-wu/collab/RwyvwPx

***Discription***
**Purpose of this web page**:
We wish to save people time to consider what to eat; or to help people who cannot make decisions about what to eat make up their mind so that they could enjoy Christmas more.

**Buttons**:
We have added two significant javascript functions to let them share with friends, and another one lets people choose whether they wish to eat in the restaurant or takeout. The shared one is easy. We will just lead people to the Snapchat page to log in and share with others when they click on it. And they can share this with their friends in Snapchat.
Then for the other one, we first need to create a popup page, We give it the id “dialog” on this page that will show up later. It has a confirmation message where it has the order type and phone number and an okay button for you to click. We first set the display to none. So it will not show up in the first place. Then, we add event listeners to give them different tasks to do. Then we loop through radio buttons and get the selected value we need, give them the new selected value. After we get all the value we need, the dialog will show up, then we click the okay button, it will become none again.

**Visual design:**
First, we changed the header and instruction text fonts to Parisienne and Courgette by adding new links to their font families in the HTML. Then, to differentiate the content from the header, we put two borders below the header. We used a different website for graphic design to make a poster with a Christmas dinner theme and then moved it to the center of the page by modifying the margin data. We also included a background image in the HTML document with the same Christmas theme and the same color scheme at the very bottom of the page. The top header uses the Parisienne font and a shadow effect achieved via the CSS document, whereas the middle of the page adds an instruction sentence and uses the Courgette font. After that, we changed the color of the wheel so that it would be consistent with the whole color scheme. Then, by finding the class name in the HTML, we changed the body color and font color of the “clink to spin” and share link buttons in the CSS so that the picture would appear to have more visual cohesion. In the end, we gave each of the four connections a new backdrop and color by altering the hyperlink buttons in CSS.

**The Spinning Wheel:**
（Before writing the code, we learned from a case given to us by Jacqueline:https://codepen.io/sumeshkp18/pen/VGBPYg ）
The spinning wheel we created can achieve the effect that when the user clicks on the button “click to spin”, the wheel will automatically start spinning and gradually stop by itself. The arrow’s end in the middle of the wheel will point to a certain part. Each part represents a certain kind of food. The appearance of the wheel is mainly coded by html and css, while the rotation function of the wheel is achieved by javascript.
To be more specific:
To begin with, the `<div class="container"> `part has created the spinning wheel. Inside this part, we have 8 "div"s, each matches 1/8 of the spinning wheel. When we are trying to make it spin, we are actually making the whole "container" spin.

On the part I have highlignted: I added the “onclick” function, so that when the user click the button with “click to spin” on it, the function `trans()` will be executed.

This is the js code.

Firstly, we use `document.querySelector(“[the name of the div]”)`to ask js to choose a certain `div` from html code. And we created a variable “c” to mark it.

Here we created a random number “n” to simulate the random position where the spinning wheel stops at.

This function “trans” is the function we called by “onclick” in html’s “bigbuttoon”. Here, the console.log can be omitted and only be used for debugging.
The “c.style.transform” is used towards the variable “c” that we defined before(the div we chose in html.) It changes “c”’s display style.
Note that the part: transform = rotate( n deg) uses the random number “n” we created in the last step, which means the wheel's angle being spun is random.

In the end, we use another random number to update the previous “n”, so that every time the user click the bigbutton, the wheel’s angle being spun is different.

**Reflection of the course:**
We really love the course, the three big activities were really great that it let us to create the content we want, look at Jin’s video, doing activities on FCC and so on. Also, doing design follow teachers steps, answer all the basic questions in Tinker by manipulate the thing. We love all these things.