Alexander : Week-6, Survey #445
Conversation
There was a problem hiding this comment.
What a well-made survey, I'm so impressed by your design! It's fun, works well with your theme and is nice to use. Great job Alexander!
You have made a great effort in this weeks project, and I have only added smaller comments on a few things in your code. No big deals.
| {products.map((product) => ( | ||
| <label htmlFor="product" key={product} className="favorite-product"> | ||
| <input | ||
| type="radio" | ||
| name="favoriteProduct" | ||
| className="product-button" | ||
| value={product} | ||
| onChange={handleProductChange} | ||
| onChecked={favProduct === product} | ||
| required /> | ||
| {product} | ||
| </label> | ||
| ))} |
| const handleStepIncrease = () => { | ||
| if (name.length > 0) { | ||
| setStep(step + 1); | ||
| setPercent(percent + 20); |
There was a problem hiding this comment.
You have a lovely progress bar; I like it a lot!
Now you have an easy way to calculate how many percentages the progress bar should increase, but imagine that you don't want to do the math yourself; then you could use something like this:
const correctPercent = (step * 100) / 6;
setPercent(Number(correctPercent).toFixed(1));
The / 6 is how many steps you have in your form.
| {/* <input | ||
| type="text" | ||
| value={food} | ||
| ref={inputRef} | ||
| onKeyDown={handleKeyDown} | ||
| onChange={handleFoodChange} /> | ||
| {console.log(food)} */} |
There was a problem hiding this comment.
No need to reference past code if you have another working solution
| @@ -0,0 +1,10 @@ | |||
| import React from "react"; | |||
|
|
|||
| const Landing = (props) => { | |||
There was a problem hiding this comment.
Unused component? I might need to be corrected here.
| import ThankYouImage from '../images/thankyou.png' | ||
| import Purchases from './Purchases'; | ||
|
|
||
| const allRange = ['It sucks', 'It is aiiight ', 'It is okay', 'it works niiiicely', 'Superb /chefs kiss'] |
There was a problem hiding this comment.
I thought this was so great, very funny! Fantastic implementation as well!
|
|
||
| /* Tablet MQ */ | ||
|
|
||
| @media (min-width: 768px) and (max-width: 991px) { |
There was a problem hiding this comment.
The app has some design differences on smaller devices (<768px). Making the form's background on smaller screens the same as on tablet/desktop could make it look more aligned with the desired experience. But this is just based on my preference for design.
Watch live here : https://ultranostalgia-survey.netlify.app/