My Little Pony name generator

README.md

@@ -1,13 +1,13 @@
-# Survey form with React
+Survey form with React
 
-Replace this readme with your own information about your project.
+This is a simple survey built in react using useState hooks. The survey is using form elements and should return a summary of users answers.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+Ive started of by sketching up my idea and how i best should structure the code in React. I realized pretty soon that i needed to get my hands dirty so to speak and actually starting the building of components and structure while still learning to think of the code in the "react" kind of way. I also wanted to keep it as simple as possible understanding every piece of code and how to use the state variables for each purpose. I´ve learned a lot from making this project even though i still need to figure out some things before this MLP-name generator will work as i want i to. Things i will need to fix is:
 
-## The problem
+1. radiobuttons. I made a component for selecting a favorite flower, but i didn't manage to figure out how to return the input from the component into the results-page.
+2. Fix so that the "return" button takes you back to the start page. Right now its just a button doing nothing.
+3. Make it more responsive.
 
-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?
+View it live
 
-## 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://superb-starship-a80a3a.netlify.app/

code/src/App.js

@@ -1,9 +1,91 @@
-import React from 'react';
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable indent */
+import React, { useState } from 'react';
+import './index.css';
+import { Name } from 'components/Name';
+import { ColorSelect } from 'components/ColorSelect';
+import { MagicCrystalSelect } from 'components/MagicCrystalSelect.js';
+import { Result } from 'components/Result';
+import { Submit } from 'components/Submit';
+import { FruitSelect } from 'components/FruitSelect';
+import { ToppingSelect } from 'components/ToppingSelect';
+import Header from './components/Header'
+import Start from './components/Start';
 
 export const App = () => {
+  const [step, setStep] = useState(1);
+  const [name, setName] = useState('');
+  const [colorSelect, setColorSelect] = useState('');
+  const [magicCrystalSelect, setMagicCrystalSelect] = useState('');
+  const [submit, setSubmit] = useState('');
+  const [fruitSelect, setFruitSelect] = useState('');
+  const [toppingSelect, setToppingSelect] = useState('')
+
+/*   const start = () => {
+    setStart(start + 1);
+  } */
+
+  const handleStepIncrease = () => {
+    setStep(step + 1);
+  }
+
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <>
+     <Header />
+
+      {step === 1 && (
+        <Start />
+      )}
+      {step === 2 && (
+        <Name
+        label="Enter your nickname:"
+        value={name}
+        setName={setName} />
+      )}
+      {step === 3 && (
+      <FruitSelect
+      label="Select your favourite fruit:"
+      value={fruitSelect}
+      setFruitSelect={setFruitSelect} />
+      )}
+      {step === 4 && (
+        <ColorSelect
+        label="Select your favourite color"
+        Value={colorSelect}
+        setColorSelect={setColorSelect} />
+      )}
+      {step === 5 && (
+        <MagicCrystalSelect
+        label="Select your favourite magic crystal"
+        Value={magicCrystalSelect}
+        setMagicCrystalSelect={setMagicCrystalSelect} />
+      )}
+      {step === 6 && (
+        <ToppingSelect
+        label="Select your favorite topping"
+        ToppingSelect={toppingSelect}
+        setToppingSelect={setToppingSelect} />
+       )}
+      {step === 7 && (
+        <Submit Submit={submit} setSubmit={setSubmit} />
+        )}
+      {step === 8 && (
+        // eslint-disable-next-line max-len
+        <Result name={name} colorSelect={colorSelect} magicCrystalSelect={magicCrystalSelect} fruitSelect={fruitSelect} toppingSelect={toppingSelect} />
+      )}
+    {step < 10 && (
+        <div className="content-wrapper">
+          <button className="button-wrapper" type="button" onClick={handleStepIncrease}>
+          {step === 1 && 'YEAH!! LETS GO!! 🥳'}
+          {step > 1 && step < 7 && 'Next question 🦄'}
+          {step === 8 && 'Find out my magical pony name! 🦄'}
+          {step >= 9 && 'Lets do this one more time!🦄'}
+          {step === 7 && 'Submit! 🦄'}
+          </button>
+          <p className="question-count">Question number {step}/{10}</p>
+        </div>
+      )}
+    </>
   );
 }
+

code/src/components/AddMoreButton.js

@@ -0,0 +1,13 @@
+/* eslint-disable react/no-unescaped-entities */
+/* eslint-disable max-len */
+import React from 'react';
+
+/* AddMoreButton that renders two buttons "Yes" and "No, that's all" and takes handleAddMoreClick as a prop */
+
+export const AddMoreButton = ({ handleAddMoreClick }) => (
+  <div>
+    <p>Do you want to add anything to the packing list?</p>
+    <button type="button" onClick={handleAddMoreClick}>Yes</button>
+    <button type="button" onClick={handleAddMoreClick}>No, that's all</button>
+  </div>
+);

code/src/components/ColorSelect.js

@@ -0,0 +1,21 @@
+import React from 'react';
+// eslint-disable-next-line indent
+        // eslint-disable-next-line indent
+
+export const ColorSelect = ({ colorSelect, setColorSelect }) => {
+  return (
+    <form className="content-wrapper">
+      <p>Which color of the rainbow makes your hair shimmer the most? 🌈 🌟 </p>
+      <select
+        className="dropDown"
+        onChange={(event) => setColorSelect(event.target.value)}
+        value={colorSelect}>
+        <option value="Purple Haze">Purple Haze</option>
+        <option value="Ruby red">Ruby Red</option>
+        <option value="Baby Blue">Baby Blue</option>
+        <option value="Sunshine Yellow">Sunshine Yellow</option>
+      </select>
+    </form>
+  )
+}
+

code/src/components/FruitSelect.js

@@ -0,0 +1,20 @@
+import React from 'react';
+// eslint-disable-next-line indent
+        // eslint-disable-next-line indent
+
+export const FruitSelect = ({ fruitSelect, setFruitSelect }) => {
+  return (
+    <form className="content-wrapper">
+      <p>Your favourite ice cream flavour?</p>
+      <select
+        className="dropDown"
+        onChange={(event) => setFruitSelect(event.target.value)}
+        value={fruitSelect}>
+        <option value="Apple Pie">Apple Pie</option>
+        <option value="Cherry Cream">Cherry Blossom</option>
+        <option value="Rasberry Cake">Rasberry Cake</option>
+        <option value="Lemon Cheesecake">Lemon Cheesecake</option>
+      </select>
+    </form>
+  )
+}

code/src/components/Header.css

@@ -0,0 +1,65 @@
+/* --------------------------- WRAPPER & ALIGNMENT -------------------------- */
+
+.header {
+    display: flex;
+    flex-flow: column wrap; 
+    margin: 20px;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 2px 4px 10px black;
+    align-items: center;
+    background-color: #FBD3E9;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #BB377D, #FBD3E9);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #BB377D, #FBD3E9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+    display: flex;
+  }
+
+  img {
+width: 40%;
+margin-bottom: 30px;
+max-width: 400px;
+
+  }
+
+  .img-container {
+    display: flex;
+    justify-content: space-between;
+    max-width: 700px;
+    width: 100%;
+
+  }
+
+  .header h1 {
+    font-size: 2em;
+    text-shadow: 6px 6px 8px rgb(161 66 195);
+  }
+.header h2 {
+  font-size: 1.5em;
+  text-shadow: 6px 6px 8px rgb(161 66 195);
+}
+
+@media only screen and (min-width: 768px) {
+
+  p {
+    font-size: 1.5em;
+    padding: 1.5em;
+    margin: 1.5em;
+  }
+
+  .header h1 {
+font-size: 5em;
+margin-bottom: 5px;
+  }
+
+  .header h2 {
+    font-size: 3em;
+  }
+
+  img {
+    margin-bottom: 100px;
+    max-width: 700px;
+
+      }
+
+}

code/src/components/Header.js

@@ -0,0 +1,26 @@
+/* eslint-disable indent */
+/* eslint-disable max-len */
+import React from 'react';
+import './Header.css';
+// eslint-disable-next-line import/no-absolute-path
+import ponyLogo from '../Images/logo.svg';
+import ponyLogo2 from '../Images/logo2.svg';
+
+const Header = () => {
+  return (
+    <header className="header">
+      <h1>My Little Pony</h1>
+      <h2>Name Generator</h2>
+      <div className="img-container">
+        <img
+          src={ponyLogo}
+          alt="My Little Pony" />
+        <img
+          src={ponyLogo2}
+          alt="My Little Pony 2" />
+      </div>
+    </header>
+  );
+};
+
+export default Header;

code/src/components/MagicCrystalSelect.js

@@ -0,0 +1,22 @@
+import React from 'react';
+// eslint-disable-next-line indent
+        // eslint-disable-next-line indent
+
+export const MagicCrystalSelect = ({ magicCrystalSelect, setMagicCrystalSelect }) => {
+  return (
+    <form className="content-wrapper">
+      <p>Which of these magic crystals speaks to you the most 💎 ?</p>
+      <select
+        className="dropDown"
+        onChange={(event) => setMagicCrystalSelect(event.target.value)}
+        value={magicCrystalSelect}>
+        <option value="Amethyst">Amethyst</option>
+        <option value="Carnelian">Carnelian</option>
+        <option value="Diamond">Diamond</option>
+        <option value="Sapphire">Sapphire</option>
+        <option value="Amber">Amber</option>
+      </select>
+    </form>
+  )
+}
+

code/src/components/Name.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Name = ({ name, setName }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  }
+  return (
+    <div className="content-wrapper">
+      <p>Ok then, lets start! What is your nickname?</p>
+      <input type="text" value={name} onChange={handleNameChange} />
+    </div>
+  );
+}