-
Notifications
You must be signed in to change notification settings - Fork 435
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
YlvaK-W6-Survey-with-React #449
base: master
Are you sure you want to change the base?
Changes from 1 commit
0a8d025
eaae3e8
5ed0913
6732eeb
2923c93
f698926
938c0a1
9df08db
06d3504
7360b5d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,66 +1,78 @@ | ||
/* eslint-disable react/react-in-jsx-scope */ | ||
import React, { useState } from 'react'; | ||
import StartSurvey from 'components/Start/StartSurvey'; | ||
import Question from 'components/Questions/Question'; | ||
import SubmitScreen from 'components/SubmitScreen'; | ||
import NameInput from 'components/Start/NameInput'; | ||
import ProgressCounter from 'components/ProgressCounter'; | ||
import EndSurvey from './.components/EndSurvey/EndSurvey'; | ||
import './index.css'; | ||
import NameInput from 'components/NameInput'; | ||
import Favoriteplace from 'components/Favoriteplace'; | ||
import Time from 'components/Time'; | ||
import Comments from 'components/Comments'; | ||
import Slider from 'components/Slider'; | ||
import EndSurvey from 'components/EndSurvey'; | ||
|
||
// import { answersQ1, answersQ2, answersQ3, answersQ4 } from 'library/answers'; | ||
// import FormTextField from 'components/FormTextField'; | ||
// import FormSelect from 'components/FormSelect'; | ||
import './index.css'; | ||
|
||
export const App = () => { | ||
const [counter, setCounter] = useState(0); | ||
const [step, setStep] = useState(1); | ||
const [name, setName] = useState(''); | ||
const [page, setPage] = useState('start'); | ||
const [question1, setQuestion1] = useState(''); | ||
const [question2, setQuestion2] = useState(''); | ||
const [question3, setQuestion3] = useState(''); | ||
const [question4, setQuestion4] = useState(''); | ||
// const nextQuestion = () => { | ||
// setQuestionNo(questionNo + 1); | ||
// }; | ||
const [favoriteplace, setFavoriteplace] = useState(''); | ||
const [time, setTime] = useState(''); | ||
const [comments, setComments] = useState(''); | ||
const [slider, setSlider] = useState(''); | ||
const [submitted, setSubmitted] = useState(false); | ||
const [progress, setProgress] = useState(0); | ||
|
||
const handleStepIncrease = () => { | ||
const increment = 100 / 5; | ||
setStep(step + 1); | ||
setProgress(progress + increment); | ||
} | ||
|
||
// first question - Radio Buttons // | ||
// second question - Select field // | ||
// third question - Freetext field // | ||
const handleSubmit = (e) => { | ||
e.preventDefault(); | ||
setSubmitted(true); | ||
}; | ||
|
||
return ( | ||
<div className="main"> | ||
{page === 'start' && ( | ||
<StartSurvey | ||
nextPage={() => { | ||
setPage('questions'); | ||
}} | ||
setName={setName} | ||
name={name} /> | ||
)} | ||
{page === 'questions' && ( | ||
<Question | ||
nextPage={() => setPage('end')} | ||
question1={question1} | ||
setQuestion1={question1} | ||
question2={question2} | ||
setQuestion2={question2} | ||
question3={question3} | ||
setQuestion3={question3} | ||
question4={question4} | ||
setQuestion4={question4} /> | ||
)} | ||
{page === 'end' && ( | ||
<EndSurvey | ||
nextPage={() => setPage('start')} | ||
name={name} | ||
question1={question1} | ||
question2={question2} | ||
question3={question3} | ||
question4={question4} /> | ||
<div className="survey"> | ||
<h1>Please fill in this survey about your favorite place!</h1> | ||
{submitted ? ( | ||
// eslint-disable-next-line max-len | ||
<EndSurvey name={name} favoriteplace={favoriteplace} time={time} comments={comments} slider={slider} /> | ||
) : ( | ||
<div className="result-container"> | ||
{step === 1 && ( | ||
<NameInput name={name} setName={setName} /> | ||
)} | ||
{step === 2 && ( | ||
<Favoriteplace favoriteplace={favoriteplace} setFavoriteplace={setFavoriteplace} /> | ||
)} | ||
{step === 3 && ( | ||
<Time time={time} setTime={setTime} /> | ||
)} | ||
{step === 4 && ( | ||
<Comments comments={comments} setComments={setComments} /> | ||
)} | ||
{step === 5 && ( | ||
<Slider slider={slider} setSlider={setSlider} /> | ||
)} | ||
{step < 6 && ( | ||
<div className="survey-button"> | ||
<button type="button" className="next-button" onClick={handleStepIncrease}>Next question</button> | ||
</div> | ||
)} | ||
<div className="progress-bar"> | ||
<div className="progress-bar-fill" style={{ width: `${progress}% ` }} /> | ||
{progress}% | ||
</div> | ||
{step === 6 && ( | ||
<form onSubmit={handleSubmit}> | ||
<p>Thank you!<br />Click submit for your summary.</p> | ||
<button type="submit" className="submit-button">Submit</button> | ||
</form> | ||
)} | ||
</div> | ||
)} | ||
<footer> | ||
* This survey was made by Ylva *<br /> | ||
</footer> | ||
</div> | ||
); | ||
}; | ||
|
||
export default App; | ||
} |
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import React from 'react'; | ||
|
||
const Comments = ({ comments, setComments }) => { | ||
const handleCommentsChange = (event) => { | ||
setComments(event.target.value); | ||
} | ||
return ( | ||
// eslint-disable-next-line jsx-a11y/label-has-associated-control | ||
<label htmlFor="comments" className="comments-label"> | ||
<p>If you have additional comments you can write them here:</p> | ||
<textarea | ||
id="comments" | ||
value={comments} | ||
onChange={handleCommentsChange} | ||
className="input-field-comments" | ||
placeholder="Write any additional comments here..." | ||
rows={4} | ||
cols={20} /> | ||
</label> | ||
); | ||
} | ||
|
||
export default Comments; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from 'react'; | ||
|
||
const EndSurvey = ({ name, favoriteplace, time, slider, comments }) => { | ||
return ( | ||
<div className="survey-summary"> | ||
<h2>Thank you for answering this survey!</h2> | ||
<h2>Summary:</h2> | ||
<h2>Name: {name}</h2> | ||
<h2>Favorite place: {favoriteplace}.</h2> | ||
<h2>Time at favorite place: {time}.</h2> | ||
<h2>Your input: {slider} % happy.</h2> | ||
<h2>Additional comments: {comments}.</h2> | ||
</div> | ||
); | ||
}; | ||
|
||
export default EndSurvey; |
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import React from 'react'; | ||
|
||
const Favoriteplace = ({ favoriteplace, setFavoriteplace }) => { | ||
const handleFavoriteplaceChange = (event) => { | ||
setFavoriteplace(event.target.value); | ||
} | ||
return ( | ||
<label htmlFor="favoriteplace" className="favoriteplace-label"> | ||
<p>What is your favorite place/surrounding?</p> | ||
<br /> | ||
<input | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If you add a unique label to each radio button the radio buttons will be accessible and more user-friendly. That way you can click on the question and check the radio button and you don't have to click on the radio button. |
||
type="radio" | ||
name="favoriteplace" | ||
value="Forest" | ||
onChange={(e) => setFavoriteplace(e.target.value)} | ||
required /> | ||
Forest | ||
<br /> | ||
<br /> | ||
<input | ||
type="radio" | ||
name="favoriteplace" | ||
value="Sea" | ||
onChange={(e) => setFavoriteplace(e.target.value)} | ||
required /> | ||
By the sea | ||
<br /> | ||
<br /> | ||
<input | ||
type="radio" | ||
name="favoriteplace" | ||
value="City" | ||
onChange={(e) => setFavoriteplace(e.target.value)} | ||
required /> | ||
In the city | ||
<br /> | ||
<input | ||
id="favoriteplace" | ||
value={favoriteplace} | ||
onChange={handleFavoriteplaceChange} | ||
readOnly | ||
className="input-field" /> | ||
</label> | ||
) | ||
} | ||
|
||
export default Favoriteplace; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like the progress bar!