Technigo · Alexander-Gabor · Mar 18, 2023 · Mar 18, 2023 · Mar 18, 2023 · Mar 18, 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>Super Nostalgia - Survey</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,16 @@
 import React from 'react';
+import Survey from 'components/Survey';
+import Hero from 'components/Hero';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <>
+      <div className="hero">
+        <Hero />
+      </div>
+      <div className="survey-body">
+        <Survey />
+      </div>
+    </>
   );
 }
diff --git a/code/src/components/Hero.js b/code/src/components/Hero.js
@@ -0,0 +1,14 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable indent */
+import React from 'react';
+
+const Hero = () => {
+    return (
+        <>
+        <div className="hero-text"><h1>Ultra Nostalgia</h1></div>
+        <div className="hero-wrapper" />
+        </>
+    )
+}
+
+export default Hero;
diff --git a/code/src/components/Landing.js b/code/src/components/Landing.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const Landing = (props) => {
+return (
+
+)
+
+}
+
+export default Landing;
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
@@ -0,0 +1,47 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable indent */
+
+import React, { useRef, useEffect } from 'react';
+
+const Name = (props) => {
+const { name, setName, counter, setCounter, percentboop, setPercentbop } = props
+
+const inputRef = useRef(null);
+
+useEffect(() => {
+  inputRef.current.focus();
+}, []);
+
+const handleNameChange = (event) => {
+    setName(event.target.value)
+}
+
+const goToNextQuestion = () => {
+    setCounter(counter + 1);
+    setPercentbop(percentboop + 20)
+  };
+
+const handleKeyDown = (event) => {
+    if (event.keyCode === 13) {
+      goToNextQuestion();
+    }
+};
+
+return (
+<div>
+    <p>What is your name?</p>
+    <input
+    className="name-input"
+    type="text"
+    name="name"
+    value={name}
+    ref={inputRef}
+    onKeyDown={handleKeyDown}
+    onChange={handleNameChange}
+    required="required" />
+</div>
+)
+}
+
+export default Name;
diff --git a/code/src/components/ProgressBar.js b/code/src/components/ProgressBar.js
@@ -0,0 +1,17 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable indent */
+
+import React from 'react';
+
+const ProgressBar = ({ percent }) => {
+    // const { bop, setBop } = props;
+    return (
+        <div className="progress-bar">
+            <div className="progress-bar-fill" style={{ width: `${percent}%` }}>
+                {percent}%
+            </div>
+        </div>
+    )
+}
+
+export default ProgressBar;
diff --git a/code/src/components/Purchases.js b/code/src/components/Purchases.js
@@ -0,0 +1,58 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable indent */
+
+import React from 'react';
+import Question2Image from '../images/question2.jpg'
+
+const Purchases = (props) => {
+    const { purchases, setPurchases } = props
+    // const { food, setFood, avocado, setAvocado, percentboop, setPercentbop } = props
+
+    // const inputRef = useRef(null);
+
+    const handlePurchasesChange = (event) => {
+        setPurchases(event.target.value)
+    }
+
+    // const goToNextQuestion = () => {
+    //     setAvocado(avocado + 1)
+    //     setPercentbop(percentboop + 10)
+    // }
+
+    // const handleKeyDown = (event) => {
+    //     if (event.keyCode === 13) {
+    //       goToNextQuestion();
+    //     }
+    // };
+
+    return (
+        <div className="food-wrapper">
+            <img
+            className="question2-image"
+            src={Question2Image}
+            alt="q2" />
+            <p>How many retail therapy purchases have you done with us?</p>
+            <select
+            className="question2"
+            onChange={handlePurchasesChange}
+            value={purchases}>
+                <option value="">Select option:</option>
+                <option value="ounce">Only once (thus far!)</option>
+                <option value="twice">At least two times</option>
+                <option value="3-5 times">3-5 times</option>
+                <option value="5-20 times">5-20 times</option>
+                <option value="more than 20 times">More than 20 times! take my MONEY ◝(ᵔᵕᵔ)◜</option>
+            </select>
+            {/* <input
+            type="text"
+            value={food}
+            ref={inputRef}
+            onKeyDown={handleKeyDown}
+            onChange={handleFoodChange} />
+            {console.log(food)} */}
+        </div>
+    )
+}
+
+export default Purchases;
diff --git a/code/src/components/RadioProduct.js b/code/src/components/RadioProduct.js
@@ -0,0 +1,51 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable react/jsx-tag-spacing */
+/* eslint-disable indent */
+/* eslint-disable react/jsx-indent-props */
+
+import React from 'react';
+import Vinylimage from '../images/vinylicon.jpg'
+import Posterimage from '../images/postericon.jpg'
+import Fadsimage from '../images/fadicon.jpg'
+import Consoleimage from '../images/consoleicon.jpg'
+
+const products = [
+  'Exclusive vinyl records',
+  'Vintage video game consoles',
+  '90s-fads inspired merch',
+  'Y2k wall-art and posters'
+];
+
+const RadioProduct = (props) => {
+  const { favProduct, setFavProduct } = props;
+
+  const handleProductChange = (event) => {
+    setFavProduct(event.target.value);
+  }
+  return (
+    <form className="food-wrapper">
+      <p>What is your favorite product from UltraNostalgia?</p>
+      {products.map((product) => (
+        <label htmlFor="product" key={product} className="favorite-product">
+          <input
+            type="radio"
+            name="favoriteProduct"
+            className="product-button"
+            value={product}
+            onChange={handleProductChange}
+            onChecked={favProduct === product}
+            required />
+          {product}
+        </label>
+      ))}
+      <div className="icon-container">
+      <img className="product-icon" src={Vinylimage} alt="vinyl"/>
+      <img className="product-icon" src={Posterimage} alt="poster"/>
+      <img className="product-icon" src={Fadsimage} alt="fads"/>
+      <img className="product-icon" src={Consoleimage} alt="console"/>
+      </div>
+    </form>
+  )
+}
+
+export default RadioProduct;
diff --git a/code/src/components/Result.js b/code/src/components/Result.js
@@ -0,0 +1,15 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable max-len */
+/* eslint-disable indent */
+import React from 'react';
+
+const Result = ({ name, purchases, favProduct }) => {
+    return (
+        <>
+        <p>Awesome! Thank you for completing our survey {name}.</p>
+        <p>You have used our online store {purchases} and we appreciate that, your favorite out of our range of ultra nostalgic products are {favProduct}.</p>
+        </>
+    )
+}
+
+export default Result;
diff --git a/code/src/components/Satisfaction.js b/code/src/components/Satisfaction.js
@@ -0,0 +1,26 @@
+/* eslint-disable linebreak-style */
+import React from 'react';
+
+const Satisfaction = (props) => {
+  const { satisfactionRange, satisfaction, handleSatisfactionChange } = props
+  return (
+    <div className="food-counter">
+      <form className="satisfaction-container">
+        <p>What do you think of our online store?</p>
+        <label htmlFor="satisfaction" className="satisfaction-slider">
+          <input
+            className="slider"
+            type="range"
+            min="0"
+            max="4"
+            value={satisfactionRange}
+            onChange={handleSatisfactionChange}
+            required />
+          <p>{satisfaction}</p>
+        </label>
+      </form>
+    </div>
+  );
+};
+
+export default Satisfaction;
diff --git a/code/src/components/Suggestion.js b/code/src/components/Suggestion.js
@@ -0,0 +1,30 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable padded-blocks */
+import React from 'react';
+
+const Suggestion = ({ suggestion, setSuggestion }) => {
+
+  const handleSuggestionChange = (event) => {
+    setSuggestion(event.target.value);
+  }
+
+  return (
+    <div className="food-container">
+      <p> Got any suggestions?</p>
+      <label htmlFor="suggestion">
+        <textarea
+          className="textarea-opinion"
+          name="suggestion"
+          rows="10"
+          cols="50"
+          maxLength="300"
+          placeholder="How can we improve our services? Let us know here..."
+          value={suggestion}
+          onChange={handleSuggestionChange}
+          required />
+      </label>
+    </div>
+  )
+}
+
+export default Suggestion;