Project Survey Josefin R #444
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,14 @@ | ||
| # Survey form with React | ||
|
|
||
| The assignment was to use React to make a form with a few questions and a summary. | ||
|
|
||
| ## The problem | ||
|
|
||
| I started with creating a lot of test components to get a better feel for React and useState, and then drawing up a flowchart on paper. When I had built some on that, I decided I wanted the answers to the questions to actually "matter", so I made an array of snacks to compare the answers to. That made the project way bigger and I had to go back and adapt to this array entering the stage so it got a bit out of hand, but I had fun. I will keep fixing errors like components not rendering properly if you don't make a choice (only had time to get a pre-set choice on the first question), and adding a few features, like the summary leading up to a randomized snack suggestion. And more styling. | ||
|
|
||
|
|
||
| ## View it live | ||
|
|
||
| The Snack survey: | ||
|
|
||
| https://illustrious-tapioca-2bd373.netlify.app/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,140 @@ | ||
| /* eslint-disable react/no-unescaped-entities */ | ||
| import React, { useState } from 'react'; | ||
| import Header from 'components/Header'; | ||
| import ProgressButton from 'components/ProgressButton'; | ||
| import TasteGroup from 'components/TasteGroup'; | ||
| import TypeOfSnack from 'components/TypeOfSnack'; | ||
| import Texture from 'components/Texture'; | ||
| import Flavor from 'components/Flavor'; | ||
| import PriceSlider from 'components/PriceSlider'; | ||
| import CommentOption from 'components/CommentOption'; | ||
| import ImportantOption from 'components/ImportantOption'; | ||
| import Results from 'components/Results'; | ||
| import FinishButton from 'FinishButton'; | ||
|
|
||
| export const App = () => { | ||
| const [progress, setProgress] = useState(0); | ||
| const [isChoiceMade, setIsChoiceMade] = useState(false) | ||
| const [type, setType] = useState(''); | ||
| const [tasteGroup, setTasteGroup] = useState(''); | ||
| const [texture, setTexture] = useState(''); | ||
| const [flavor, setFlavor] = useState(''); | ||
| const [priceValue, setPriceValue] = useState(7); | ||
| const [comment, setComment] = useState(''); | ||
| const [textInput, setTextInput] = useState(''); | ||
| const [importantLabel, setImportantLabel] = useState([]); | ||
| const [screenRender, setScreenRender] = useState(null) | ||
| const [showProgressButton, setShowProgressButton] = useState(false); | ||
|
|
||
| const handleReset = () => { | ||
| setProgress(0); | ||
| window.location.reload(); | ||
| } | ||
|
|
||
| console.log({ progress }) | ||
| return ( | ||
| <> | ||
| <Header /> | ||
| {progress < 1 && ( | ||
| <div className="introMsg"> | ||
| <h3> | ||
| You've reached a survey made by your local convenient store. | ||
|
|
||
| We're about to stock our shelves with some new snacks and we'd love to | ||
| get your opinion on what to put on them. Thank you for your time! | ||
| <p>-Here for you day & night, LocalMart</p> | ||
| </h3> | ||
| </div> | ||
| )} | ||
| {progress === 1 && <TasteGroup | ||
| tasteGroup={tasteGroup} | ||
| setTasteGroup={setTasteGroup} | ||
| progress={progress} | ||
| setProgress={setProgress} | ||
| showProgressButton={showProgressButton} | ||
| setShowProgressButton={setShowProgressButton} />} | ||
| {progress === 2 && <TypeOfSnack | ||
| isChoiceMade={isChoiceMade} | ||
| setIsChoiceMade={setIsChoiceMade} | ||
| tasteGroup={tasteGroup} | ||
| type={type} | ||
| setType={setType} | ||
| progress={progress} | ||
| setProgress={setProgress} | ||
| showProgressButton={showProgressButton} | ||
| setShowProgressButton={setShowProgressButton} />} | ||
| {progress === 3 && <Texture | ||
| tasteGroup={tasteGroup} | ||
| type={type} | ||
| texture={texture} | ||
| setTexture={setTexture} | ||
| progress={progress} | ||
| setProgress={setProgress} | ||
| setIsChoiceMade={setIsChoiceMade} | ||
| showProgressButton={showProgressButton} | ||
| setShowProgressButton={setShowProgressButton} />} | ||
| {progress === 4 && <Flavor | ||
| tasteGroup={tasteGroup} | ||
| type={type} | ||
| texture={texture} | ||
| flavor={flavor} | ||
| setFlavor={setFlavor} | ||
| progress={progress} | ||
| setProgress={setProgress} | ||
| showProgressButton={showProgressButton} | ||
| setShowProgressButton={setShowProgressButton} />} | ||
| {progress === 5 && <PriceSlider | ||
| priceValue={priceValue} | ||
| setPriceValue={setPriceValue} />} | ||
| {progress === 6 && <CommentOption | ||
| tasteGroup={tasteGroup} | ||
| type={type} | ||
| texture={texture} | ||
| flavor={flavor} | ||
| priceValue={priceValue} | ||
| comment={comment} | ||
| setComment={setComment} | ||
| textInput={textInput} | ||
| setTextInput={setTextInput} | ||
| progress={progress} | ||
| setProgress={setProgress} | ||
| showProgressButton={showProgressButton} | ||
| setShowProgressButton={setShowProgressButton} />} | ||
| {progress === 7 && <ImportantOption | ||
| importantLabel={importantLabel} | ||
| setImportantLabel={setImportantLabel} | ||
| progress={progress} | ||
| setProgress={setProgress} | ||
| showProgressButton={showProgressButton} | ||
| setShowProgressButton={setShowProgressButton} />} | ||
| {progress === 8 && <Results | ||
| tasteGroup={tasteGroup} | ||
| type={type} | ||
| texture={texture} | ||
| flavor={flavor} | ||
| priceValue={priceValue} | ||
| comment={comment} | ||
| setComment={setComment} | ||
| textInput={textInput} | ||
| setTextInput={setTextInput} | ||
| importantLabel={importantLabel} />} | ||
| {progress === 0 || progress === 5 ? ( | ||
| console.log('ProgressButton mounted'), | ||
| <ProgressButton | ||
| progress={progress} | ||
| setProgress={setProgress} | ||
| isChoiceMade={isChoiceMade} | ||
| setIsChoiceMade={setIsChoiceMade} | ||
| tasteGroup={tasteGroup} | ||
| type={type} | ||
| texture={texture} | ||
| flavor={flavor} | ||
| priceValue={priceValue} />) : null} | ||
| {progress === 8 && <button type="button" onClick={handleReset}>Reset survey</button>} | ||
| {progress === 8 && <FinishButton | ||
| screenRender={screenRender} | ||
| setScreenRender={setScreenRender} />} | ||
| {progress > 0 && progress <= 7 && (<p>You are on step {progress} of 7 of the survey</p>)} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from 'react'; | ||
| import FinishScreen from 'components/FinishScreen.js'; | ||
|
|
||
| const FinishButton = ({ screenRender, setScreenRender }) => { | ||
| const handleDoneClick = () => { | ||
| setScreenRender(<FinishScreen />); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="finishBtn"> | ||
| {screenRender || ( | ||
| <button type="button" onClick={handleDoneClick}> | ||
| Nope done | ||
| </button> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FinishButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import React, { useEffect } from 'react'; | ||
| import ProgressButton from './ProgressButton'; | ||
|
|
||
| const CommentOption = ({ | ||
| comment, setComment, textInput, setTextInput, progress, | ||
| setProgress, | ||
| showProgressButton, | ||
| setShowProgressButton | ||
| }) => { | ||
| console.log({ textInput }) | ||
|
|
||
| useEffect(() => { | ||
| if (!comment) { | ||
| setShowProgressButton(false); | ||
| console.log('IF', { showProgressButton }); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <form className="commentForm"> | ||
| <h3>Is there any specific snack you would like us to stock up on? </h3> | ||
| <select | ||
| onChange={(event) => { | ||
| setComment(event.target.value); | ||
| setShowProgressButton(true); | ||
| }} | ||
| value={comment}> | ||
| <option value="" disabled>Add a snack?</option> | ||
| <option value="yes">Yes</option> | ||
| <option value="no">No</option> | ||
| </select> | ||
| {comment === 'yes' && ( | ||
| <input | ||
| type="text" | ||
| onChange={(event) => setTextInput(event.target.value)} | ||
| value={textInput} | ||
| onKeyDown={(e) => { | ||
| if (e.key === 'Enter') { | ||
| e.preventDefault(); | ||
| } | ||
| }} /> | ||
| )} | ||
| </form> | ||
| {showProgressButton && ( | ||
| <ProgressButton | ||
| progress={progress} | ||
| setProgress={setProgress} /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CommentOption; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from 'react'; | ||
|
|
||
| const FinishScreen = () => { | ||
| return ( | ||
| <> | ||
| <h1>Thanks a lot for your help!</h1> | ||
| <h2>Come see us soon</h2> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default FinishScreen; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 think the two fonts you picked looks really good together.