Technigo · AndreaHedstrom · Mar 15, 2023 · Mar 15, 2023 · Mar 15, 2023 · Mar 15, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # 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.
+This weeks project was to make a survey with react. I chose to do a imaginary party planning survey.
 
 ## 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?
+I started with technigos react-starter project and played around in that just to try to understand more about how react works. Then I started to plan what my servey would be about and did the basic structure for it in VSCode.
+After that I tried out some different designs and I have changed that a lot of times during the week. I might have to plan the design more before I start next time but I also think I learn a lot by trying out different designs during the process.
+I also found the JSConfetti that felt like I fun effect to add and it was much easier to add then I thouht.
 
-## View it live
+My problem this week was that I didn't had so much time as I needed so I need to go back to this project and work on the acceccibility for example. Also, React is completely new to me so it will take time to learn and understand.
 
-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.
+## View it live
diff --git a/code/README.md b/code/README.md
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -10,6 +10,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "js-confetti": "^0.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/code/public/index.html b/code/public/index.html
@@ -13,12 +13,25 @@
       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>Party Planner</title>
+
+    <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=Rubik:wght@300;500&display=swap" rel="stylesheet">
+
+    <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=Ubuntu:wght@300&display=swap" rel="stylesheet">
+
+    <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=Pacifico&display=swap" rel="stylesheet">
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,51 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import { Name } from 'components/Name';
+import { Place } from 'components/Place';
+import { Food } from 'components/Food';
+import { Drink } from 'components/Drink';
+import { Party } from 'components/Party';
 
 export const App = () => {
+  const [step, setStep] = useState(1);
+  const [name, setName] = useState('');
+  const [place, setPlace] = useState('');
+  const [food, setFood] = useState('');
+  const [drink, setDrink] = useState('');
+
+  const handleStepIncrease = () => {
+    setStep(step + 1);
+  }
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="survey-container">
+      {step === 1 && (
+        <Name name={name} setName={setName} />
+      )}
+      {step === 2 && (
+        <Place place={place} setPlace={setPlace} />
+      )}
+      {step === 3 && (
+        <Food food={food} setFood={setFood} />
+      )}
+      {step === 4 && (
+        <Drink drink={drink} setDrink={setDrink} />
+
+      )}
+      {step >= 5 && (
+
+        <Party name={name} place={place} food={food} drink={drink} />
+      )}
+      {step < 5 && (
+        <>
+          <div className="step-btn">
+            <button type="button" onClick={handleStepIncrease}>NEXT</button>
+          </div>
+          <div className="step">
+            <p>PARTYSTEP {step}/5</p>
+          </div>
+
+        </>
+      )}
     </div>
   );
-}
+};
diff --git a/code/src/components/Drink.js b/code/src/components/Drink.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export const Drink = ({ drink, setDrink }) => {
+  const handleDrinkChange = (event) => {
+    setDrink(event.target.value);
+  }
+  return (
+    <>
+      <div className="question">
+        <h2>Sounds delicious!
+            And drink?
+        </h2>
+      </div>
+      <div className="select-container">
+        <select
+          className="select"
+          id="drink"
+          value={drink}
+          onChange={handleDrinkChange}>
+          <option value="">Menu</option>
+          <option value="a great cup of coffee">Coffee</option>
+          <option value="one rainbow colored drink">Tropical drinks</option>
+          <option value="sparkling ice cold soda">Sparkling soda</option>
+          <option value="a fruity and fluffy smoothie">Smoothie</option>
+          <option value="ice cold water">Water</option>
+        </select>
+      </div>
+    </>
+  )
+}
diff --git a/code/src/components/Food.js b/code/src/components/Food.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const foodOption = [
+  'the biggest cake you ever seen',
+  'a buffé with your favourite food',
+  'fruits in piles',
+  'ice cream that never melts'
+];
+
+export const Food = ({ food, setFood }) => {
+  const handleFoodChange = (event) => {
+    setFood(event.target.value);
+  }
+  return (
+    <>
+      <div className="question">
+        <h2>What do you dream about to eat on your imaginary party?</h2>
+      </div>
+      <div className="foodBtn">
+        {foodOption.map((group) => (
+          <label key={group} htmlFor="group">
+            <input
+              type="radio"
+              className="radioBtn"
+              value={group}
+              onChange={handleFoodChange}
+              checked={food === group} />
+            {group}
+          </label>
+        ))}
+      </div>
+
+    </>
+  )
+}
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Name = ({ name, setName }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  }
+  return (
+    <>
+      <div className="header">
+        <h1>Are you a day dreamer?</h1>
+        <h1>Let&apos;s throw a <span>party</span> !</h1>
+      </div>
+      <div className="question">
+        <p><span>What&apos;s your name?</span></p>
+      </div>
+      <div className="answer-input">
+        <input type="text" value={name} onChange={handleNameChange} />
+      </div>
+    </>
+  )
+}
diff --git a/code/src/components/Party.js b/code/src/components/Party.js
@@ -0,0 +1,36 @@
+/* eslint-disable max-len */
+import React from 'react';
+import JSConfetti from 'js-confetti';
+
+const jsConfetti = new JSConfetti();
+
+export const Party = ({ name, place, food, drink }) => {
+  return (
+    <>
+      <div className="party-name">
+        <h1>{name}</h1>
+      </div>
+      <div className="party-text">
+        <p>🌪! Wow you&apos;ve just arrived at your dream place {place}! And look, a table with {food} and {drink}! All your favourite people is here, the weather is dreamy and we&apos;re having a party just for you! Add some more partyfeeling? </p>
+        <h3>↓</h3>
+      </div>
+
+      <div className="party-btn">
+        <button
+          type="submit"
+          className="partyBtn"
+          onClick={() => {
+            (jsConfetti.addConfetti({
+              confettiRadius: 8,
+              confettiNumber: 500,
+              confettiColors: [
+                '#d44e62', '#fcfee1', '#eebed9', '#b4c8b7', '#fb91c6', '#a0bbd0'
+              ]
+            }))
+          }}>MAGIC PARTYBUTTON
+        </button>
+
+      </div>
+    </>
+  );
+};
diff --git a/code/src/components/Place.js b/code/src/components/Place.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const Place = ({ place, setPlace }) => {
+  const handlePlaceChange = (event) => {
+    setPlace(event.target.value);
+  }
+  return (
+    <>
+      <div className="question">
+        <h2>Where in the world would you like to be in your dream?</h2>
+      </div>
+      <div className="answer-input">
+        <input type="text" value={place} onChange={handlePlaceChange} />
+      </div>
+    </>
+  )
+}