Skip to content
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

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
so ugly but finally it works!
  • Loading branch information
YlvaKarlsson committed Mar 19, 2023

Verified

This commit was signed with the committer’s verified signature.
messense messense
commit 938c0a1cc41eda7bea055a7998edc3aa20afbee0
120 changes: 66 additions & 54 deletions code/src/App.js
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}% ` }} />

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!

{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;
}
Binary file removed code/src/assets/nextarrow.svg
Binary file not shown.
Binary file removed code/src/assets/previousarrow.svg
Binary file not shown.
1 change: 0 additions & 1 deletion code/src/assets/submiticon.svg

This file was deleted.

22 changes: 0 additions & 22 deletions code/src/components/Buttons/NextButton.js

This file was deleted.

20 changes: 0 additions & 20 deletions code/src/components/Buttons/PreviousButton.js

This file was deleted.

20 changes: 0 additions & 20 deletions code/src/components/Buttons/SubmitButton.js

This file was deleted.

23 changes: 23 additions & 0 deletions code/src/components/Comments.js
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;
17 changes: 17 additions & 0 deletions code/src/components/EndSurvey.js
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;
35 changes: 0 additions & 35 deletions code/src/components/EndSurvey/EndSurvey.js

This file was deleted.

28 changes: 0 additions & 28 deletions code/src/components/EndSurvey/EndSurvey.module.css

This file was deleted.

47 changes: 47 additions & 0 deletions code/src/components/Favoriteplace.js
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

Choose a reason for hiding this comment

The 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;
Loading