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

project survey week 6 #441

Open
wants to merge 26 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
87e2ac8
started with components
SandraMadeleine Mar 14, 2023
3c81e11
fixing some ESlint-objections
SandraMadeleine Mar 14, 2023
3ac8e59
minor changes
SandraMadeleine Mar 14, 2023
20964d0
working on the survey in different components
SandraMadeleine Mar 15, 2023
ea81975
buildning the page
SandraMadeleine Mar 15, 2023
00a249c
working on the survey build
SandraMadeleine Mar 15, 2023
65733d5
adding to app.js
SandraMadeleine Mar 16, 2023
ecc1217
fixing components
SandraMadeleine Mar 16, 2023
b05160f
fixes
SandraMadeleine Mar 16, 2023
8e1c190
fixed imports
SandraMadeleine Mar 17, 2023
1d9c1e6
final fixes on survey steps
SandraMadeleine Mar 17, 2023
7b38d31
working on styling
SandraMadeleine Mar 17, 2023
dd16219
continued styling
SandraMadeleine Mar 17, 2023
3618a1f
continued styling
SandraMadeleine Mar 19, 2023
5527881
css and emojis
SandraMadeleine Mar 19, 2023
166c27b
media queries
SandraMadeleine Mar 19, 2023
142247f
finalizing layout
SandraMadeleine Mar 19, 2023
d870236
last touches
SandraMadeleine Mar 19, 2023
589c5c8
readme updated
SandraMadeleine Mar 19, 2023
f3c9ad3
switched places of imports in app.js
SandraMadeleine Mar 19, 2023
9b5e7a6
fixed typo
SandraMadeleine Mar 19, 2023
a893e34
disable eslint in app.js in hope of being able to deploy
SandraMadeleine Mar 21, 2023
2b14d3d
deleted App.js
SandraMadeleine Mar 21, 2023
3627cd4
Added App.js back again
SandraMadeleine Mar 21, 2023
c7021d5
trying to fix case sensitivity
SandraMadeleine Mar 21, 2023
dcada88
add netlify link
SandraMadeleine Mar 21, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added App.js back again
  • Loading branch information
SandraMadeleine committed Mar 21, 2023
commit 3627cd4720c0821bf670c362d4120c56ad84508c
106 changes: 106 additions & 0 deletions code/src/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React, { useState } from 'react';
import Start from './components/Start';
import Subscription from './components/Subscription';
import Purchase from './components/Purchase';
import FreeText from './components/FreeText';
import Conclusion from './components/Conclusion';
import Footer from './components/Footer';
import './index.css'

export const App = () => {
const [step, setStep] = useState(1)
const [purchase, setPurchase] = useState('')
const [subscriptionQ, setSubscriptionQ] = useState('')
const [often, setOften] = useState('')
const [missing, setMissing] = useState('')

const handleStepIncrease = () => {
setStep(step + 1)
}

const handleStepDecrease = () => {
setStep(step - 1)
}

const handleStepRestart = () => {
setStep(1)
}

return (
<>
<div className="outer-part">
<div className="inner-part">
{step === 1 && (
<div>
<Start />
<button className="start-btn" type="button" onClick={handleStepIncrease}>Start here</button>
</div>
)}

{step === 2 && (
<Subscription subscriptionQ={subscriptionQ} setSubscriptionQ={setSubscriptionQ} />
)}

{step === 3 && (
<Purchase purchase={purchase} setPurchase={setPurchase} />
)}

{step === 4 && (
<div>
<FreeText
headline="Favorite purchases"
input={often}
setInput={setOften}
inputLabel="Which drink do you purchase most often when at a cafe? 💸"
id="favorite-purchase"
placeholder="My favorite purchase is..."
htmlFor="favorite-purchase" />
</div>
)}

{step === 5 && (
<div>
<FreeText
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the design of the FreeText-component, good reusability

headline="Something missing?"
input={missing}
setInput={setMissing}
inputLabel="Is there a drink you feel is missing at most cafes? 🤔"
id="missing-drink"
placeholder="I would love if all cafes offered..."
htmlFor="missing-drink" />
</div>
)}

{step === 6 && (
<div>
<Conclusion
subscriptionQ={subscriptionQ}
purchase={purchase}
often={often}
missing={missing} />
</div>
)}

{step > 1 && step < 6 && (
<div>
<button className="next-btn" type="button" onClick={handleStepIncrease}>Submit and go to next</button>
</div>
)}

{step > 2 && step < 6 && (
<div>
<button className="prev-btn" type="button" onClick={handleStepDecrease}>Previous question</button>
</div>
)}

{step > 1 && step <= 6 && (
<div>
<button className="restart-btn" type="button" onClick={handleStepRestart}>Restart the survey</button>
</div>
)}
</div>
</div>
<Footer />
</>
);
}