Technigo · SandraMadeleine · Mar 14, 2023 · Mar 14, 2023 · Mar 14, 2023 · Mar 15, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # Survey form with React
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+A survey made in React, using different types of forms and summarizing the answers in the final step.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+The major hurdle while constructing this survey was to place everything correctly on the page. If I had more time I would place the buttons better and would also add some sort of counter, so that the respondent can see how many steps they have completed and how many steps are left.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://at-the-cafe-survey.netlify.app/
diff --git a/bash.exe.stackdump b/bash.exe.stackdump
@@ -0,0 +1,16 @@
+Stack trace:
+Frame        Function    Args
+000FFFFCD30  00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
+000FFFFCD30  0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
+000FFFFCD30  002100484A2 (000006D0000, 000006D0101, 00000000001, CC19CA85FF21)
+000FFFFCD30  0021006E496 (00210045323, 00210358BC0, 00000000000, 0000000000D)
+000FFFFCD30  0021006E4A9 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
+000FFFFCD30  00210070DE4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
+000FFFFCD30  0021005AB65 (000FFFFCA60, 00000000000, 000FFFFCA68, 000FFFFFFFF)
+000FFFFCD30  0021005B335 (00210358550, 00000000000, 000FFFFCD30, 00000100201)
+000FFFFCD30  0021005B847 (002100DF73E, 00000000000, 00000000000, 00000000000)
+000FFFFCD30  0021005BB86 (00000000000, 000FFFFCD30, FFFFFFFFFFFFFFC6, 00000000000)
+000FFFFCD30  00210048C0C (00000000000, 00000000000, 00000000000, 00000000000)
+000FFFFFFF0  00210047716 (00000000000, 00000000000, 00000000000, 00000000000)
+000FFFFFFF0  002100477C4 (00000000000, 00000000000, 00000000000, 00000000000)
+End of stack trace
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/public/icon-notepad.png b/code/public/icon-notepad.png
diff --git a/code/public/index.html b/code/public/index.html
@@ -13,7 +13,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Technigo React App</title>
+    <title>Survey project</title>
+      <link rel="icon" type="image/png" sizes="32x32" href="./icon-notepad.png">
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap" rel="stylesheet">
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,106 @@
-import React from 'react';
+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>
-      Find me in src/app.js!
-    </div>
+    <>
+      <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
+                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 />
+    </>
   );
-}
+}
diff --git a/code/src/components/Conclusion.js b/code/src/components/Conclusion.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import '../index.css'
+import '../conclusion.css'
+
+const conclusion = ({ purchase, subscriptionQ, often, missing }) => {
+  return (
+    <>
+      <h2>Thank you for completing this short survey! 💕</h2>
+      <h3>You answered:</h3>
+      <section className="list">
+        <ul>
+          <li><span className="summary">Weekly purchases:</span> {purchase}</li>
+          <li><span className="summary">Active subscription:</span> {subscriptionQ}</li>
+          <li><span className="summary">Mostly purchased:</span> {often}</li>
+          <li><span className="summary">Missing on menu:</span> {missing}</li>
+        </ul>
+      </section>
+
+      <section className="related-link">
+        <a
+          href="https://www.hsph.harvard.edu/nutritionsource/healthy-drinks/other-healthy-beverage-options/"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="Learn more about the health benefits of coffee and tea">
+            -Health benefits of drinking coffee and tea-
+        </a>
+      </section>
+    </>
+  )
+}
+
+export default conclusion
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import Drink from './coffee-shop.png'
+import '../index.css'
+
+const footer = () => {
+  return (
+    <footer>
+      <img src={Drink} alt="Cup with warm beverage" />
+    </footer>
+  );
+}
+
+export default footer
diff --git a/code/src/components/FreeText.js b/code/src/components/FreeText.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import '../index.css'
+import '../freetext.css'
+
+const freeText = ({ headline, input, setInput, inputLabel, id, placeholder, htmlFor }) => {
+  const handleInputChange = (event) => {
+    setInput(event.target.value)
+  }
+
+  return (
+    <>
+      <h2>{headline}</h2>
+      <form>
+        <label htmlFor={htmlFor}>
+          <p>{inputLabel}</p>
+        </label>
+        <textarea
+          type="text"
+          id={id}
+          className="text-input"
+          placeholder={placeholder}
+          aria-live="polite"
+          onChange={handleInputChange}
+          value={input} />
+      </form>
+    </>
+  )
+}
+
+export default freeText
diff --git a/code/src/components/Purchase.js b/code/src/components/Purchase.js
@@ -0,0 +1,34 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react'
+import '../index.css'
+import '../purchase.css'
+
+const purchases = ['1-2 times', '3-5 times', '6-10 times', '10+ times']
+console.log(purchases)
+
+const purchaseQuestion = ({ purchase, setPurchase }) => {
+  const handleNumberPurchases = (event) => {
+    setPurchase(event.target.value)
+  }
+
+  return (
+    <>
+      <h2>How often per week do you purchase something to drink in a cafe?</h2>
+      <form className="radio-buttons" id="radio-buttons">
+        {purchases.map((group) => (
+          <label key={group} className="times-purchase">
+            <input
+              type="radio"
+              className="radio-button"
+              value={group}
+              onChange={handleNumberPurchases}
+              checked={purchase === group} />
+            {group}
+          </label>
+        ))}
+      </form>
+    </>
+  )
+}
+
+export default purchaseQuestion
diff --git a/code/src/components/Start.js b/code/src/components/Start.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import '../start.css'
+import '../index.css'
+
+const start = () => {
+  return (
+    <section>
+      <h1>A survey on what people choose to drink when in a cafe</h1>
+
+      <p>Coffee, tea, or maybe something else? This short survey aims to find
+        out just what cafe visitors want to drink, and how often.
+      </p>
+      <p>
+        We would be immensely happy if you would like to answer a few
+        questions, the survey only takes about 2 minutes to complete. Thanks! ✨
+      </p>
+    </section>
+  );
+}
+
+export default start