Technigo · jempa182 · Oct 15, 2024 · Oct 15, 2024 · Oct 16, 2024 · Oct 17, 2024
diff --git a/README.md b/README.md
@@ -1,37 +1,13 @@
-<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.
+This project was about practising React state and controlled forms by making a Typeform-like product in the form of a quiz. The completed project should consist of at least three questions that need to be answered by users. When the user presses submit, they should see a summary of their answers.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## Problem
 
-## Getting Started with the Project
+In this project, we worked with trying to connect the different components within the survey. We also encountered several challenges related to styling and layout, such as customizing the appearance of dropdown menus to match our design. Additionally, we adjusted default styles on input fields, including removing border-radius and default borders to create a more uniform look throughout the form. By solving these issues, we improved the user experience and created a visually appealing survey application.
 
-### Dependency Installation & Startup Development Server
-
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-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.
-
-```bash
-npm i && code . && npm run dev
-```
-
-### The Problem
-
-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?
 
 ### 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.
-
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://survey-site-jje.netlify.app
diff --git a/index.html b/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Survey - Project - Week 6</title>
   </head>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,3 +1,17 @@
+// src/App
+import React, { useState } from 'react';
+
+import { Header } from "./components/Header";
+import { Survey } from "./components/Survey";
+
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
-};
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  return (
+    <div>
+      <Header isSubmitted={isSubmitted} />
+      <Survey setIsSubmitted={setIsSubmitted} />
+    </div>
+  );
+};
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,17 @@
+export const Header = ({ isSubmitted }) => {
+  return ( 
+    <div className="header-container">
+      {isSubmitted ? (
+        <>
+          <h1>Results</h1>
+          <h2>The Science of Happiness</h2>
+        </>
+      ) : (
+        <>
+          <h1>The Science of Happiness</h1>
+          <h2>Everyday Joy Boosters survey</h2>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Question1.jsx b/src/components/Question1.jsx
@@ -0,0 +1,19 @@
+// src/components/Question1
+
+export const Question1 = ({ activity, setActivity }) => {
+  return (
+    <div className="question1">
+      <label>
+      <h3>Whats your favorite mood boost activity?</h3>
+
+      <input className="input-area"
+        type="text"
+        placeholder="Write your answer here..."
+        onChange={(event) => setActivity(event.target.value)}
+        value={activity}
+        required
+      />
+      </label>
+    </div>
+  );
+};
diff --git a/src/components/Question2.jsx b/src/components/Question2.jsx
@@ -0,0 +1,29 @@
+// src/components/Question2
+
+export const Question2 = ({ musicYesNo, setMusicYesNo }) => {
+  return (
+    <div className="question2">
+    <h3>Does music make you happy?</h3>
+    <label>
+      <input className="radio-btn1"
+        type="radio"
+        value="yes"
+        onChange={event => setMusicYesNo(event.target.value)}
+        checked={musicYesNo === "yes"}
+      />
+    Yes, absolutely.
+    </label>
+
+      <label>
+        <input className="radio-btn2"
+          type="radio"
+          value="no"
+          onChange={event => setMusicYesNo(event.target.value)}
+          checked={musicYesNo === "no"}
+        />
+
+      No!!
+      </label>
+      </div>
+  )
+}
diff --git a/src/components/Question3.jsx b/src/components/Question3.jsx
@@ -0,0 +1,21 @@
+// src/components/Question3
+
+export const Question3 = ({ happySong, setHappySong }) => {
+  return (
+    <div className="question3">
+    <label><h3>What is your go-to happy song?</h3>
+
+    <select
+      onChange={event => setHappySong(event.target.value)}
+      value={happySong}
+      >
+        <option value="">Select</option>
+        <option value="A bar song (Tipsy) - Shaboozey">A Bar Song (Tipsy) - Shaboozey</option>
+        <option value="Birds of a feather - Billie Eilish">Birds of a feather - Billie Eilish</option>
+        <option value="Taste - Sabrina Carpenter">Taste - Sabrina Carpenter</option>
+        <option value="Timeless - The Weeknd & Playboi Carti">Timeless - The Weeknd & Playboi Carti</option>
+        <option value="Please Please Please - Sabrina Carpenter">Please please please - Sabrina Carpenter</option>
+      </select></label>
+      </div>
+  )
+}
diff --git a/src/components/Summary.jsx b/src/components/Summary.jsx
@@ -0,0 +1,9 @@
+// src/components/Summary
+
+export const Summary = ({ activity, musicYesNo, happySong }) => {
+  return (
+    <div className="summary-container">
+      <h3>{activity} is your mood-boosting activity. Music {musicYesNo === 'yes' ? 'is' : 'is not'} making you happy, and if ever you’re down - listen to {happySong}.</h3> 
+    </div>
+  )
+}
diff --git a/src/components/Survey.jsx b/src/components/Survey.jsx
@@ -0,0 +1,36 @@
+// src/components/Survey
+
+import React, { useState } from 'react';
+import { Question1 } from "./Question1"
+import { Question2 } from "./Question2"
+import { Question3 } from "./Question3"
+import { Summary } from "./Summary"
+
+
+export const Survey = ({ setIsSubmitted }) => {
+  const [activity, setActivity] = useState('');
+  const [musicYesNo, setMusicYesNo] = useState();
+  const [happySong, setHappySong] = useState();
+  const [showSummary, setShowSummary] = useState(false);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setShowSummary(true);
+    setIsSubmitted(true);
+  };
+
+  return (
+    <div className="survey-container">
+      {!showSummary ? (
+      <form onSubmit={handleSubmit}>
+        <Question1 activity={activity} setActivity={setActivity} />
+        <Question2 musicYesNo={musicYesNo} setMusicYesNo={setMusicYesNo} />
+        <Question3 happySong={happySong} setHappySong={setHappySong} />
+        <button type="submit">Submit your answer</button>
+      </form>
+      ) : (
+        <Summary activity={activity} musicYesNo={musicYesNo} happySong={happySong} />
+    )}
+    </div>
+  );
+}; 
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,146 @@
 :root {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Reset default margins and paddings */
+* {
+  margin: 0;
+}
+
+h1 {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  color: white;
+  padding-bottom: 10px;
+  font-size: 22px;
+}
+
+h2 {
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  color: white;
+  font-size: 16px;
+}
+
+h3 {
+  margin: 20px 0;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  color: #0018A4;
+  font-size: 16px;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: "Poppins", sans-serif;
+}
+
+.header-container {
+  background-color: #0018A4;
+  display: flex;
+  flex-direction: column;
+  align-items:center;
+  padding: 50px 10px;
+}
+
+/* Updated styles for survey-container */
+.survey-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  text-align: left;
+  font-family: "Poppins", sans-serif;
+}
+
+.question1,
+.question2,
+.question3 {
+  margin: 20px 0 40px 0;
+}
+
+/* Style inputs, selects, and textareas within survey-container */
+
+.survey-container text {
+  margin-top: 30px;
+  padding: 10px;
+  border-width: 3px;
+}
+
+.input-area {
+  border-width: 3px;
+  padding: 7px;
+  border-radius: 4px;
+  width: 95%;
+  outline: none;
+  border: 1px solid #6c6c6c;
 }
+
+select {
+  padding: 7px;
+  border-radius: 4px;
+  width: 100%;
+  border-color: #6c6c6c;
+  cursor: pointer;
+}
+
+label {
+  cursor: pointer;
+}
+
+.radio-btn1 {
+  margin: 0 4px 0 0px;
+}
+
+.radio-btn2 {
+  margin: 0 4px 0 20px;
+}
+
+/* Ensure buttons are centered */
+.survey-container button {
+  display: block;
+  margin: 20px auto;
+}
+
+button {
+  width: 100%;
+  padding: 7px;
+  background-color: #0018A4;
+  color: white;
+  border-radius: 4px;
+  border: 1px solid #0018A4;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #2035ad;
+}
+
+/* Tablet and Desktop view */
+@media (min-width: 667px) {
+
+  .survey-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    text-align: center;
+    font-family: "Poppins", sans-serif;
+  }
+
+  button {
+    width: 50%;
+  }
+
+  select {
+    width: 70%;
+  }
+
+  .input-area {
+    width: 70%;
+  }
+
+  .summary-container {
+    max-width: 600px;
+  }
+
+}