Technigo · codeandjazz · Mar 18, 2023 · Mar 18, 2023 · Mar 18, 2023 · Mar 21, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,23 @@
 # Survey form with React
 
-Replace this readme with your own information about your project.
+This week we worked individually to create a survey using React. I chose to make mine a Madlibs game.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## The Brief
 
-## The problem
+This week we will be practicing React state and controlled forms by making a Typeform-like product. Your completed project should consist of at least 3 questions that need to be answered by users. When the user presses submit, they should see a summary of their answers.
 
-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?
+**What you need to do**
+
+✓ Your survey should consist of at least 3 questions.
+
+✓ At least one question should use radio buttons.
+
+✓ At least one question should use a select dropdown.
+
+✓ There should be a submit button. When pressed your app should hide the input form and show a summary of the user's submissions.
+
+✓ Your site should follow accessibility guidelines
 
 ## 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://fanciful-capybara-de9924.netlify.app/
diff --git a/code/package-lock.json b/code/package-lock.json
diff --git a/code/package.json b/code/package.json
@@ -4,14 +4,23 @@
   "private": true,
   "dependencies": {
     "@babel/eslint-parser": "^7.18.9",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lottiefiles/lottie-player": "^1.7.1",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.10",
+    "swatchy.js": "^1.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/code/public/index.html b/code/public/index.html
@@ -4,16 +4,16 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>
+    <meta name="title" content="Nino's Music Survey">
+    <meta name="description" content="Made with love in React.">
+    <meta property="og:url" content="" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="" />
+    <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=Audiowide&display=swap" rel="stylesheet"> 
+    <link href="https://api.fontshare.com/v2/css?f[]=nippo@200,300&display=swap" rel="stylesheet">
+    <title>Music Survey</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,18 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable max-len */
 import React from 'react';
+import { SurveyForm } from 'components/SurveyForm';
+import { Header } from 'components/Header';
+import { Footer } from 'components/Footer';
 
 export const App = () => {
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <section className="outer-wrapper">
+      <section className="inner-wrapper">
+        <Header />
+        <SurveyForm />
+        <Footer />
+      </section>
+    </section>
   );
 }
diff --git a/code/src/assets/images/music file2-03 copy.png b/code/src/assets/images/music file2-03 copy.png
diff --git a/code/src/assets/images/music file2-07.png b/code/src/assets/images/music file2-07.png
diff --git a/code/src/assets/music/Jazz Night - Golden Age Radio.mp3 b/code/src/assets/music/Jazz Night - Golden Age Radio.mp3
diff --git a/code/src/components/Alert.js b/code/src/components/Alert.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+// icon
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+
+const Alert = ({ message }) => {
+  return (
+    <div role="alert" id="form__alert" className="alert enabled">
+      <FontAwesomeIcon icon={faTriangleExclamation} id="alert-icon" />
+      <div id="form-error">
+        {message}
+      </div>
+    </div>
+  )
+}
+
+export default Alert;
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+// styling
+import 'styles/footer.css'
+
+// icons
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+
+export const Footer = () => {
+  return (
+    <footer role="contentinfo">
+      <hr className="divider" />
+      <p>A website created by Nino Aquilon @Technigo &apos;23.</p>
+      <section className="contact">
+        <a href="https://www.github.com" className="button icon-button" aria-label="Go to my Github">
+          <FontAwesomeIcon icon={faGithub} />
+        </a>
+        <a href="https://www.github.com" className="button icon-button" aria-label="Go to my LinkedIn">
+          <FontAwesomeIcon icon={faLinkedin} />
+        </a>
+      </section>
+    </footer>
+  )
+}
diff --git a/code/src/components/Header.js b/code/src/components/Header.js
@@ -0,0 +1,41 @@
+import React, { useState, useRef } from 'react';
+import backgroundMusic from 'assets/music/Jazz Night - Golden Age Radio.mp3';
+
+// icon
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMusic } from '@fortawesome/free-solid-svg-icons';
+
+// styling
+import 'styles/header.css'
+
+export const Header = () => {
+  // A variable importing the music file outside of the App function
+  // because the toggling didn't work inside it for some reason:
+  const bgMusic = new Audio(backgroundMusic);
+  bgMusic.loop = true;
+
+  const audioRef = useRef(bgMusic);
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  // This little function plays the music when pressing the music button,
+  // and turns it off when pressing again.
+  const togglePlay = () => {
+    if (isPlaying) {
+      audioRef.current.pause();
+      setIsPlaying(false);
+    } else {
+      audioRef.current.play();
+      setIsPlaying(true);
+    }
+  }
+  return (
+    <header role="banner">
+      <section className="header__top">
+        <h1>Music Survey</h1>
+        <button type="submit" className="button" onClick={togglePlay}><FontAwesomeIcon icon={faMusic} className="button__icon" />Play some Jazz
+        </button>
+      </section>
+      <hr className="divider" />
+    </header>
+  )
+}
diff --git a/code/src/components/LandingPage.js b/code/src/components/LandingPage.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+// image
+import musicIllustration1 from 'assets/images/music file2-07.png';
+
+// components
+import ProgressBar from './ProgressBar';
+import NextButton from './NextButton';
+
+const LandingPage = ({ step, setStep, section, setSection }) => {
+  return (
+    <>
+      <h2>Welcome to this survey!</h2>
+      <ul>
+        <li>You will get to answer five questions related to music.</li>
+        <li>It will take you a maximum of five minutes to fill out.</li>
+        <li>All questions that are required are marked as required.</li>
+      </ul>
+      <NextButton
+        whatQuestionNext="firstQuestion"
+        section={section}
+        setSection={setSection}
+        currentState="Whatever"
+        defaultState=""
+        message=""
+        step={step}
+        setStep={setStep}
+        whatStepNext="1" />
+      <img src={musicIllustration1} alt="illustration" className="illustration" aria-hidden="true" />
+      <ProgressBar step={step} />
+    </>
+  )
+}
+
+export default LandingPage;
diff --git a/code/src/components/NextButton.js b/code/src/components/NextButton.js
@@ -0,0 +1,31 @@
+/* eslint-disable max-len */
+import React, { useState } from 'react';
+import Alert from './Alert';
+
+const NextButton = ({ setStep, whatStepNext, setSection, currentState, defaultState, whatQuestionNext, message }) => {
+  const handleNextStep = () => {
+    setStep(whatStepNext)
+  };
+  const [alert, setAlert] = useState(false);
+  const handleNextButton = () => {
+    if (currentState !== defaultState) {
+      setSection(whatQuestionNext);
+      handleNextStep();
+    } else {
+      setAlert(true)
+    }
+  };
+  return (
+    <div className="form__alertAndButton">
+      {alert && <Alert message={message} />}
+      <button
+        type="button"
+        className="button"
+        onClick={handleNextButton}>Next question
+      </button>
+    </div>
+
+  )
+}
+
+export default NextButton;
diff --git a/code/src/components/PreviousButton.js b/code/src/components/PreviousButton.js
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+const PreviousButton = ({ setStep, whatStepBefore, setSection, whatQuestionPrevious }) => {
+  const handlePreviousButton = () => {
+    setSection(whatQuestionPrevious);
+    setStep(whatStepBefore)
+  };
+  return (
+    <button
+      type="button"
+      className="button"
+      onClick={handlePreviousButton}>Go back
+    </button>
+  )
+}
+
+export default PreviousButton;
diff --git a/code/src/components/ProgressBar.js b/code/src/components/ProgressBar.js
@@ -0,0 +1,12 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
+import React from 'react';
+
+const ProgressBar = ({ step }) => {
+  return (
+    <section className="form__progressBar">
+      <progress id="progress" className="progress" aria-hidden="true" value={step} aria-valuemin="0" aria-valuenow={step} aria-valuemax="5" max="5" />
+    </section>
+  )
+}
+
+export default ProgressBar;
diff --git a/code/src/components/QuestionCheckboxes.js b/code/src/components/QuestionCheckboxes.js
@@ -0,0 +1,60 @@
+import React from 'react';
+
+// components
+import NextButton from './NextButton';
+import PreviousButton from './PreviousButton';
+import ProgressBar from './ProgressBar';
+
+import 'styles/form.css'
+
+const QuestionCheckboxes = ({ step, setStep, section, setSection, devices, setDevices }) => {
+  const devicesGroup = ['Mobile phone', 'Computer', 'Record player', 'CD player', 'MP3-Player', 'Casette player', 'Other'];
+  const handleDevicesChange = (deviceValue) => {
+    if (devices.includes(deviceValue)) {
+      setDevices(devices.filter((item) => item !== deviceValue))
+    } else {
+      setDevices([...devices, deviceValue])
+    }
+  }
+  return (
+    <>
+      <h2>Music devices (Step 3 of 5)</h2>
+      <fieldset>
+        <legend>What device(s) do you use to listen to music?<span>Required</span></legend>
+        {devicesGroup.map((device) => (
+          <label key={device} htmlFor={device} className="form-control">
+            <input
+              type="checkbox"
+              autoComplete="off"
+              checked={devices.includes(device)}
+              onChange={() => handleDevicesChange(device)}
+              name="platform"
+              id={device} />{device}
+          </label>
+        ))}
+      </fieldset>
+      <section className="form__navigation">
+        <PreviousButton
+          whatQuestionPrevious="secondQuestion"
+          section={section}
+          setSection={setSection}
+          setStep={setStep}
+          whatStepBefore="2" />
+        <NextButton
+          whatQuestionNext="fourthQuestion"
+          section={section}
+          setSection={setSection}
+          currentState={devices.length}
+          defaultState={0}
+          message="Please select a device"
+          step={step}
+          setStep={setStep}
+          whatStepNext="4" />
+      </section>
+      <ProgressBar
+        step={step} />
+    </>
+  )
+}
+
+export default QuestionCheckboxes;