Technigo · majazimnoch · Mar 18, 2023 · Mar 19, 2023 · Mar 19, 2023 · Mar 19, 2023
diff --git 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
diff --git 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`.
     -->
-    <title>Technigo React App</title>
+    <title>🚀 Experience Space, Explore your Imagination 🖖</title>
+    <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=Rubik+Iso&display=swap" rel="stylesheet">
   </head>
 
   <body>

diff --git 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 (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
+    <section className="main-container">
+      <Background />
+      <Survey />
+    </section>
+  )
 }
+export default App;
diff --git a/code/src/assets/astronaut.jpg b/code/src/assets/astronaut.jpg
diff --git a/code/src/assets/rocket.gif b/code/src/assets/rocket.gif
diff --git a/code/src/assets/sky.mp4 b/code/src/assets/sky.mp4
diff --git a/code/src/assets/sky2.mp4 b/code/src/assets/sky2.mp4
diff --git a/code/src/components/Background.js 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 (
+    <div className="video-container">
+      <video src={Sky} autoPlay loop muted id="myVideo" />
+    </div>
+  )
+}
+
+export default Background;
diff --git a/code/src/components/ButtonNext.js b/code/src/components/ButtonNext.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ButtonNext = ({ button, onClickNext }) => {
+  return (
+    <div className="button-container">
+      <button className="button-start" type="submit" onClick={onClickNext}>{button}
+      </button>
+    </div>
+  );
+};
+
+export default ButtonNext;
diff --git a/code/src/components/Dates.js 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 (
+    <section className="content-container">
+      <h1 className="header-copy">
+        When do you wish to travel?
+      </h1>
+      <div className="month-container">
+        {monthTypes.map((type) => (
+          <label htmlFor={type} key={type}>
+            <input
+              id={type}
+              type="radio"
+              value={type}
+              onChange={onMonthTypeChange}
+              checked={monthType === type} />
+            {type}
+          </label>
+        ))}
+      </div>
+      <div className="button-container">
+        <ButtonNext button="Next" onClickNext={onClickNext} />
+      </div>
+    </section>
+  );
+};
+
+export default Dates;
diff --git a/code/src/components/Destination.js 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 (
+    <section className="content-container">
+      <h1 className="header-copy">
+        Which trip would you like to book?
+      </h1>
+      <div className="destination-container">
+        <select
+          onChange={onPlaceChange}
+          value={place}>
+          <option value="">Select Destination</option>
+          <option value="Dark Side of the Moon">Dark Side of the Moon 🌚</option>
+          <option value="Sunny Sun">Sunny Sun 🥵</option>
+          <option value="Around the Earth">Trip Around the Earth 🌎</option>
+          <option value="Saturn Ring Honeymoon ">Saturn Ring Honeymoon 🪐</option>
+        </select>
+      </div>
+      <div className="button-container">
+        <ButtonNext button="Next" onClickNext={onClickNext} />
+      </div>
+    </section>
+  )
+}
+
+export default Destination;
diff --git a/code/src/components/Name.js 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 (
+    <section className="content-container">
+      <div className="name-container">
+        <h1 className="header-copy">What&apos;s your name?</h1>
+        <input
+          type="text"
+          id="name-imput"
+          name="name-input"
+          className="name-imput"
+          value={name}
+          onChange={onNameChange}
+          maxLength={30}
+          required />
+      </div>
+      <div className="button-container">
+        <ButtonNext button="Next" onClickNext={onClickNext} />
+      </div>
+    </section>
+  );
+};
+export default Name;
diff --git a/code/src/components/Summary.js 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 (
+    <section className="content-container">
+      <div className="summary-container">
+        <h1 className="header-copy">
+        Houston, we had a problem.
+        </h1>
+        <h2 className="header-copy2">
+        But after 30h of practising React it got solved!
+        </h2>
+        <p className="summary-paragraph">
+            Thank you {name}!
+            You will travel in <span className="color2">{monthType}</span>, you will experience <span className="color3">{place}</span> and you will meet {range} aliens 👽.
+        </p>
+      </div>
+      <div className="button-container">
+        <ButtonNext button="Start again" onClickNext={onClickNext} />
+      </div>
+      <div>
+        <p className="footer-paragraph">Made By Maja Zimnoch | Image by <a href="https://www.freepik.com/free-photo/male-astronaut-exploring-night-during-space-mission-unknown-planet_21872923.htm" rel="noreferrer" target="_blank">Freepik</a> | Video by <a href="https://mixkit.co/free-stock-video/beautiful-glowing-nebula-in-space-31565/" rel="noreferrer" target="_blank">Mixkit</a>
+        </p>
+      </div>
+    </section>
+
+  );
+};
+
+export default Summary;
diff --git a/code/src/components/Survey.js 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 (
+    <form className="form" onSubmit={onSubmit}>
+      {step === 0 && <WelcomePage onClickNext={onClickNext} />}
+      {step === 1 && (<Name
+        name={name}
+        onNameChange={onNameChange}
+        onClickNext={onClickNext} />)}
+      {step === 2 && <Dates monthType={monthType} onMonthTypeChange={onMonthTypeChange} onClickNext={onClickNext} />}
+      {step === 3 && <Destination place={place} onPlaceChange={onPlaceChange} onClickNext={onClickNext} />}
+      {step === 4 && <Zipper range={range} onRangeChange={onRangeChange} onClickNext={onClickNext} />}
+      {step === 5 && <Summary name={name} monthType={monthType} place={place} range={range} onClickNext={onClickNext} />}
+    </form>
+  )
+}
+
+export default Survey;
diff --git a/code/src/components/WelcomePage.js 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 (
+    <div className="header">
+      <h1 className="header-copy">Welcome to the <span className="color1"> Astral Escapes!</span></h1>
+      <img className="icon" src={Image} alt="Astronaut" />
+      <p className="header-paragraph"><span className="size1">Astral Escapes</span> is a space tourism company that offers <span className="color2">once-in-a-lifetime</span> trips to space for <span className="color3">adventure seekers</span> and space enthusiasts. Click below to book your trip!
+      </p>
+      <ButtonNext button="Start" onClickNext={onClickNext} />
+    </div>
+  )
+}
+
+export default WelcomePage;
diff --git a/code/src/components/Zipper.js b/code/src/components/Zipper.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import ButtonNext from './ButtonNext';
+
+const Zipper = ({ range, onRangeChange, onClickNext }) => {
+  return (
+    <section className="content-container">
+      <h1 className="header-copy">
+        How many aliens would you like to meet?
+      </h1>
+      <div className="zipper-container">
+        <input type="range" min="1" max="5" value={range} onChange={onRangeChange} />
+      </div>
+      <div className="button-container">
+        <ButtonNext button="Next" onClickNext={onClickNext} />
+      </div>
+    </section>
+
+  );
+};
+
+export default Zipper;