diff --git a/README.md b/README.md index 50e5933d0..a4ac675b1 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,18 @@ # Survey form with React -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. +Project made with React using state and focusing on controlling forms. This Typeform-like product consists of 4 questions. When a user presses submit, they see a summary of their answers. ## 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? +Highlights of this projects: +- using different types of inputs +- using state +- creating couple of components and the way of presenting components +- exporting components +- mounting components +- using props +- playing around with CSS visual effects like keyframes, effects on spans. ## 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://papaya-youtiao-ff0035.netlify.app/ diff --git a/code/package-lock.json b/code/package-lock.json index e34d9bb1c..3a317936e 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -9,7 +9,6 @@ "version": "1.0.0", "dependencies": { "@babel/eslint-parser": "^7.18.9", - "babel-eslint": "^10.1.0", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", @@ -4637,34 +4636,6 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.", - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, - "node_modules/babel-eslint/node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", - "engines": { - "node": ">=4" - } - }, "node_modules/babel-jest": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", @@ -20687,26 +20658,6 @@ "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==" }, - "babel-eslint": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz", - "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==", - "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", - "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==" - } - } - }, "babel-jest": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz", diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..6066ea4a5 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -13,7 +13,10 @@ 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`. --> - Technigo React App + 🚀 Experience Space, Explore your Imagination 🖖 + + + diff --git a/code/src/App.js b/code/src/App.js index f2007d229..935960e95 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,14 @@ +/* eslint-disable max-len */ import React from 'react'; +import Survey from 'components/Survey'; +import Background from 'components/Background'; export const App = () => { return ( -
- Find me in src/app.js! -
- ); +
+ + +
+ ) } +export default App; diff --git a/code/src/assets/astronaut.jpg b/code/src/assets/astronaut.jpg new file mode 100644 index 000000000..2586d87e8 Binary files /dev/null and b/code/src/assets/astronaut.jpg differ diff --git a/code/src/assets/rocket.gif b/code/src/assets/rocket.gif new file mode 100644 index 000000000..18afcf73e Binary files /dev/null and b/code/src/assets/rocket.gif differ diff --git a/code/src/assets/sky.mp4 b/code/src/assets/sky.mp4 new file mode 100644 index 000000000..d309c2f26 Binary files /dev/null and b/code/src/assets/sky.mp4 differ diff --git a/code/src/assets/sky2.mp4 b/code/src/assets/sky2.mp4 new file mode 100644 index 000000000..5f7e26422 Binary files /dev/null and b/code/src/assets/sky2.mp4 differ diff --git a/code/src/components/Background.js b/code/src/components/Background.js new file mode 100644 index 000000000..b8beabad5 --- /dev/null +++ b/code/src/components/Background.js @@ -0,0 +1,13 @@ +/* eslint-disable max-len */ +import React from 'react'; +import Sky from '../assets/sky2.mp4'; + +const Background = () => { + return ( +
+
+ ) +} + +export default Background; \ No newline at end of file diff --git a/code/src/components/ButtonNext.js b/code/src/components/ButtonNext.js new file mode 100644 index 000000000..09993d04d --- /dev/null +++ b/code/src/components/ButtonNext.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const ButtonNext = ({ button, onClickNext }) => { + return ( +
+ +
+ ); +}; + +export default ButtonNext; \ No newline at end of file diff --git a/code/src/components/Dates.js b/code/src/components/Dates.js new file mode 100644 index 000000000..c6b332cea --- /dev/null +++ b/code/src/components/Dates.js @@ -0,0 +1,32 @@ + +import React from 'react'; +import ButtonNext from './ButtonNext'; + +const monthTypes = ['2034', '2036', '2038', '2040'] +const Dates = ({ monthType, onMonthTypeChange, onClickNext }) => { + return ( +
+

+ When do you wish to travel? +

+
+ {monthTypes.map((type) => ( + + ))} +
+
+ +
+
+ ); +}; + +export default Dates; \ No newline at end of file diff --git a/code/src/components/Destination.js b/code/src/components/Destination.js new file mode 100644 index 000000000..fc010cfb7 --- /dev/null +++ b/code/src/components/Destination.js @@ -0,0 +1,29 @@ +/* eslint-disable max-len */ +import React from 'react'; +import ButtonNext from './ButtonNext'; + +const Destination = ({ place, onPlaceChange, onClickNext }) => { + return ( +
+

+ Which trip would you like to book? +

+
+ +
+
+ +
+
+ ) +} + +export default Destination; \ No newline at end of file diff --git a/code/src/components/Name.js b/code/src/components/Name.js new file mode 100644 index 000000000..d43ab5862 --- /dev/null +++ b/code/src/components/Name.js @@ -0,0 +1,28 @@ +/* eslint-disable max-len */ +import React from 'react'; +import ButtonNext from './ButtonNext'; + +// the part below is a function that makes a name written with a capital letter +// event.target.value.slice(1) is a function that selects all the characters of the name after the first character (so everything except the first character) +const Name = ({ name, onNameChange, onClickNext }) => { + return ( +
+
+

What's your name?

+ +
+
+ +
+
+ ); +}; +export default Name; \ No newline at end of file diff --git a/code/src/components/Summary.js b/code/src/components/Summary.js new file mode 100644 index 000000000..47ede2108 --- /dev/null +++ b/code/src/components/Summary.js @@ -0,0 +1,31 @@ +import React from 'react'; +import ButtonNext from './ButtonNext'; + +const Summary = ({ name, monthType, place, range, onClickNext }) => { + return ( +
+
+

+ Houston, we had a problem. +

+

+ But after 30h of practising React it got solved! +

+

+ Thank you {name}! + You will travel in {monthType}, you will experience {place} and you will meet {range} aliens 👽. +

+
+
+ +
+
+

Made By Maja Zimnoch | Image by Freepik | Video by Mixkit +

+
+
+ + ); +}; + +export default Summary; \ No newline at end of file diff --git a/code/src/components/Survey.js b/code/src/components/Survey.js new file mode 100644 index 000000000..b29e46fc2 --- /dev/null +++ b/code/src/components/Survey.js @@ -0,0 +1,59 @@ +/* eslint-disable max-len */ +import React, { useState } from 'react'; +import Dates from './Dates'; +import Destination from './Destination'; +import Name from './Name'; +import Summary from './Summary'; +import WelcomePage from './WelcomePage'; +import Zipper from './Zipper'; + +const Survey = () => { + const [step, setStep] = useState(0); + const [name, setName] = useState(''); + const [monthType, setMonthType] = useState(''); + const [place, setPlace] = useState(''); + const [range, setRange] = useState(''); + + const onSubmit = (event) => { + event.preventDefault() + }; + + const onClickNext = () => { + setStep(step + 1); + if (step === 5) { + setStep(0) + } + } + + const onNameChange = (event) => { + setName(event.target.value); + }; + + const onMonthTypeChange = (event) => { + setMonthType(event.target.value); + }; + + const onPlaceChange = (event) => { + setPlace(event.target.value); + }; + + const onRangeChange = (event) => { + setRange(event.target.value); + } + + return ( +
+ {step === 0 && } + {step === 1 && ()} + {step === 2 && } + {step === 3 && } + {step === 4 && } + {step === 5 && } + + ) +} + +export default Survey; diff --git a/code/src/components/WelcomePage.js b/code/src/components/WelcomePage.js new file mode 100644 index 000000000..40d9d2c2c --- /dev/null +++ b/code/src/components/WelcomePage.js @@ -0,0 +1,18 @@ +/* eslint-disable max-len */ +import React from 'react'; +import Image from '../assets/astronaut.jpg' +import ButtonNext from './ButtonNext'; + +const WelcomePage = ({ onClickNext }) => { + return ( +
+

Welcome to the Astral Escapes!

+ Astronaut +

Astral Escapes is a space tourism company that offers once-in-a-lifetime trips to space for adventure seekers and space enthusiasts. Click below to book your trip! +

+ +
+ ) +} + +export default WelcomePage; \ No newline at end of file diff --git a/code/src/components/Zipper.js b/code/src/components/Zipper.js new file mode 100644 index 000000000..d88fe2508 --- /dev/null +++ b/code/src/components/Zipper.js @@ -0,0 +1,21 @@ +import React from 'react'; +import ButtonNext from './ButtonNext'; + +const Zipper = ({ range, onRangeChange, onClickNext }) => { + return ( +
+

+ How many aliens would you like to meet? +

+
+ +
+
+ +
+
+ + ); +}; + +export default Zipper; \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..e91e988f9 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -5,9 +5,173 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + color: aliceblue; + background-color: rgb(18, 18, 19); } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +#myVideo { + width: 100%; + height: 100%; + object-fit: cover; + z-index: -100; + position: fixed; + filter: opacity(96%); +} + +.header { + text-align: center; + padding: 30px 40px; + letter-spacing: 2px; + margin-bottom: 30px; +} + + +.header-copy { + font-family: 'Rubik Iso', cursive; + font-size: 3rem; +} + +.header-copy2 { + font-family: 'Rubik Iso', cursive; + font-size: 2rem; + color:rgb(58, 16, 248); +} + +.header-paragraph { + font-family: "Lucida Console", "Courier New", monospace; + letter-spacing: 2px; + text-align: center; + font-size: 1rem; + padding: 0 30px; +} + +.summary-paragraph { + font-family: "Lucida Console", "Courier New", monospace; + letter-spacing: 2px; + text-align: center; + font-size: 2rem; +} + +.footer-paragraph { + padding-top: 40px; + font-family: "Lucida Console", "Courier New", monospace; + letter-spacing: 2px; + text-align: center; + font-size: 1rem; +} + +.question-wrapper { + top: 250px; + padding: 5px 15px; + margin-top: 150px; + text-align: center; + +} + +.color1 { + animation-name: blink_text; + animation-duration: 2.5s; + animation-iteration-count: infinite; +} + +@keyframes blink_text { + 0% {color: rgb(116, 10, 158)} + 50% {color: rgb(58, 16, 248)} + 100% {color: rgb(116, 10, 158)} +} + +.color2 { + color: rgb(255, 255, 255); + background-color: rgb(116, 10, 158); + font-style: italic; +} + +.color3 { + color: rgb(255, 255, 255); + background-color: rgb(58, 16, 248); + font-style: italic; +} + +.size1 { + font-size: 1.5rem; + font-weight: bold; +} + +.icon { + object-fit: cover; + max-width: 50%; + padding-bottom: 40px; +} + +.button { + margin: 20px; +} + +.button-start { + font-family: 'Rubik Iso', cursive; + padding: 10px 20px; + margin-top: 50px; + font-size: 2rem; + background-color: transparent; + border: solid 2px rgb(255, 255, 255); + border-radius: 5%; + color: rgb(255, 255, 255); + transition: 1s ease; +} + +/* The hover effect for the button */ +.button-start:hover { + background-color: rgb(58, 16, 248); + -webkit-transform: rotateZ(-10deg); + -ms-transform: rotateZ(-10deg); + transform: rotateZ(-10deg); + transition: 1s ease; +} + +.content-container { + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + justify-content: center; + text-align: center; + padding-top: 30px; + padding-left: 20px; + padding-right: 20px; +} + + a { + color: rgb(58, 16, 248); + text-decoration: none; + } + a:link{ + color: rgb(58, 16, 248); + } + a:hover{ + color: rgb(116, 10, 158); + } + +@media (min-width: 667px) and (max-width: 1024px) { + + .question-wrapper { + margin-top: 250px; + } +} +@media (min-width: 1025px) { + + .question-wrapper { + padding: 50px 260px; + margin-top: 180px; + } + + .icon { + max-width: 28%; + padding-bottom: 40px; + + } +} \ No newline at end of file