hello

README.md

@@ -1,13 +1,7 @@
 # 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.
-
-## 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?
+This is my Zodiac survey! 💫
 
 ## 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://zodiac-survey.netlify.app/

code/src/App.js

@@ -1,9 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import { Name } from 'components/Name';
+import { ZodiacSign } from 'components/ZodiacSign';
+import { Result } from 'components/Result';
+import { Selector } from 'components/Selector'
 
 export const App = () => {
+  const [step, setStep] = useState(1);
+  const [name, setName] = useState();
+  const [sign, setSign] = useState();
+  const [select, setSelect] = useState();
+
+  const handleStepIncrease = () => {
+    setStep(step + 1);
+  }
+  const restartQuiz = () => {
+    setStep(1);
+    setName('');
+    setSign('');
+    setSelect('');
+  }
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <>
+      {/* Whats your name? */}
+      {step === 1 && (
+        <Name name={name} setName={setName} /> /* alla the name.js codestuff is in NAME */
+      )}
+      {/* Choose your Zodiac sign */}
+      {step === 2 && (
+        <ZodiacSign sign={sign} setSign={setSign} />
+      )}
+      {/* How much *sign* are you? */}
+      {step === 3 && (
+        <Selector sign={sign} setSign={setSign} select={select} setSelect={setSelect} />
+      )}
+      {/* Your name is, you are  */}
+      {step >= 4 && (
+        <Result name={name} hej={1} select={select} sign={sign} />
+      )}
+      {step < 4 && (
+        <div className="button">
+          <p>{step}</p>
+          <button type="button" onClick={handleStepIncrease}>Let´s go</button>
+        </div>
+      )}
+      {step >= 4 && (
+        <div className="button">
+          <button type="button" onClick={restartQuiz}>Start over</button>
+        </div>
+      )}
+    </>
   );
 }
+/* current step hanterar nästa steg knappen */

code/src/components/Name.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Name = ({ name, setName }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  }
+  return (
+    // <div>
+    <div className="container">
+      <div Class="welcome">
+        <h2>Welcome to my Astro survey</h2>
+        <label htmlFor="name">
+          <p>First of all, what´s your name?</p>
+          <input type="text" id="name" value={name} onChange={handleNameChange} required />
+        </label>
+      </div>
+    </div>
+  )
+}
+/* NR 1 */

code/src/components/Result.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Result = ({ name, sign, select }) => {
+  return (
+    <div className="result">
+      <p>Okey {name}!</p>
+      <p>Your zodiac sign is {sign}</p>
+      <p> You are the {select} type of {sign}! </p>
+      <p> More {sign}´s to the people!!! </p>
+    </div>
+  );
+}
+

code/src/components/Selector.js

@@ -0,0 +1,50 @@
+import React from 'react';
+/* values */
+const howMuch = ['Normal', 'A lot', 'Im extreme'];
+
+export const Selector = ({ select, setSelect, sign }) => {
+  return (
+    <>
+      <div className="howmuch-container">
+        <h4> How much {sign} are you?
+        </h4>
+      </div>
+      <div className="radio-activity">
+        {howMuch.map((item) => (
+          <label key={item} htmlFor="activeradio">
+            <div
+              className="radioBtn"
+              role="button"
+              onClick={(event) => setSelect(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  setSelect(item);
+                }
+              }}
+              tabIndex={0}>
+              <input
+                type="radio"
+                className="radioActiveBtn"
+                onChange={(event) => setSelect(event.target.value)}
+                value={item}
+                checked={select === item} />
+              <span>{item}</span>
+            </div>
+          </label>
+        ))}
+      </div>
+      <div className="HowMuch">
+        {select === 'Normal' && (
+          <p> {select} is pretty good too, I guess! 👵🏻</p>
+        )}
+        {select === 'A lot' && (
+          <p> Sugar & spice, {select}, is nice! 🌶🔥</p>
+        )}
+        {select === 'Im extreme' && (
+          <p>The {select}´s turn´s the world upside down. You go you wild thing 😎</p>
+        )}
+      </div>
+    </>
+  );
+}
+/* NR 3 */

code/src/components/ZodiacSign.js

@@ -0,0 +1,38 @@
+import React from 'react'
+
+export const ZodiacSign = ({ sign, setSign }) => {
+/* const handleZodiacSignChange = (event) => {
+    setSign(event.target.value);
+  } */
+
+  return (
+    <div className="choose-container">
+      <h2>Choose your Zodiac sign</h2>
+      <form className="zodiacs">
+        <select
+          onChange={(event) => setSign(event.target.value)}
+          value={sign}>
+          <option value="" disabled>Choose Zodiac sign</option>
+          <option value="Aries">Aries</option>
+          <option value="Taurus">Taurus</option>
+          <option value="Gemini">Gemini</option>
+          <option value="Cancer">Cancer</option>
+          <option value="Leo">Leo</option>
+          <option value="Virgo">Virgo</option>
+          <option value="Libra">Libra</option>
+          <option value="Scorpio">Scorpio</option>
+          <option value="Sagittarius">Sagittarius</option>
+          <option value="Capricorn">Capricorn</option>
+          <option value="Aquarius">Aquarius</option>
+          <option value="Pisces">Pisces</option>
+        </select>
+      </form>
+      <div className="Okey">
+        {sign && (
+          <p>Okey, so you&apos;re a {sign}, cool!</p>
+        )}
+      </div>
+    </div>
+  )
+}
+/* NR 2 */