Technigo · cecavi · Mar 18, 2023 · Mar 19, 2023 · Mar 19, 2023 · Mar 20, 2023
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # 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.
+So this is an unfinished project. I still need to style it and make it more accesible. i focused on getting the react code and components to work.
 
 ## 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?
 
 ## 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://willowy-paletas-c102cf.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,7 @@
       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>Adopt a dog survey</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -1,9 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Name } from './components/Name';
+import { Experience } from './components/Experience';
+import { Size } from './components/Size';
+import { Summary } from './components/Summary';
+import './index.css';
 
 export const App = () => {
+  const [step, setStep] = useState(1);
+  const [name, setName] = useState('');
+  const [experience, setExperience] = useState('');
+  const [size, setSize] = useState('');
+
+  function handleStepIncrease() {
+    setStep(step + 1);
+  }
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="content-container">
+      {step === 1 && (
+        <div className="name-container">
+          <Name name={name} setName={setName} />
+        </div>
+      )}
+      {step === 2 && (
+        <Experience experience={experience} setExperience={setExperience} />
+      )}
+      {step === 3 && (
+        <>
+          <Size size={size} setSize={setSize} />
+          <button type="button" onClick={handleStepIncrease}>Submit</button>
+        </>
+      )}
+      {step >= 4 && (
+        <Summary name={name} experience={experience} size={size} />
+      )}
+      {step < 3 && (
+        <button type="button" onClick={handleStepIncrease}>Next</button>
+      )}
     </div>
   );
 }
diff --git a/code/src/components/Experience.css b/code/src/components/Experience.css
@@ -0,0 +1,27 @@
+.dropdown {
+    display: flex;
+    margin-top: 5%;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: auto;
+}
+
+.dropdown form {
+    display: block;
+    background-color: antiquewhite;
+}
+
+.dropdown select {
+    border-top-style: hidden;
+    border-right-style: hidden;
+    border-left-style: hidden;
+    border-bottom-style: groove;
+    outline: none;
+    font-weight: 200;
+    font-size: 1.2em;
+    width: 100%;
+    padding: 0.5em 1em;
+    text-align: center;
+}
diff --git a/code/src/components/Experience.js b/code/src/components/Experience.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import './Experience.css';
+
+export const Experience = ({ experience, setExperience }) => {
+  const handleExpChange = (event) => {
+    setExperience(event.target.value);
+  };
+
+  return (
+    <div className="dropdown">
+      <span className="experience-title">Do you have previous dog owner experience?</span>
+      <form>
+        <select value={experience} onChange={handleExpChange}>
+          <option value="none" selected>Select an Option</option>
+          <option value="yes">Yes</option>
+          <option value="no">No</option>
+        </select>
+      </form>
+    </div>
+  );
+};
diff --git a/code/src/components/Name.css b/code/src/components/Name.css
@@ -0,0 +1,22 @@
+.name-text {
+    display: flex;
+    width:100%;
+    margin: 10% 5% 5% 5%;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+}
+
+#name {
+    border-top-style: hidden;
+    border-right-style: hidden;
+    border-left-style: hidden;
+    border-bottom-style: groove;
+    outline: none;
+    width: 100%;
+    height: auto;
+    font-weight: 200;
+    font-size: 1.2em;
+    text-align: center;
+}
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import './Name.css';
+
+export const Name = ({ name, setName }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  }
+  return (
+    <div className="name-text">
+      <h1>Welcome</h1>
+      <p>Please fill out this form to adopt a dog</p>
+      <input type="text" id="name" value={name} placeholder="What is your name?" onChange={handleNameChange} />
+    </div>
+  );
+}
diff --git a/code/src/components/Size.js b/code/src/components/Size.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const sizes = ['XS', 'S', 'M', 'L', 'XL']
+
+export const Size = ({ size, setSize }) => {
+  const handleSizeChange = (event) => {
+    setSize(event.target.value)
+  }
+  return (
+    <div className="size-container">
+      <p>What dog size would you prefer to adopt?</p>
+      <form>
+        {sizes.map((singleSize) => (
+          <label htmlFor="size" key={singleSize}>
+            <input type="radio" className="size-input" value={singleSize} checked={singleSize === size} onChange={handleSizeChange} />{singleSize}
+          </label>
+        ))}
+      </form>
+    </div>
+  );
+}
diff --git a/code/src/components/Summary.js b/code/src/components/Summary.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const Summary = ({ name, experience, size }) => {
+  return (
+    <div>
+      <p>Your name: {name}</p>
+      <p>Previous dog experience: {experience}</p>
+      <p>Prefered size to adopt: {size}</p>
+    </div>
+  )
+}
diff --git a/code/src/index.css b/code/src/index.css
@@ -5,9 +5,31 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: bisque;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-items: center;
+  margin: 5%;
+  overflow: hidden;
+  padding: 5%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+button {
+  border-radius: 20px;
+  background-color: bisque;
+  text-align: center;
+  padding: 1em;
+  margin: 20px;
+  border: none;
+  width: 100px;
+}