Technigo · IrupePozoGraviz · Mar 14, 2023 · Mar 14, 2023 · Mar 14, 2023 · Mar 15, 2023
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/public/animals.png b/code/public/animals.png
diff --git a/code/public/index.html b/code/public/index.html
@@ -17,6 +17,7 @@
   </head>
 
   <body>
+    <img class="animals"src="./animals.png" alt="">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,92 @@
-import React from 'react';
+/* eslint-disable max-len */
+import React, { useState } from 'react';
+import { Name } from './components/Name';
+import { Prefer } from './components/Prefer';
+import { Color } from './components/Color';
+import { Thing } from './components/Thing';
+import { QuizResult } from './components/QuizResult'
+import './index.css';
+import './reset.css';
 
 export const App = () => {
+  const [counter, setCounter] = useState(0);
+  const [name, setName] = useState('')
+  const [prefers, setPrefers] = useState('')
+  const [color, setColor] = useState('')
+  const [things, setThing] = useState('')
+  const [results, setResults] = useState('')
+  const [started, setStarted] = useState(false);
+
+  const handleNextStep = () => {
+    console.log('counter before', counter);
+    setCounter(counter + 1);
+    console.log('after', counter)
+  };
+  const handleStartQuiz = () => {
+    setStarted(true);
+    handleNextStep();
+    /* if (counter >= 5) {
+      setQuizEnded(true);
+    } */
+  };
+  const showResult = (
+    <QuizResult name={name} results={results} />
+  )
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <main className="StartPage">
+      {!started && (
+        <header className="start-container">
+          <h1>Answer these questions and we will tell you your favourite animal</h1>
+          <button type="button" onClick={handleStartQuiz} className="startBtn" aria-label="press button to start the quiz">
+            Start quiz
+          </button>
+        </header>
+      )}
+
+      {counter === 1 && (
+        <div>
+          <Name name={name} setName={setName} counterFromApp={counter} setCounter={setCounter} />
+
+        </div>)}
+
+      {counter === 2 && (
+        <Prefer prefers={prefers} setPrefers={setPrefers} counterFromApp={counter} setCounter={setCounter} />
+      )}
+      {counter === 3 && (
+        <Color color={color} setColor={setColor} counterFromApp={counter} setCounter={setCounter} />
+      )}
+      {counter === 4 && (
+        <Thing thing={things} setThing={setThing} counterFromApp={counter} setCounter={setCounter} />
+      )}
+      {counter >= 5 && (
+        <QuizResult name={name} color={color} prefer={prefers} thing={things} results={results} setResults={setResults} QuizResult={QuizResult} />
+      )}
+
+      {(counter === 1 && !name)
+       || (counter === 2 && !prefers)
+       || (counter === 3 && !color)
+       || (counter === 4 && !things) ? (
+          <p className="answer">Please answer the current question before proceeding.</p>
+        )
+         || (counter === 5 && !showResult)
+        : (
+          started && counter < 5 && (
+            <button type="button" onClick={handleNextStep} className="nextQuestion" aria-label="press next question button after inserting your name">
+              Next question
+            </button>
+          )
+        )}
+    </main>
   );
 }
+// start button hur ska jag sätta button nr 2 vart?
+// what should i put in result to show my results
+// where should I put my if statement
+// how do I make next question just show from name...
+// what is exactly happening in line  30 & 55
+/* {started && counter < 5 && (
+        <button type="button" onClick={handleNextStep} className="nextQuestion">
+          Next question
+        </button> */
+// why like this in nr 59 what does it mean?
+
diff --git a/code/src/components/Color.js b/code/src/components/Color.js
@@ -0,0 +1,36 @@
+import React from 'react'
+
+export const Color = ({ color, setColor, counterFromApp, setCounter }) => {
+  const handleColorChange = (event) => {
+    setColor(event.target.value);
+    setCounter(counterFromApp + 1);
+    console.log('Color picked: ', event.target.value);
+  }
+  console.log(color)
+  return (
+    <div className="color">
+      <h2>What´s your favourite color ?</h2>
+      <form className="favouriteColor" id="color-selector">
+        <button
+          className="pink"
+          type="button"
+          onClick={handleColorChange}
+          value="pink"
+          aria-label="Select Pink color"
+          title="Select Pink color" />
+
+        <button
+          className="black"
+          type="button"
+          onClick={handleColorChange}
+          value="black"
+          aria-label="Select Black color"
+          title="Select Black color" />
+
+      </form>
+
+    </div>
+  );
+}
+
+// what should I have as a value to get the if statements right?
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Name = ({ name, setName, counter }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+
+    console.log('Name:', event.target.value);
+  }
+
+  return (
+    <div className="name-container">
+      <p>What is your name?</p>
+      <form>
+        <section className="inputName">
+          <input className="inputClass" type="text" onChange={handleNameChange} value={name} counter={counter} aria-labelledby="name-label" arial-label="Write your name here and then press button further down" />
+        </section>
+      </form>
+    </div>
+  );
+}
diff --git a/code/src/components/Prefer.js b/code/src/components/Prefer.js
@@ -0,0 +1,24 @@
+import React from 'react'
+
+export const Prefer = ({ prefers, setPrefers, counterFromApp, setCounter }) => {
+  const handlePreferChange = (event) => {
+    setPrefers(event.target.value);
+    setCounter(counterFromApp + 1);
+    console.log('prefers: ', event.target.value);
+  }
+
+  return (
+    <div className="whatDoYou">
+      <h2>Select your preferred activity</h2>
+      <section className="dropDown">
+
+        <select className="dropMenu" onChange={handlePreferChange} value={prefers} aria-label="Select your preferred activity">
+          <option value="" className="choose"> Choose an option</option>
+          <option value="books" className="books">Books & plants 🪴📚</option>
+          <option value="surf" className="surf">Surf &palmtrees 🏄🏿‍♀️ 🏝️</option>
+          <option value="people" className="people">People, fika & walks 👨🏻‍🦽🚶🏾‍♀️</option>
+        </select>
+      </section>
+    </div>
+  )
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ @@
       </head>
       <body>
+        <img class="animals"src="./animals.png" alt="">
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
         <!--
@@ Expand Down @@