Project Survey Josefin R #444
Conversation
There was a problem hiding this comment.
Wow what an amazing project! the amount of different objects you have in your array is really impressive and how you make it work with filtering and mapping. The layout is responsive, I tried also on my phone. One thing to look into is that proceed button is very small on phone. Also when I went for salty soft candy I got licorice and fruit as flavour to choose from. Such an impressive and complex survey! great work!
| @@ -13,7 +13,9 @@ | |||
| work correctly both with client-side routing and a non-root public URL. | |||
| Learn how to configure a non-root public URL by running `npm run build`. | |||
| --> | |||
| <title>Technigo React App</title> | |||
| <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet"> | |||
There was a problem hiding this comment.
I think the two fonts you picked looks really good together.
| {progress < 1 && ( | ||
| <div className="introMsg"> | ||
| <h3> | ||
| You've reached a survey made by your local convenient store. |
|
|
||
| const TasteGroup = ({ tasteGroup, setTasteGroup }) => { | ||
| const uniqueTastes = [...new Set(SnacksArray.map((snack) => snack.taste))]; | ||
|
|
There was a problem hiding this comment.
This is really impressive, using one array to store all the different snacks. And then make a new array of one specific value from that array. which is then mapped again for the buttons. Just typing it out to try and wrap my head around it.
code/src/App.js
Outdated
| </div> | ||
| )} | ||
| {progress === 1 && <TasteGroup tasteGroup={tasteGroup} setTasteGroup={setTasteGroup} />} | ||
| {progress === 2 && <TypeOfSnack tasteGroup={tasteGroup} type={type} setType={setType} />} |
There was a problem hiding this comment.
Great work, passing the values from earlier questions to be able to do the conditionals!
| const handleTypeChoice = (event) => { | ||
| setType(event.target.value); | ||
| }; | ||
| const filteredForTasteGroup = SnacksArray.filter((snack) => snack.taste.includes(tasteGroup)); |
There was a problem hiding this comment.
So impressed by this! Filter to only include the values corresponding with previous answer and then making a new array based on that. Mind blowing!
code/src/App.js
Outdated
| tasteGroup={tasteGroup} | ||
| type={type} | ||
| texture={texture} | ||
| flavor={flavor} |
There was a problem hiding this comment.
good idea to have the progress button be a separate component. But maybe it does not need all that is being passed to it?
| animation-iteration-count: infinite; | ||
| } | ||
|
|
||
| @keyframes shake { |
| const flavorsArray = flavor.length > 2 | ||
| ? `${flavor.slice(0, -1).join(', ')} and ${flavor.slice(-1)}` | ||
| : flavor.join(' and '); |
There was a problem hiding this comment.
Wow, I feel like you have really thought of everything! this looks like a great way to decide how it should be displayed depending on how many words there are
No description provided.