Technigo · edv-rd · Mar 15, 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/hero.jpg b/code/public/hero.jpg
diff --git a/code/public/hero.webp b/code/public/hero.webp
diff --git a/code/public/index.html b/code/public/index.html
@@ -1,9 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -13,7 +19,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>Survey :D</title>
   </head>
 
   <body>
@@ -30,5 +36,4 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
-
 </html>
diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,12 @@
 import React from 'react';
+import { Survey } from './components/Survey';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="hero-image">
+      <div className="app-container">
+        <Survey />
+      </div>
     </div>
   );
 }
diff --git a/code/src/components/Result.js b/code/src/components/Result.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Song } from './Song'
+
+export const Result = (props) => {
+  let longName = false;
+  let badSchool = false;
+  let thinPasta = false;
+  let song = '';
+  let text = '';
+  let embedurl = '';
+
+  if (props.answerOne.length > 4) { longName = true; }
+
+  if (props.answerTwo === 'bad' || props.answerTeo === 'really bad') { badSchool = true; }
+
+  if (props.answerThree === 'plain spaghetti') { thinPasta = true; }
+
+  if (longName && badSchool && thinPasta) {
+    song = 'American Football - Never Meant';
+    text = "you're the true original midwest emo tune. pure longing and regret in 04:28. as they say, 'everyone's a gangster until that second guitar part comes in'. listen and you'll know.";
+    embedurl = 'https://open.spotify.com/embed/track/6kZqCqD1r08sJAQ1TjuEpM?utm_source=generator'
+  }
+
+  if (longName && badSchool && !thinPasta) {
+    song = "Sleep in. - I Do Know And I'm Not Sorry";
+    text = "you have attitude, and a riff which makes you want to dramatically throw a plate on the ground. you walk with your back straight. people shouldn't mess with you.";
+    embedurl = 'https://open.spotify.com/embed/track/4J1Ie6FTecIid0yPEHNGST?utm_source=generator'
+  }
+
+  if (longName && !badSchool && thinPasta) {
+    song = 'Modern Baseball - Your Graduation';
+    text = "uou're all about high school and unrequited love. you know what? it's their loss. you also have a really good guitar solo.";
+    embedurl = 'https://open.spotify.com/embed/track/7kVoPBSlGghzLoQjODkxGD?utm_source=generator'
+  }
+
+  if (longName && !badSchool && !thinPasta) {
+    song = "Hot Mulligan - How Do You Know It's Not Armadillo Shells?";
+    text = "you're what happens when a guitar meets a drum machine and synth. you're both electronic and acoustic. you're the duality of man. and the final product really comes together well.";
+    embedurl = 'https://open.spotify.com/embed/track/2oEInOIbcj4f9pFpxsS1Td?utm_source=generator'
+  }
+
+  if (!longName && badSchool && thinPasta) {
+    song = 'Turnover - I Would Hate You If I Could';
+    text = "you're melancholy, and somewhat sultry. but above all, you're really melodic. listening to you sing about old loves feels like walking on velvet in an empty room."
+    embedurl = 'https://open.spotify.com/embed/track/5g1zOEyrfjMxorKlvCE3AN?utm_source=generator'
+  }
+
+  if (!longName && badSchool && !thinPasta) {
+    song = 'The Appleseed Cast - Marigold & Patchwork';
+    text = "you're old school. no nonsense. just straight up harsh heartache, wishing to go back in time. but you have to face the fact: it's not 1998 anymore. but there is still beauty in the present.";
+    embedurl = 'https://open.spotify.com/embed/track/2MPndJjBcn555aZQyuvt3S?utm_source=generator'
+  }
+
+  if (!longName && !badSchool && !thinPasta) {
+    song = 'Foxing - The Medic';
+    text = "you don't feel like the others. you want more of life. you want to be loved, you want to be intoxicated. but be careful. don't go chasing something that would ultimately kill you.";
+    embedurl = 'https://open.spotify.com/embed/track/5KzuAU7zxcP0bq0CPdRRyr?utm_source=generator'
+  }
+
+  if (!longName && !badSchool && thinPasta) {
+    song = 'Tiny Moving Parts - Medicine';
+    text = "you're intricate and modern. something tells me you are always wishing you were somewhere else than where you are, with someone else than the one you are with. but isn't there also beauty in the known?"
+    embedurl = 'https://open.spotify.com/embed/track/0uqTwEKTbkuhrn8yGSO6b5?utm_source=generator'
+  }
+
+  return (
+    <div className="result-container">
+      <h2>your results:</h2>
+      <p>your name is {props.answerOne}, your high school experience was {props.answerTwo},
+      and you prefer {props.answerThree} in your pasta dish...
+      </p>
+      <div className="song-container">
+        <Song song={song} text={text} url={embedurl} />
+      </div>
+    </div>
+  )
+}
diff --git a/code/src/components/Song.js b/code/src/components/Song.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Song = (props) => {
+  return (
+    <div className="song-content">
+      <h1>you are {props.song}</h1>
+      <p className="song-text">{props.text}</p>
+      <iframe title={props.song} style={{ borderRadius: '12px' }} src={props.url} width="100%" height="152" frameBorder="0" allowFullScreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy" />
+
+    </div>
+  )
+}
diff --git a/code/src/components/Survey.js b/code/src/components/Survey.js
@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import { Result } from './Result'
+
+export const Survey = () => {
+  const [answerOne, setAnswerOne] = useState('')
+  const [answerTwo, setAnswerTwo] = useState('not good')
+  const [answerThree, setAnswerThree] = useState('plain spaghetti')
+  const [surveyStep, setSurveyStep] = useState(0)
+
+  return (
+    <div className="survey-container">
+      <div className="survey-title-container">
+        <h1>🎸 which midwest emo-ish song are you? 💔</h1>
+      </div>
+      <div className="survey-question-container">
+        {surveyStep === 0 && (
+          <>
+            <h2>what is your name?</h2>
+            <input type="text" value={answerOne} onChange={(e) => setAnswerOne(e.target.value)} className="survey-text-input" />
+            <button type="button" onClick={() => setSurveyStep(1)} className="survey-next-button">next</button>
+          </>
+        )}
+        {surveyStep === 1 && (
+          <>
+            <h2>how bad was your time in highschool?</h2>
+            <label htmlFor="not-good">
+              <input
+                type="radio"
+                name="not-good"
+                value="not good"
+                id="not-good"
+                checked={answerTwo === 'not good'}
+                onChange={(e) => setAnswerTwo(e.target.value)} />
+          not good...
+            </label>
+            <label htmlFor="bad">
+              <input
+                type="radio"
+                name="bad"
+                value="bad"
+                id="bad"
+                checked={answerTwo === 'bad'}
+                onChange={(e) => setAnswerTwo(e.target.value)} />
+          bad...
+            </label>
+            <label htmlFor="really-bad">
+              <input
+                type="radio"
+                name="really-bad"
+                value="really bad"
+                id="really-bad"
+                checked={answerTwo === 'really bad'}
+                onChange={(e) => setAnswerTwo(e.target.value)} />
+          really bad...
+            </label>
+
+            <button type="button" onClick={() => setSurveyStep(2)} className="survey-next-button">next</button>
+          </>
+        )}
+        {surveyStep === 2 && (
+          <>
+            <h2>what is your favourite type of pasta? </h2>
+            <select
+              value={answerThree}
+              onChange={(e) => setAnswerThree(e.target.value)}>
+              <option value="plain spaghetti">plain spaghetti</option>
+              <option value="ravioli">ravioli</option>
+              <option value="tortellini">tortellini</option>
+            </select>
+            <button type="button" onClick={() => setSurveyStep(3)} className="survey-results-button">so which song am I?</button>
+          </>
+        )}
+        {surveyStep === 3 && (
+          <Result answerOne={answerOne} answerTwo={answerTwo} answerThree={answerThree} />
+        )}
+      </div>
+    </div>
+  )
+}