Survey - v6 #438
Survey - v6 #438
Conversation
…st track of time creating a moving dot
…most done with the js setup
…s but seems impossible, safari is evil
| import { Who } from './components/Who' | ||
| import { Summary } from './components/Summary' | ||
| import { Breathe } from './components/Breathe' | ||
| import hug from './img/hug.svg'; |
There was a problem hiding this comment.
Didn't know you could import images as well as components. Interesting!
| </div> | ||
| </> | ||
| )} | ||
| {step === 8 && ( |
There was a problem hiding this comment.
I loved this part! It was like a surprise bonus at the end.
| export const Activity = ({ activity, setActivity, step }) => { | ||
| return ( | ||
| <> | ||
| <div className="content-container"> |
There was a problem hiding this comment.
I notice some of the classnames aren't in camel case. Not a biggie, but maybe for future reference?
| <div> | ||
| <p className="p-step">Current step: {step} / 7</p> | ||
| </div> | ||
| <h4> Where do you feel the most at ease?</h4> |
There was a problem hiding this comment.
Really nice with the images above the choices. Elevates the whole thing! I would recommend making the files a bit smaller though. As it is now it takes a while for the images to load, which takes away a bit from the experience.
| height="170" | ||
| fill="none" | ||
| strokeDasharray="20 20" /> | ||
| <circle cx="10" cy="10" r="8" fill={colour} className="blurryCircle"> |
There was a problem hiding this comment.
This was really the icing on the cake! Managing to implement a moving image that is also relevant to the excercise, amazing!
| <> | ||
| <div className="content-container"> | ||
| <div> | ||
| <p className="p-step">Current step: {step} / 7</p> |
There was a problem hiding this comment.
Nice job displaying current step!
| <p className="p-step">Complete 7 / 7</p> | ||
| <h4 className="sumh4">So...</h4> | ||
| <p> | ||
| {name}, picture yourself by the {place} where you are about to start your {activity}. <br /> |
There was a problem hiding this comment.
Great way of showing the results. They look so much better in a story than in a list.
| cursor: grabbing; | ||
| } | ||
|
|
||
| @media (max-width: 668px) { |
There was a problem hiding this comment.
If you reduce the width a bit, or add margin: 0 here the container will fit iPhone5/SE too. Right now there is a horizontal scroll on this step on the smallest phone.
| @@ -0,0 +1,48 @@ | |||
| import React from 'react'; | |||
|
|
|||
| export const Temp = ({ temp, setTemp, step }) => { | |||
| onChange={handleWhoChange} /> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Nice, clean code all throughout this project. Apart from a few minor issues, it works super well! Good job!
https://stress-less-survey.netlify.app