Will you survive the zombie apocalypse?

README.md

@@ -1,13 +1,21 @@
-# Survey form with React
+# Project Survey
 
-Replace this readme with your own information about your project.
+## View it live
+https://zombie-survey.netlify.app/
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## Project Brief
+Practice React state and controlled forms by making a Typeform-like product. Your completed project should consist of at least 3 questions that need to be answered by users. When the user presses submit, they should see a summary of their answers.
 
-## The problem
+## Project requirements 
 
-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?
+- [x] Ideate, design and code your app.
+- [x] Connect HTML form inputs to state.
+- [x] Use form fields and `useState` hook in React
+- [x] Use state to show different components based on where you are in the survey
+- [x] There should be a submit button. When pressed your app should hide the input form and show a summary of the user's submissions.
+- [x]  Your site should follow accessibility guidelines
 
-## View it live
+## Installation
 
-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.
+    npm install
+    npm start 

code/src/App.js

@@ -1,9 +1,90 @@
-import React from 'react';
+/* eslint-disable max-len */
+import React, { useState } from 'react';
+import { Greeting } from 'components/Greeting';
+import { Human } from 'components/Human';
+import { Name } from 'components/Name';
+import { Continent } from 'components/Continent';
+import { BadNews } from 'components/BadNews';
+import { Fitness } from 'components/Fitness';
+import { Combat } from 'components/Combat';
+import { Body } from 'components/Body';
+import { Summary } from 'components/Summary';
+import { Footer } from 'components/footer/Footer';
+import { Weapon } from 'components/Weapon';
+import zombie from 'components/zombie.png';
 
 export const App = () => {
-  return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
-}
+  const stepsTotalCount = 9;
+  const [step, setStep] = useState(0);
+  const [human, setHuman] = useState(false);
+  const [name, setName] = useState('');
+  const [continent, setContinent] = useState('');
+  const [fitness, setFitness] = useState(0);
+  const [combat, setCombat] = useState('');
+  const [body, setBody] = useState('');
+  const [weapon, setWeapon] = useState('');
+  const handleStepIncrease = () => {
+    setStep(step + 1);
+  };
+  if (step < 4) {
+    return (
+      <>
+        <section className="contentBox">
+          <div className="questionBox">
+            {step === 0 && (<Greeting />)}
+            {step === 1 && (<Human human={human} setHuman={setHuman} />)}
+            {step === 2 && (<Name name={name} setName={setName} />)}
+            {step === 3 && (<Continent name={name} continent={continent} setContinent={setContinent} />)}
+          </div>
+          {step === 0 && (<button className="button" type="button" onClick={handleStepIncrease}> Start </button>)}
+          {step >= 1 && step <= 8 && (<button className="button" type="button" onClick={handleStepIncrease}> Next </button>)}
+        </section>
+        <div className="progressBox">
+          {step >= 1 && step < 9 && (
+            <p className="progress-meter">
+              <progress value={step} max={stepsTotalCount + 1}>
+                {step} of {stepsTotalCount}
+              </progress>
+              <span>
+                <br />
+                <b>{step}</b> / {stepsTotalCount}
+              </span>
+            </p>
+          )}
+        </div>
+        <Footer />
+      </>
+    );
+  } else {
+    return (
+      <>
+        <div className="contentBox" style={{ backgroundImage: `url(${zombie})` }}>
+          <div className="questionBox">
+            {step === 4 && (<BadNews name={name} continent={continent} />)}
+            {step === 5 && (<Fitness fitness={fitness} setFitness={setFitness} />)}
+            {step === 6 && (<Combat combat={combat} setCombat={setCombat} />)}
+            {step === 7 && (<Weapon weapon={weapon} setWeapon={setWeapon} />)}
+            {step === 8 && (<Body body={body} setBody={setBody} />)}
+            {step === 9 && (<Summary name={name} continent={continent} fitness={fitness} combat={combat} weapon={weapon} body={body} />)}
+          </div>
+          {step >= 1 && step <= 8 && (<button className="button" type="button" onClick={handleStepIncrease}> Next </button>)}
+          {step === 9 && (<button className="button" type="button" onClick={() => window.location.reload(false)}> Game Over </button>)}
+        </div>
+        <div className="progressBox">
+          {step >= 1 && step < 9 && (
+            <p className="progress-meter">
+              <progress value={step} max={stepsTotalCount + 1}>
+                {step} of {stepsTotalCount}
+              </progress>
+              <span>
+                <br />
+                <b>{step}</b> / {stepsTotalCount}
+              </span>
+            </p>
+          )}
+        </div>
+        <Footer />
+      </>
+    );
+  }
+}

code/src/components/BadNews.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const BadNews = ({ name, continent }) => {
+  return (
+    <section className="badNewsClass">
+      <h1> <em>Terrible</em> news <mark>{name}</mark> </h1>
+      <h1> A zombie <mark>apocalypse</mark>
+        <br />
+      is coming to <mark>{continent}</mark> in a month!
+      </h1>
+      <h1> Will <em>YOU</em> survive it? </h1>
+    </section>
+  );
+}
+

code/src/components/Body.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import heart from './heart.png'
+import brain from './brain.png'
+
+export const Body = ({ body, setBody }) => {
+  return (
+    <form onSubmit={(event) => event.preventDefault()}>
+      <section className="body">
+        <h1>Which one do you <em>think</em>
+          <br />
+          is your best <mark>body</mark> part?
+        </h1>
+        <div className="imageAndRadio">
+          <div className="imageOnlyRadio">
+            <img src={heart} alt="heartImg" />
+            <img src={brain} alt="brainFuImg" />
+          </div>
+          <div className="radioOnly">
+            <label htmlFor="Heart">
+              <input
+                type="radio"
+                id="Heart"
+                value="Heart"
+                onChange={(event) => setBody(event.target.value)}
+                checked={body === 'Heart'} />
+        Heart
+            </label>
+            <label htmlFor="Brain">
+              <input
+                type="radio"
+                id="Brain"
+                value="Brain"
+                onChange={(event) => setBody(event.target.value)}
+                checked={body === 'Brain'} />
+        Brain
+            </label>
+          </div>
+        </div>
+      </section>
+    </form>
+  );
+}

code/src/components/Combat.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import judo from 'components/judo.png'
+import KungFu from 'components/KungFu.png'
+
+export const Combat = ({ combat, setCombat }) => {
+  return (
+    <form>
+      <section className="combat">
+        <h1> Which one do <em>you</em> think
+          <br />
+          is the most effective style of <mark>combat</mark>?
+        </h1>
+        <div className="imageAndRadio">
+          <div className="imageOnlyRadio">
+            <img src={judo} alt="JudoImg" />
+            <img src={KungFu} alt="KungFuImg" />
+          </div>
+          <div className="radioOnly">
+            <label htmlFor="Judo">
+              <input
+                type="radio"
+                id="Judo"
+                value="Judo"
+                onChange={(event) => setCombat(event.target.value)}
+                checked={combat === 'Judo'} />
+        Judo
+            </label>
+            <label htmlFor="Kung-Fu">
+              <input
+                type="radio"
+                id="Kung-Fu"
+                value="Kung-Fu"
+                onChange={(event) => setCombat(event.target.value)}
+                checked={combat === 'Kung-Fu'} />
+        Kung-Fu
+            </label>
+          </div>
+        </div>
+      </section>
+    </form>
+  );
+}

code/src/components/Continent.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const Continent = ({ continent, setContinent, name }) => {
+  return (
+    <form className="selectContainer" onSubmit={(event) => event.preventDefault()}>
+      <section>
+        <h1> Where are you <mark>{name}</mark>? </h1>
+        <select
+          className="select"
+          onChange={(event) => setContinent(event.target.value)}
+          value={continent}>
+          <option value="">Select continent</option>
+          <option value="Europe">Europe</option>
+          <option value="Australia">Australia</option>
+          <option value="Asia">Asia</option>
+          <option value="Africa">Africa</option>
+          <option value="North America">North America</option>
+          <option value="South America">South America</option>
+          <option value="Antarctica">Antarctica</option>
+        </select>
+      </section>
+    </form>
+  );
+}

code/src/components/Fitness.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const Fitness = ({ fitness, setFitness }) => {
+  return (
+    <form
+      className="fitness"
+      onSubmit={(event) => event.preventDefault()}>
+      <section>
+        <h1>What is <em>your</em> level of physical <mark>fitness</mark>?</h1>
+        <section className="sliderSection">
+          <input
+            type="range"
+            className="slider"
+            min="1"
+            max="10"
+            value={fitness}
+            id="fitness"
+            onChange={(event) => setFitness(event.target.value)} />
+        </section>
+      </section>
+    </form>
+  );
+}

code/src/components/Greeting.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Greeting = () => {
+  return (
+    <form>
+      <section className="greeting">
+        <h1> Hello! 👋</h1>
+        <h1>The sun is <mark> shining</mark> today, but what about <em>tomorrow?</em> </h1>
+      </section>
+    </form>
+  );
+}

code/src/components/Human.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Human = (human, setHuman) => {
+  return (
+    <form>
+      <section className="human">
+        <h1><em>Question</em> is: </h1>
+        <label htmlFor="checkboxHuman">
+          Are you <mark>human?</mark>
+          <input
+            id="checkboxHuman"
+            type="checkbox"
+            /* checked={human} */
+            onChange={(event) => setHuman(event.target.checked)} />
+        </label>
+      </section>
+    </form>
+  );
+}