diff --git a/README.md b/README.md index 50e5933d0..ff1e840ed 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ # 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 @@ -10,4 +8,4 @@ Describe how you approached to problem, and what tools and techniques you used t ## 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 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..02af3fa42 100644 --- 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`. --> - Technigo React App + Adopt a dog survey diff --git a/code/src/App.js b/code/src/App.js index f2007d229..6d15da4c2 100644 --- 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 ( -
- Find me in src/app.js! +
+ {step === 1 && ( +
+ +
+ )} + {step === 2 && ( + + )} + {step === 3 && ( + <> + + + + )} + {step >= 4 && ( + + )} + {step < 3 && ( + + )}
); } diff --git a/code/src/components/Experience.css b/code/src/components/Experience.css new file mode 100644 index 000000000..ec53874ab --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/code/src/components/Experience.js b/code/src/components/Experience.js new file mode 100644 index 000000000..7ae2536d1 --- /dev/null +++ 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 ( +
+ Do you have previous dog owner experience? +
+ +
+
+ ); +}; diff --git a/code/src/components/Name.css b/code/src/components/Name.css new file mode 100644 index 000000000..21cca64a3 --- /dev/null +++ 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; +} \ 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..8da546729 --- /dev/null +++ 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 ( +
+

Welcome

+

Please fill out this form to adopt a dog

+ +
+ ); +} diff --git a/code/src/components/Size.js b/code/src/components/Size.js new file mode 100644 index 000000000..9ea19d3f8 --- /dev/null +++ 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 ( +
+

What dog size would you prefer to adopt?

+
+ {sizes.map((singleSize) => ( + + ))} +
+
+ ); +} diff --git a/code/src/components/Summary.js b/code/src/components/Summary.js new file mode 100644 index 000000000..b626953af --- /dev/null +++ b/code/src/components/Summary.js @@ -0,0 +1,11 @@ +import React from 'react' + +export const Summary = ({ name, experience, size }) => { + return ( +
+

Your name: {name}

+

Previous dog experience: {experience}

+

Prefered size to adopt: {size}

+
+ ) +} diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..e7194ae44 100644 --- 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; +} \ No newline at end of file