Technigo · OscarSindemark · Mar 19, 2023 · Mar 19, 2023 · Mar 19, 2023 · Mar 20, 2023
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>Oscar's Technigo React App</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,48 @@
-import React from 'react';
+/* eslint-disable linebreak-style */
+/* eslint-disable global-require */
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useState } from 'react';
+import { Movie } from 'components/Movie';
+import { Show } from 'components/Show';
+import { Name } from './components/Name'
+import { Results } from './components/Results';
+import { Genre } from './components/Genre';
 
 export const App = () => {
+  const [step, setStep] = useState(1)
+  const [name, setName] = useState('')
+  const [genre, setGenre] = useState('')
+  const [movie, setMovie] = useState('')
+  const [show, setShow] = useState('')
+
+  const handleStepIncrease = () => {
+    setStep(step + 1)
+  }
+
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
+    <form className="surveyForm">
+      {step === 1 && (
+        <Name name={name} setName={setName} />
+      )}
+      {step === 2 && (
+        <Genre genre={genre} setGenre={setGenre} />
+      )}
+      {step === 3 && (
+        <Movie movie={movie} setMovie={setMovie} />
+      )}
+      {step === 4 && (
+        <Show show={show} setShow={setShow} />
+      )}
+      {step >= 5 && (
+        <Results name={name} genre={genre} movie={movie} show={show} />
+      )}
+
+      {step < 5 && (
+        <>
+          <p>Current page: {step} </p>
+          <button type="button" onClick={handleStepIncrease}>Next</button>
+        </>
+      )}
+    </form>
+  )
 }
diff --git a/code/src/components/Assets/aot.jpg b/code/src/components/Assets/aot.jpg
diff --git a/code/src/components/Assets/arrival.jpg b/code/src/components/Assets/arrival.jpg
diff --git a/code/src/components/Assets/everything-everywhere.jpg b/code/src/components/Assets/everything-everywhere.jpg
diff --git a/code/src/components/Assets/game-night.jpg b/code/src/components/Assets/game-night.jpg
diff --git a/code/src/components/Assets/love-actually.jpg b/code/src/components/Assets/love-actually.jpg
diff --git a/code/src/components/Assets/mad-men.jpg b/code/src/components/Assets/mad-men.jpg
diff --git a/code/src/components/Assets/movies-background.jpg b/code/src/components/Assets/movies-background.jpg
diff --git a/code/src/components/Assets/new-girl.jpg b/code/src/components/Assets/new-girl.jpg
diff --git a/code/src/components/Assets/normal-people.jpg b/code/src/components/Assets/normal-people.jpg
diff --git a/code/src/components/Genre.css b/code/src/components/Genre.css
@@ -0,0 +1,4 @@
+.genreDropdown {
+    display: flex;
+    justify-content: center;
+}
diff --git a/code/src/components/Genre.js b/code/src/components/Genre.js
@@ -0,0 +1,55 @@
+/* eslint-disable linebreak-style */
+import React from 'react'
+import './Genre.css'
+
+export const Genre = ({ genre, setGenre }) => {
+  const handleGenreChange = (event) => {
+    setGenre(event.target.value)
+  }
+  return (
+    <>
+      <div className="genrePrompt">
+        <h3>What is your favorite genre of movie/tv show?</h3>
+      </div>
+      <div className="genreDropdown">
+        <select
+          value={genre}
+          onChange={handleGenreChange}>
+          <option disabled value="">Select your fav!</option>
+          <option value="Action">Action</option>
+          <option value="Drama">Drama</option>
+          <option value="Comedy">Comedy</option>
+          <option value="Romance">Romance</option>
+        </select>
+
+      </div>
+    </>
+  )
+}
+
+/*
+
+const options = [
+    { value: 'action', label: 'Action' },
+    { value: 'drama', label: 'Drama' },
+    { value: 'comedy', label: 'Comedy' },
+    { value: 'romance', label: 'Romance' }
+  ]
+
+  export const Genre = ({ genre, setGenre }) => {
+    const handleGenreChange = (event) => {
+      setGenre(event.target.value)
+    }
+    return (
+      <div className="genreDropdown">
+        <select
+          value={genre}
+          onChange={handleGenreChange}>
+          {options.map((option) => (
+          value={option.value}
+          label={option.label}
+          ))}
+        </select>
+      </div>
+    )
+  } */
diff --git a/code/src/components/Movie.css b/code/src/components/Movie.css
@@ -0,0 +1,30 @@
+.movieFav {
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    margin: 1rem;
+    gap: 1rem;
+    padding: 1rem;
+    object-fit: contain;
+}
+
+.arrival img {
+    display: flex;
+    width: 200px;
+    height: 250px;
+}
+.loveActually img {
+    display: flex;
+    width: 200px;
+    height: 250px;
+}
+.eeaao img {
+    display: flex;
+    width: 200px;
+    height: 250px;
+}
+.gameNight img {
+    display: flex;
+    width: 200px;
+    height: 250px;
+}
diff --git a/code/src/components/Movie.js b/code/src/components/Movie.js
@@ -0,0 +1,40 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable global-require */
+import React from 'react'
+import './Movie.css'
+
+export const Movie = ({ movie, setMovie }) => {
+  const handleMovieChange = (event) => (
+    setMovie(event.target.value)
+  )
+  return (
+    <>
+      <h3 className="moviePrompt">What is your favorite movie?</h3>
+      <form
+        className="movieFav"
+        value={movie}
+        onChange={handleMovieChange}>
+        <div className="arrival">
+          <img src={require('./Assets/arrival.jpg')} alt="Arrival Movie" />
+          <input type="radio" value="Arrival" />
+        Arrival
+        </div>
+        <div className="loveActually">
+          <img src={require('./Assets/love-actually.jpg')} alt="Love Actually Movie" />
+          <input type="radio" value="Love Actually" />
+        Love Actually
+        </div>
+        <div className="eeaao">
+          <img src={require('./Assets/everything-everywhere.jpg')} alt="Everything, Everywhere, All at Once Movie" />
+          <input type="radio" value="Everything, Everywhere, All At Once" />
+        Everything, Everywhere, All At Once
+        </div>
+        <div className="gameNight">
+          <img src={require('./Assets/game-night.jpg')} alt="Game Night Movie" />
+          <input type="radio" value="Game Night" />
+        Game Night
+        </div>
+      </form>
+    </>
+  )
+}
diff --git a/code/src/components/Name.css b/code/src/components/Name.css
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
@@ -0,0 +1,17 @@
+/* eslint-disable linebreak-style */
+import React from 'react'
+
+export const Name = ({ name, setName }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value)
+    event.preventDefault()
+  }
+  return (
+    <>
+      <h3>What is your name?</h3>
+      <input type="text" value={name} onChange={handleNameChange} />
+    </>
+
+  )
+}
+
diff --git a/code/src/components/Results.css b/code/src/components/Results.css
diff --git a/code/src/components/Results.js b/code/src/components/Results.js
@@ -0,0 +1,14 @@
+/* eslint-disable linebreak-style */
+import React from 'react'
+
+export const Results = ({ name, genre, movie, show }) => {
+  return (
+    <>
+      <h3>Final Results!</h3>
+      <p className="textResults">Hey {name}</p>
+      <p className="textResults">Your favorite genre is {genre}</p>
+      <p className="textResults">Your favorite movie (from this selection) is {movie}</p>
+      <p className="textResults">Your favorite show is {show}</p>
+    </>
+  )
+}
diff --git a/code/src/components/Show.css b/code/src/components/Show.css
@@ -0,0 +1,33 @@
+.showFav {
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    margin: 1rem;
+    gap: 1rem;
+    padding: 1rem;
+    object-fit: contain;
+}
+
+.normalPeople img {
+    display: flex;
+    width: 200px;
+    height: 250px;
+}
+
+.madMen img {
+    display: flex;
+    width: 200px;
+    height: 250px;
+}
+
+.newGirl img {
+    display: flex;
+    width: 200px;
+    height: 250px;
+}
+
+.attackOnTitan img {
+    display: flex;
+    width: 200px;
+    height: 250px;
+}
diff --git a/code/src/components/Show.js b/code/src/components/Show.js
@@ -0,0 +1,40 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable global-require */
+import React from 'react'
+import './Show.css'
+
+export const Show = ({ show, setShow }) => {
+  const handleShowChange = (event) => (
+    setShow(event.target.value)
+  )
+  return (
+    <>
+      <h3 className="showPrompt">What is your favorite show?</h3>
+      <form
+        className="showFav"
+        value={show}
+        onChange={handleShowChange}>
+        <div className="normalPeople">
+          <img src={require('./Assets/normal-people.jpg')} alt="The show Normal People" />
+          <input type="radio" value="Normal People" />
+        Normal People
+        </div>
+        <div className="newGirl">
+          <img src={require('./Assets/new-girl.jpg')} alt="The show New Girl" />
+          <input type="radio" value="New Girl" />
+        New Girl
+        </div>
+        <div className="madMen">
+          <img src={require('./Assets/mad-men.jpg')} alt="The show Mad Men" />
+          <input type="radio" value="Mad Men" />
+        Mad Men
+        </div>
+        <div className="attackOnTitan">
+          <img src={require('./Assets/aot.jpg')} alt="The show Attack on Titan" />
+          <input type="radio" value="Attack On Titan" />
+        Attack on Titan
+        </div>
+      </form>
+    </>
+  )
+}