Our project with my teamate : Heleneabrahamsson & Sherrydev11

README.md

@@ -24,11 +24,12 @@ 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?
+We made a plan of we wanted the user to experience the survey. And then we chose the theme of vacation which we split in 3 parts.
 
 ### 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://courageous-dieffenbachia-5268df.netlify.app/
 
 ## Instructions
 

pull_request_template.md

@@ -1,6 +1,10 @@
 ## Netlify link
+
 Add your Netlify link here.
 PS. Don't forget to add it in your readme as well.
 
 ## Collaborators
+
 Add any collaborators here, as well as in the title of the PR.
+https://github.com/Heleneabrahamsson
+https://github.com/Sherrydev11

src/App.jsx

@@ -1,3 +1,43 @@
+import { useState } from 'react';
+import { QuestionOne } from "./components/QuestionOne.jsx";
+import { QuestionTwo } from "./components/QuestionTwo.jsx";
+import { QuestionThree } from "./components/QuestionThree.jsx"; 
+import Summary from './components/Summary.jsx';
+
 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
+
+  const [weatherPreference, setWeatherPreference] = useState("");
+  const [travelActivity, setTravelActivity] = useState("");
+  const [questionThree, setQuestionThree] = useState(""); 
+  const [showSummary, setShowSummary] = useState(false);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setShowSummary(true);
+  };
+
+  return (
+    <div className="header-container">
+      <header>
+        <h1>Travel Preferences Survey</h1>
+      </header>
+
+      {showSummary ? (
+        <Summary 
+          weatherPreference={weatherPreference} 
+          travelActivity={travelActivity} 
+          questionThree={questionThree} 
+        />
+      ) : (
+        <form onSubmit={handleSubmit}>
+          <QuestionOne setWeatherPreference={setWeatherPreference} />
+          <QuestionTwo travelActivity={travelActivity} setTravelActivity={setTravelActivity} />
+          <QuestionThree travelCompanion={questionThree} setTravelCompanion={setQuestionThree} /> {/* Corrected */}
+          <button type="submit">Submit Survey!</button>
+        </form>
+      )}
+    </div>
+  );
 };
+
+export default App;

src/components/QuestionOne.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+export const QuestionOne = ({ setWeatherPreference }) => {
+    const handleChange = (event) => {
+        setWeatherPreference(event.target.value);
+    };
+
+    return (
+        <div className="QuestionOne">
+            <h2>Do you enjoy warm or cold weather when you are on vacation?</h2>
+            <label>
+                <input
+                    className="radio-button1"
+                    type="radio"
+                    value="warm"
+                    onChange={handleChange}
+                />
+                warm
+            </label>
+
+            <label>
+                <input
+                    className="radio-button2"
+                    type="radio"
+                    value="cold"
+                    onChange={handleChange}
+                />
+                cold
+            </label>
+        </div>
+    );
+};
+

src/components/QuestionThree.jsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+
+export const QuestionThree = ({ travelCompanion, setTravelCompanion }) => {
+  const handleInputChange = (event) => {
+    setTravelCompanion(event.target.value);
+  };
+
+  return (
+    <div className="QuestionThree">
+      <h2>Who do you usually prefer to travel with?</h2>
+      <label>
+        <input 
+          type="radio" 
+          name="travelCompanion" 
+          value="Family" 
+          checked={travelCompanion === "Family"} 
+          onChange={handleInputChange} 
+        />
+        Family – I love family trips with kids or relatives.
+      </label>
+      <br />
+      <br />
+      <label>
+        <input 
+          type="radio" 
+          name="travelCompanion" 
+          value="Friends" 
+          checked={travelCompanion === "Friends"} 
+          onChange={handleInputChange} 
+        />
+        Friends – Adventures are more fun with friends.
+      </label>
+      <br />
+      <br />
+      <label className="OptionThree">
+        <input 
+          type="radio" 
+          name="travelCompanion" 
+          value="Solo" 
+          checked={travelCompanion === "Solo"} 
+          onChange={handleInputChange} 
+        />
+        Solo – I enjoy discovering new places on my own.
+      </label>
+      <br />
+      <br />
+      <label className="OptionFour">
+        <input 
+          type="radio" 
+          name="travelCompanion" 
+          value="Partner" 
+          checked={travelCompanion === "Partner"} 
+          onChange={handleInputChange} 
+        />
+        Partner – A romantic getaway is always ideal.
+      </label>
+    </div>
+  );
+};
+

src/components/QuestionTwo.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export const QuestionTwo = ({ travelActivity, setTravelActivity }) => {
+    return (
+        <div className="QuestionTwo">
+            <label>
+                <h2>What kind of activities excite you the most while traveling?</h2>
+                <select 
+                    value={travelActivity || ""}
+                    onChange={event => setTravelActivity(event.target.value)}
+                >
+                    <option value="" disabled>Select an activity</option>
+                    <option value="Relaxing by the beach or pool">Relaxing by the beach or pool</option>
+                    <option value="Hiking through mountains or forests">Hiking through mountains or forests</option>
+                    <option value="Exploring historic cities and museums">Exploring historic cities and museums</option>
+                    <option value="Trying adventure sports like surfing or ziplining">Trying adventure sports like surfing or ziplining</option>
+                </select>
+            </label>
+        </div>
+    )
+};

src/components/Summary.jsx

@@ -0,0 +1,12 @@
+const Summary = ({ weatherPreference, travelActivity, questionThree }) => { 
+    return (
+        <div className="summary-section">
+            <h2>Survey Summary</h2>
+            <p><strong>Weather Preference:</strong> {weatherPreference}</p>
+            <p><strong>Favorite Travel Activity:</strong> {travelActivity}</p>
+            <p><strong>Preferred Travel Companion:</strong> {questionThree}</p> 
+        </div>
+    );
+};
+
+export default Summary;

src/index.css

@@ -8,6 +8,104 @@
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: Arial, Helvetica, sans-serif
 }
+
+body {
+  background-color: #E9EFEC;
+  text-align: center;
+}
+
+/* styling for headings */
+h2 {
+  color: #16423C;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 18px;
+}
+
+header {
+  background-color: #16423C;
+  padding: 20px;
+  margin-bottom: 50px;
+}
+
+
+h1 {
+  color: #E9EFEC;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 25px;
+
+}
+
+/* styling for questions */
+
+.QuestionTwo{
+  margin-top: 70px;
+}
+
+
+select {
+  padding: 9px;
+    font-size: 16px;
+    border: 1px solid #16423C;
+    border-radius: 5px;
+    width: 90%;
+    margin-top: 10px;
+}
+
+select option {
+  color: #16423C;           
+  padding: 10px;         
+  font-size: 16px;
+}
+
+
+.QuestionThree{
+  margin-top: 70px;
+}
+
+
+label{
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* submit button*/
+
+button{
+background-color: #16423C;
+color: #C4DAD2;
+padding: 20px;
+border: solid 5px;
+border-radius: 20px;
+width: 45%;
+margin-top: 50px;
+}
+
+
+button:hover {
+  cursor: pointer;
+  background: #C4DAD2;
+  color: #16423C;
+}
+
+
+.OptionThree{
+  margin-left: 16px;
+}
+
+.OptionFour{
+  margin-right: 18px;
+}
+
+/* responsive design for desktop */
+
+@media (min-width: 1024px) {
+select{
+  width: 20%;
+}
+
+button{
+  width: 15%;
+}
+
+}

src/main.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { App } from "./App.jsx";
+import App from "./App.jsx"; 
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(