Technigo · JohLeo · Mar 17, 2023 · Mar 18, 2023 · Mar 18, 2023 · Mar 19, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # Survey form with React
 
-Replace this readme with your own information about your project.
+This weeks project was based around using React to a greater potential by introducing the use of State. The task was to create a Typeform-like survey to collect data from your users.int.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## ❗️ The problem
 
-## The problem
+Due to all of us (students) feeling a bit exhausted from our pace at week 6, I came up with the idea to use this project in a humorous way for a calming and stress reducing experience. 
 
-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 wanted to practice different forms of inputs and how to style them differently and connecting them to the React hook useState. I included text input, a range slider, radio buttons and a drop down menu. As an ending I created a css built breathing exercise with a setting and different colors depening on the users answers.
+
+If I had more time I would've tried to make all the styling work for Safari-users(it is best viewed in Chrome as of now).
 
 ## 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://stress-less-survey.netlify.app
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/public/index.html b/code/public/index.html
@@ -13,7 +13,7 @@
       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>Relax and start breathing v.6</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,85 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Name } from './components/Name'
+import { Start } from './components/Start'
+import { Activity } from './components/Activity'
+import { Colour } from './components/Colour'
+import { Place } from './components/Place'
+import { Temp } from './components/Temp'
+import { Who } from './components/Who'
+import { Summary } from './components/Summary'
+import { Breathe } from './components/Breathe'
+import hug from './img/hug.svg';
 
 export const App = () => {
+  const [step, setStep] = useState(0);
+  const [name, setName] = useState('');
+  const [activity, setActivity] = useState('');
+  const [colour, setColour] = useState('');
+  const [place, setPlace] = useState('');
+  const [temp, setTemp] = useState('');
+  const [who, setWho] = useState('');
+
+  const handleStepIncrease = () => {
+    setStep(step + 1);
+  };
+  const handleStepReset = () => {
+    setStep(0);
+    setName('');
+  };
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="main-container">
+      <img src={hug} alt="A hug" className="hugImg" />
+      {step === 0 && (
+        <Start onButtonClick={() => handleStepIncrease(0)} />
+      )}
+      {step === 1 && (
+        <Name name={name} setName={setName} step={step} />
+      )}
+      {step === 2 && (
+        <Activity activity={activity} setActivity={setActivity} step={step} />
+      )}
+      {step === 3 && (
+        <Colour colour={colour} setColour={setColour} step={step} />
+      )}
+      {step === 4 && (
+        <Place place={place} setPlace={setPlace} step={step} />
+      )}
+      {step === 5 && (
+        <Temp temp={temp} setTemp={setTemp} step={step} />
+      )}
+      {step === 6 && (
+        <Who who={who} setWho={setWho} step={step} />
+      )}
+      {step === 7 && (
+        <>
+          <Summary
+            name={name}
+            activity={activity}
+            colour={colour}
+            place={place}
+            temp={temp}
+            who={who} />
+          <div className="button-container">
+            <button type="button" onClick={handleStepIncrease} className="submitBtn">Yes please</button>
+            <button type="button" onClick={handleStepReset} className="restartBtn">No, restart</button>
+          </div>
+        </>
+      )}
+      {step === 8 && (
+        <>
+          <Breathe
+            name={name}
+            activity={activity}
+            colour={colour}
+            place={place}
+            temp={temp}
+            who={who} />
+          <button type="button" onClick={handleStepReset} className="restartBtn"> I need a new scenario</button>
+        </>
+      )}
+      {step < 7 && step !== 0 && (
+        <button type="button" onClick={handleStepIncrease} className="submitBtn"> Next question </button>
+      )}
     </div>
   );
 }
diff --git a/code/src/components/Activity.js b/code/src/components/Activity.js
@@ -0,0 +1,43 @@
+import React from 'react';
+
+const activechoice = ['running 🏃🏻', 'breathing 🌬', 'stretching 🧘🏽', 'walking 🚶🏽', 'biking 🚵🏽'];
+
+export const Activity = ({ activity, setActivity, step }) => {
+  return (
+    <>
+      <div className="content-container">
+        <div>
+          <p className="p-step">Current step: {step} / 7</p>
+        </div>
+        <h4> Ok, what activity sparks your joy and makes your ears wiggle?
+        </h4>
+      </div>
+      <div>
+        <form className="radio-activity">
+          {activechoice.map((item) => (
+            <label key={item} htmlFor="activeradio">
+              <div
+                className="radioBtn"
+                role="button"
+                onClick={(event) => setActivity(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    setActivity(item);
+                  }
+                }}
+                tabIndex={0}>
+                <input
+                  type="radio"
+                  className="radioActiveBtn"
+                  onChange={(event) => setActivity(event.target.value)}
+                  value={item}
+                  checked={activity === item} />
+                <span>{item}</span>
+              </div>
+            </label>
+          ))}
+        </form>
+      </div>
+    </>
+  );
+}
diff --git a/code/src/components/Breathe.js b/code/src/components/Breathe.js
@@ -0,0 +1,38 @@
+import React from 'react';
+
+export const Breathe = ({ name, activity, colour, place, temp, who }) => {
+  return (
+    <div className="content-container">
+      <svg width="180" height="180">
+        <rect
+          x="20"
+          y="20"
+          width="170"
+          height="170"
+          fill="none"
+          strokeDasharray="20 20" />
+        <circle cx="10" cy="10" r="8" fill={colour} className="blurryCircle">
+          <animateMotion
+            dur="9s"
+            repeatCount="indefinite"
+            path="M 10,10 L 160,10 L 160,160 L 10,160 Z" />
+        </circle>
+      </svg>
+      <h4 className="sumh4">Keep your happy scenario in your mind and let&apos;s slow down...</h4>
+      <p>
+        Remember, you are by the {place} and you&apos;re going to start {activity} soon. <br />
+        It&apos;s around {temp} degrees, {who} is next to you and already looking at
+        the {colour} light. Let&apos;s do this, focus {name}!
+        <br /><br />
+        One breath is illustated by the dot.<br />
+        Each step is one side of the square.<br />
+        Start by breathing out slowly, releasing the air from your lungs. <br /><br />
+        1. Breathe in through your nose<br />
+        2. Hold your breath  <br />
+        3. Exhale slowly <br />
+        4. Hold your breath again <br /><br />
+        Repeat as many times as you need.
+      </p>
+    </div>
+  );
+}
diff --git a/code/src/components/Colour.js b/code/src/components/Colour.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const Colour = ({ colour, setColour, step }) => {
+  return (
+    <div className="content-container">
+      <p className="p-step">Current step: {step} / 7</p>
+      <h4> What&apos;s your favourite color?</h4>
+      <form className="colourForm">
+        <select
+          onChange={(event) => setColour(event.target.value)}
+          value={colour}
+          aria-label="dropdown for your favourite colours">
+          <option value="" disabled>Choose colour</option>
+          <option value="white">White</option>
+          <option value="pink">Pink</option>
+          <option value="yellow">Yellow</option>
+          <option value="green">Green</option>
+          <option value="purple">Purple</option>
+          <option value="orange">Blue</option>
+        </select>
+      </form>
+    </div>
+  )
+}
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const Name = ({ name, setName, step }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  }
+  return (
+    <div className="content-container">
+      <p className="p-step">Current step: {step} / 7</p>
+      <h4>Let&apos;s start of by introducing ourselves!
+        What&apos;s your name?
+      </h4>
+      <input
+        aria-label="name-input"
+        type="text"
+        value={name}
+        className="name-input"
+        placeholder="Type name here"
+        onChange={handleNameChange} />
+    </div>
+  );
+}
diff --git a/code/src/components/Place.js b/code/src/components/Place.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import ocean from '../img/ocean.png';
+import forest from '../img/forest.png';
+import home from '../img/home.png';
+
+export const Place = ({ place, setPlace, step }) => {
+  const handlePlaceChange = (event) => {
+    setPlace(event.target.value);
+  }
+  return (
+    <div className="place-container">
+      <div>
+        <p className="p-step">Current step: {step} / 7</p>
+      </div>
+      <h4> Where do you feel the most at ease?</h4>
+      <div className="place-img-container">
+        <img src={ocean} alt="The ocean" />
+        <img src={forest} alt="The Forest" />
+        <img src={home} alt="In my home" />
+      </div>
+      <form className="radio-container">
+        <label htmlFor="ocean">
+            The ocean
+          <input
+            type="radio"
+            value="ocean"
+            onChange={handlePlaceChange}
+            checked={place === 'ocean'} />
+        </label>
+        <label htmlFor="forest">
+            In the forest
+          <input
+            type="radio"
+            value="forest"
+            onChange={handlePlaceChange}
+            checked={place === 'forest'} />
+        </label>
+        <label htmlFor="home">
+            At home
+          <input
+            type="radio"
+            value="home"
+            onChange={handlePlaceChange}
+            checked={place === 'home'} />
+        </label>
+      </form>
+    </div>
+  );
+}
diff --git a/code/src/components/Start.js b/code/src/components/Start.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Start = (begin) => {
+  const handleClick = () => {
+    begin.onButtonClick();
+  }
+  return (
+    <div className="content-container">
+      <div>
+        <h3>Hello!</h3>
+      </div>
+      <div>
+        <p className="start-p">Have you been feeling a little bit stressed lately? <br />
+        I would like to help you feel better,
+        let&apos;s take our first steps together...
+        </p>
+      </div>
+      <button className="startBtn" type="button" onClick={handleClick}>Start</button>
+    </div>
+  )
+}