diff --git a/README.md b/README.md index 4f270fdd..2cd01597 100644 --- a/README.md +++ b/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 diff --git a/pull_request_template.md b/pull_request_template.md index bf3094dd..0ee035b2 100644 --- a/pull_request_template.md +++ b/pull_request_template.md @@ -1,6 +1,11 @@ ## Netlify link + Add your Netlify link here. PS. Don't forget to add it in your readme as well. +https://courageous-dieffenbachia-5268df.netlify.app/ ## Collaborators + Add any collaborators here, as well as in the title of the PR. +https://github.com/Heleneabrahamsson +https://github.com/Sherrydev11 diff --git a/src/App.jsx b/src/App.jsx index 1091d431..09142774 100644 --- a/src/App.jsx +++ b/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
Find me in src/app.jsx!
; + + 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 ( +
+
+

Travel Preferences Survey

+
+ + {showSummary ? ( + + ) : ( +
+ + + {/* Corrected */} + + + )} +
+ ); }; + +export default App; diff --git a/src/components/QuestionOne.jsx b/src/components/QuestionOne.jsx new file mode 100644 index 00000000..657d35ec --- /dev/null +++ b/src/components/QuestionOne.jsx @@ -0,0 +1,33 @@ +import React from "react"; + +export const QuestionOne = ({ setWeatherPreference }) => { + const handleChange = (event) => { + setWeatherPreference(event.target.value); + }; + + return ( +
+

Do you enjoy warm or cold weather when you are on vacation?

+ + + +
+ ); +}; + diff --git a/src/components/QuestionThree.jsx b/src/components/QuestionThree.jsx new file mode 100644 index 00000000..a7dc2407 --- /dev/null +++ b/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 ( +
+

Who do you usually prefer to travel with?

+ +
+
+ +
+
+ +
+
+ +
+ ); +}; + diff --git a/src/components/QuestionTwo.jsx b/src/components/QuestionTwo.jsx new file mode 100644 index 00000000..587c4c46 --- /dev/null +++ b/src/components/QuestionTwo.jsx @@ -0,0 +1,21 @@ +import React from "react"; + +export const QuestionTwo = ({ travelActivity, setTravelActivity }) => { + return ( +
+ +
+ ) +}; diff --git a/src/components/Summary.jsx b/src/components/Summary.jsx new file mode 100644 index 00000000..96f0d7cf --- /dev/null +++ b/src/components/Summary.jsx @@ -0,0 +1,12 @@ +const Summary = ({ weatherPreference, travelActivity, questionThree }) => { + return ( +
+

Survey Summary

+

Weather Preference: {weatherPreference}

+

Favorite Travel Activity: {travelActivity}

+

Preferred Travel Companion: {questionThree}

+
+ ); +}; + +export default Summary; diff --git a/src/index.css b/src/index.css index 4558f538..a720284b 100644 --- a/src/index.css +++ b/src/index.css @@ -6,8 +6,89 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - 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 */ +.submit-button { + background-color: #16423C; + color: #C4DAD2; + padding: 20px; + border: solid 5px; + border-radius: 20px; + width: 45%; + margin-top: 50px; +} +.submit-button:hover { + cursor: pointer; + background: #C4DAD2; + color: #16423C; +} + +@media (min-width: 1024px) { + select { + width: 20%; + } + .submit-button { + width: 15%; + } +} + +@media (min-width: 768px) and (max-width: 1024px) { + select { + width: 30%; + } + .submit-button { + width: 25%; + } +} + +.OptionThree { + margin-left: 16px; } +.OptionFour { + margin-right: 18px; +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 51294f39..6fd2ad73 100644 --- a/src/main.jsx +++ b/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(