Technigo · HeleneWestrin · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -2,19 +2,20 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
+    "react/prop-types": "off",
   },
-}
+};
diff --git a/README.md b/README.md
@@ -1,37 +1,22 @@
-<h1 align="center">
-  <a href="">
-    <img src="/src/assets/survey.svg" alt="Project Banner Image">
-  </a>
-</h1>
-
 # Survey Project
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## Getting Started with the Project
-
-### Dependency Installation & Startup Development Server
+The project involved building a React survey with at least three questions, using different input types (radio buttons, dropdown). Upon submission, users are shown a summary of their answers. The focus was on practicing React state and controlled forms while ensuring accessibility, responsiveness, and clean code.
 
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
+Collaboration was done via GitHub and we worked on separate branches and then merged the changes to main.
 
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
+### The Process
 
-```bash
-npm i && code . && npm run dev
-```
+Prior to our first meeting, Helene set up the design on Figma and also created a flowchart to help us visualize the data flow and state management for our application.
 
-### The Problem
+We started with setting up the structure of the project by pair programming using LiveShare and a Slack huddle. When that was done, we had a semi-working flow with state manangement. We could then divide the tasks between us. 
 
-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?
+One challenge was that our schedules rarely aligned, so after our first meeting we had to find a way to make progress in our own time while avoiding merge conflicts. We set up a Canvas in Slack with an organized to-do list and assigned ourselves various tasks throughout the week. We  also included detailed comments in our code and this helped to promote clarity and communication.
 
 ### 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.
+[View it live »](https://happiness-survey.netlify.app/)
 
-## Instructions
+### Collaborators
 
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+Helene Westrin
+Joyce Kuo
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Survey - Project - Week 6</title>
+    <title>Happiness survey by Joyce & Helene</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/instructions.md b/instructions.md
@@ -15,6 +15,7 @@ You don't have to use a lot of components to start with when doing this project.
 How you design your page is up to you, but take accessibility into account when you are styling your form elements - so inputs should have labels and should be easily readable and usable. We STRONGLY recommend having some kind of design or sketch before starting to code.
 
 ## How to get started
+
 1. **Person A** forks the repo
 2. **Person A** invites person B as a collaborator to the repo (Settings -> Collaborators and teams -> Add people)
 3. **Person A** clones the repo
@@ -24,6 +25,7 @@ How you design your page is up to you, but take accessibility into account when
 7. When you're done with a feature, it's time to merge! You choose if you want to work with PRs and code reviews or if you want to do this more verbally before you merge.
 
 ## Requirements:
+
 - Your app should consist of at least 3 questions.
 - At least one question should use radio buttons.
 - At least one question should use a select dropdown.
@@ -37,31 +39,35 @@ How you design your page is up to you, but take accessibility into account when
 - Make your app responsive (it should look good on devices from 320px width up to 1600px)
 
 ## Stretch goals
+
 So you’ve completed the requirements? Great job! Ensure you've committed and pushed a version of your project before starting on the stretch goals. Remember that the stretch goals are optional.
 
 ### Intermediate Stretch Goals
+
 - Use a form element you haven't tried before (such as a [range slider](https://www.w3schools.com/howto/howto_js_rangeslider.asp)) and connect it to React state. You can find a list of input types [here](https://www.w3schools.com/html/html_form_input_types.asp).
 - Add validation to your survey! Use either HTML input validation attributes (such as `required`) or implement custom logic when the user clicks the submit button to make the form fields have validations. If you choose to implement your own validation, you should also make sure to show error messages in a nice way.
 - Create a button that, when clicked, will scroll down to the top of the next question in the survey (if possible)
 
 ### Advanced Stretch Goals
+
 - Visualize to the user how far through the survey they are and how much is left by creating a progress bar
 - Use Regex validation for some input on your survey
 - Show different questions depending on the answer to a specific question
 - Create a multi-step form. Example 👇
   Show each question on its own 'page' with a continue button to progress to the next question (like how typeform does it). If you decide to split your form into sections, then one approach you could take is to try to think of these sections as a single `useState` hook which you can use to conditionally render different groups of inputs. For example, you could have some state like `const [section, setSection] = useState('firstQuestion')` and then when the user presses a button to progress, you'd use the `setSection()` function to progress them to the second question, etc. Then, in your JSX, you could conditionally render, like this:
+
   ```
   const Example = () => {
     const [section, setSection] = useState('firstQuestion')
-  
+
     return (
       <div>
         {section === 'firstQuestion' && (
           <div>
             First question...
           </div>
         )}
-  
+
         {section === 'secondQuestion' && (
           <div>
             Second question...
@@ -71,4 +77,5 @@ So you’ve completed the requirements? Great job! Ensure you've committed and p
     )
   }
   ```
+
   As always, there are many ways to approach this! This is just one suggestion.
diff --git a/package.json b/package.json
@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-aria-components": "^1.4.1",
+    "react-dom": "^18.2.0",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,53 @@
+import { useState } from "react";
+import { Home } from "./components/Home";
+import { Survey } from "./components/Survey";
+import { Results } from "./components/Results";
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+  const [surveyStarted, setSurveyStarted] = useState(false);
+  const [currentStep, setCurrentStep] = useState(1);
+  const [userAnswers, setUserAnswers] = useState({
+    answer1: "",
+    answer2: "",
+    answer3: "",
+  });
+
+  const handleSurveySubmit = (event) => {
+    event.preventDefault();
+    setCurrentStep(-1); //Switch to results
+  };
+
+  // Function to clear answers and start over
+  const resetSurvey = () => {
+    setSurveyStarted(false);
+    setCurrentStep(1);
+    setUserAnswers({
+      answer1: "",
+      answer2: "",
+      answer3: "",
+    });
+  };
+
+  return (
+    <>
+      {!surveyStarted ? (
+        <Home setSurveyStarted={setSurveyStarted} />
+      ) : currentStep === -1 ? (
+        <Results
+          setSurveyStarted={setSurveyStarted}
+          setCurrentStep={setCurrentStep}
+          userAnswers={userAnswers}
+          resetSurvey={resetSurvey} // Pass reset function to Results
+        />
+      ) : (
+        <Survey
+          currentStep={currentStep}
+          setCurrentStep={setCurrentStep}
+          userAnswers={userAnswers}
+          setUserAnswers={setUserAnswers}
+          onSubmit={handleSurveySubmit}
+        />
+      )}
+    </>
+  );
 };
diff --git a/src/assets/arrow-down.svg b/src/assets/arrow-down.svg
diff --git a/src/assets/checkmark.svg b/src/assets/checkmark.svg
diff --git a/src/assets/favicon.svg b/src/assets/favicon.svg
diff --git a/src/assets/fonts/FamiljenGrotesk-Bold.eot b/src/assets/fonts/FamiljenGrotesk-Bold.eot
diff --git a/src/assets/fonts/FamiljenGrotesk-Bold.ttf b/src/assets/fonts/FamiljenGrotesk-Bold.ttf
diff --git a/src/assets/fonts/FamiljenGrotesk-Bold.woff b/src/assets/fonts/FamiljenGrotesk-Bold.woff
diff --git a/src/assets/fonts/FamiljenGrotesk-Bold.woff2 b/src/assets/fonts/FamiljenGrotesk-Bold.woff2
diff --git a/src/assets/fonts/FamiljenGrotesk-Regular.eot b/src/assets/fonts/FamiljenGrotesk-Regular.eot
diff --git a/src/assets/fonts/FamiljenGrotesk-Regular.ttf b/src/assets/fonts/FamiljenGrotesk-Regular.ttf
diff --git a/src/assets/fonts/FamiljenGrotesk-Regular.woff b/src/assets/fonts/FamiljenGrotesk-Regular.woff
diff --git a/src/assets/fonts/FamiljenGrotesk-Regular.woff2 b/src/assets/fonts/FamiljenGrotesk-Regular.woff2
diff --git a/src/assets/fonts/FamiljenGrotesk-SemiBold.eot b/src/assets/fonts/FamiljenGrotesk-SemiBold.eot
diff --git a/src/assets/fonts/FamiljenGrotesk-SemiBold.ttf b/src/assets/fonts/FamiljenGrotesk-SemiBold.ttf
diff --git a/src/assets/fonts/FamiljenGrotesk-SemiBold.woff b/src/assets/fonts/FamiljenGrotesk-SemiBold.woff
diff --git a/src/assets/fonts/FamiljenGrotesk-SemiBold.woff2 b/src/assets/fonts/FamiljenGrotesk-SemiBold.woff2
diff --git a/src/assets/home.png b/src/assets/home.png
diff --git a/src/assets/results.png b/src/assets/results.png
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -0,0 +1,18 @@
+import { Button } from "./ui/Button";
+import homeImage from "../assets/home.png";
+
+export const Home = ({ setSurveyStarted }) => {
+  return (
+    <main className="main-container">
+      <img
+        width="400"
+        height="400"
+        src={homeImage}
+        alt="Cartoon of a person relaxed and sleeping on the sofa with abstract shapes in the background"
+      />
+      <h1>The Science of Happiness</h1>
+      <p>Everyday Joy Boosters Survey</p>
+      <Button onClick={() => setSurveyStarted(true)} text="Let's begin!" />
+    </main>
+  );
+};
diff --git a/src/components/ProgressIndicator.css b/src/components/ProgressIndicator.css
@@ -0,0 +1,35 @@
+.progress-indicator {
+  display: flex;
+  justify-content: center;
+  gap: 1.75rem;
+}
+
+.circle {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pink-dark);
+  border: 2px solid var(--pink-dark);
+  font-size: 1.5rem; /* 24 (font-size you are aiming for) divided by 16 (default root font size) = 1.5 */
+  font-weight: 700;
+
+  span {
+    position: relative;
+    top: -2px;
+  }
+
+  svg {
+    fill: var(--blue-dark);
+    position: relative;
+    top: 5px;
+  }
+}
+
+.circle.active,
+.circle.completed {
+  background-color: var(--pink-dark);
+  color: var(--blue-dark);
+}
diff --git a/src/components/ProgressIndicator.jsx b/src/components/ProgressIndicator.jsx
@@ -0,0 +1,45 @@
+import "./ProgressIndicator.css";
+import Checkmark from "../assets/checkmark.svg?react";
+
+export const ProgressIndicator = ({ currentStep }) => {
+  // Function that determines which CSS class to apply to each circle based on current step
+  const getCircleClass = (step) => {
+    if (step < currentStep) return "completed";
+    if (step === currentStep) return "active";
+    return "";
+  };
+
+  const setAriaDisabled = (step) => {
+    if (step < currentStep || step > currentStep) return "true";
+    if (step === currentStep) return "false";
+  };
+
+  return (
+    <div className="progress-indicator">
+      {/* Map iterates over steps 1, 2, 3 and for each step, it calls getCircleClass(step) to determine appropriate class */}
+      {[1, 2, 3].map((step) => (
+        <div
+          key={step}
+          aria-disabled={setAriaDisabled(step)}
+          className={`circle ${getCircleClass(step)}`}
+        >
+          {/* If step is less than current step, it displays a checkmark, otherwise it displays the step number */}
+          <span>
+            {step < currentStep ? (
+              <>
+                <p className="sr-only">Step {step} (completed)</p>
+                <Checkmark />
+              </>
+            ) : (
+              <>
+                <p>
+                  <span className="sr-only">Step</span> {step}
+                </p>
+              </>
+            )}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/Results.jsx b/src/components/Results.jsx
@@ -0,0 +1,37 @@
+import { Button } from "./ui/Button";
+
+import resultsImage from "../assets/results.png";
+
+export const Results = ({
+  setSurveyStarted,
+  setCurrentStep,
+  userAnswers,
+  resetSurvey,
+}) => {
+  return (
+    <main className="main-container">
+      <img
+        width="400"
+        height="400"
+        src={resultsImage}
+        alt="Cartoon of a person sitting on top of a stack of oversized books and reading a book"
+      />
+      <h1>Your results</h1>
+      <p>
+        For you, <strong>{userAnswers.answer1.toLowerCase()}</strong> is a great
+        way to feel happier, while{" "}
+        <strong>{userAnswers.answer2.toLowerCase()}</strong> can also brighten
+        your mood during the{" "}
+        <strong>{userAnswers.answer3.toLowerCase()}</strong>.
+      </p>
+      <Button
+        onClick={() => {
+          setSurveyStarted(false);
+          setCurrentStep(1);
+          resetSurvey(); // Invoke resetSurvey function
+        }}
+        text="Start Over"
+      />
+    </main>
+  );
+};