From dc16c8415979cd910f51648473540fe4bed7ec96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Tue, 14 Mar 2023 12:53:40 +0100 Subject: [PATCH 01/17] starter code --- code/package-lock.json | 49 ---------------------------------- code/src/App.js | 43 ++++++++++++++++++++++++++--- code/src/components/Color.js | 21 +++++++++++++++ code/src/components/Name.js | 15 +++++++++++ code/src/components/Prefer.js | 17 ++++++++++++ code/src/components/Results.js | 17 ++++++++++++ code/src/components/Thing.js | 17 ++++++++++++ 7 files changed, 126 insertions(+), 53 deletions(-) create mode 100644 code/src/components/Color.js create mode 100644 code/src/components/Name.js create mode 100644 code/src/components/Prefer.js create mode 100644 code/src/components/Results.js create mode 100644 code/src/components/Thing.js 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/src/App.js b/code/src/App.js index f2007d229..9f4267afa 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,44 @@ -import React from 'react'; +import React, { useState } from 'react' +import { Name } from './components/Name' +import { Prefer } from './components/Prefer' +import { Results } from './components/Results' +import { Color } from './components/Color' +import { Thing } from './components/Thing' export const App = () => { + const [counter, setCounter] = useState(0); + const [name, setName] = useState('') + const [prefer, setPrefer] = useState('') + const [color, setColor] = useState('') + const [thing, setThing] = useState('') + const [results, setResults] = useState('') + const handleNextStep = () => { + console.log('counter before', counter); + setCounter(counter + 1); + console.log('after', counter) + } + return ( -
- Find me in src/app.js! -
+ <> + {counter === 1 && ( + + )} + {counter === 2 && ( + + )} + {counter === 3 && ( + + )} + {counter === 4 && ( + + )} + {counter === 5 && ( + + )} + + + ); } +// start button hur ska jag sätta button nr 2 vart? +// förklara counter+1 och vad det gjorde \ No newline at end of file diff --git a/code/src/components/Color.js b/code/src/components/Color.js new file mode 100644 index 000000000..444efecc9 --- /dev/null +++ b/code/src/components/Color.js @@ -0,0 +1,21 @@ +import React from 'react' + +export const Color = ({ color, setColor }) => { + const handleColorChange = (event) => { + setColor(event.target.value); + } + return ( +
+ +
+

What´s your favourite color?

+ + + + + + +
+
+ ) +} \ 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..c5b439a27 --- /dev/null +++ b/code/src/components/Name.js @@ -0,0 +1,15 @@ +import React from 'react' + +export const Name = ({ name, setName }) => { + const handleNameChange = (event) => { + setName(event.target.value); + } + return ( +
+

Hello what´s your name?

+ + + +
+ ) +} \ No newline at end of file diff --git a/code/src/components/Prefer.js b/code/src/components/Prefer.js new file mode 100644 index 000000000..a4b21fdab --- /dev/null +++ b/code/src/components/Prefer.js @@ -0,0 +1,17 @@ +import React from 'react' + +export const Prefer = ({ prefer, setPrefer }) => { + const handleNameChange = (event) => { + setPrefer(event.target.value); + } + return ( +
+
+

Hello what´s your name?

+ + + +
+
+ ) +} \ No newline at end of file diff --git a/code/src/components/Results.js b/code/src/components/Results.js new file mode 100644 index 000000000..1644094aa --- /dev/null +++ b/code/src/components/Results.js @@ -0,0 +1,17 @@ +import React from 'react' + +export const Results = ({ results, setResult }) => { + const handleNameChange = (event) => { + setResult(event.target.value); + } + return ( +
+
+

Hello what´s your name?

+ + + +
+
+ ) +} \ No newline at end of file diff --git a/code/src/components/Thing.js b/code/src/components/Thing.js new file mode 100644 index 000000000..1567b4404 --- /dev/null +++ b/code/src/components/Thing.js @@ -0,0 +1,17 @@ +import React from 'react' + +export const Thing = ({ thing, setThing }) => { + const handleNameChange = (event) => { + setThing(event.target.value); + } + return ( +
+
+

Hello what´s your name?

+ + + +
+
+ ) +} \ No newline at end of file From a2980d5b2d7ffe4414053c62b6382635bb592bc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Tue, 14 Mar 2023 14:31:25 +0100 Subject: [PATCH 02/17] front page --- code/src/App.js | 20 ++++++----- code/src/index.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 9 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 9f4267afa..cdedb8ba9 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,10 @@ -import React, { useState } from 'react' -import { Name } from './components/Name' -import { Prefer } from './components/Prefer' -import { Results } from './components/Results' -import { Color } from './components/Color' -import { Thing } from './components/Thing' +import React, { useState } from 'react'; +import { Name } from './components/Name'; +import { Prefer } from './components/Prefer'; +import { Results } from './components/Results'; +import { Color } from './components/Color'; +import { Thing } from './components/Thing'; +import './index.css'; export const App = () => { const [counter, setCounter] = useState(0); @@ -19,7 +20,8 @@ export const App = () => { } return ( - <> +
+

Answer these questions and we will tell you your favourite animal

{counter === 1 && ( )} @@ -35,8 +37,8 @@ export const App = () => { {counter === 5 && ( )} - - + +
); } diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..9980a1176 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -11,3 +11,91 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +*{ + box-sizing: border-box; +} +body{ + margin: 0; + overflow-x: hidden; +} +/**/ +.StartPage{ + display: grid; + grid-template-columns: 1fr; + border: 2px solid green; + margin: 20px; + +} + + + +/*input*/ +.inputName{ + border: pink solid 2px; + margin: 20px; + padding: 5px; +} + +/*favourite color*/ +.favouriteColor{ + border: black solid 2px; + margin: 20px; + background-color: antiquewhite; + +} +.pink{ + background-color: pink; + border: rgb(237, 77, 104) solid 2px; + width: 100px; + height: 100px; + +} +.green{ + background-color: green; + border: rgb(200, 253, 200) solid 2px; + width: 100px; + height: 100px; + padding-left: 5px; + +} +.black{ +background-color: black; +border: white solid 2px; +width: 100px; +height: 100px; +padding: 5px;} + +.brown{ + background-color: rgb(154, 80, 80); +border: white solid 2px; +width: 100px; +height: 100px; +padding: 5px;} + + +/*whats your thing?*/ +.radioButton{ + border: green solid 2px; + margin: 20px; + background-color: lightsalmon; + +} + + +/*What do you prefer*/ +.dropDown{ + border: blue solid 2px; + margin: 20px; + + +} + + +/*results*/ +.results{ + border: red solid 2px; + margin: 20px; + +} + From ed5d754006d63d84a2b8a9389d955d9c2c3bf6fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Tue, 14 Mar 2023 15:20:23 +0100 Subject: [PATCH 03/17] started with result page --- code/src/components/Prefer.js | 16 ++++++--- code/src/components/Results.js | 7 ++-- code/src/components/Thing.js | 59 ++++++++++++++++++++++++++++------ 3 files changed, 62 insertions(+), 20 deletions(-) diff --git a/code/src/components/Prefer.js b/code/src/components/Prefer.js index a4b21fdab..eb16739c0 100644 --- a/code/src/components/Prefer.js +++ b/code/src/components/Prefer.js @@ -1,16 +1,22 @@ import React from 'react' export const Prefer = ({ prefer, setPrefer }) => { - const handleNameChange = (event) => { + const handlePreferChange = (event) => { setPrefer(event.target.value); } return (
-
-

Hello what´s your name?

- - +
+

What do you prefer

+
) diff --git a/code/src/components/Results.js b/code/src/components/Results.js index 1644094aa..cb6c3c865 100644 --- a/code/src/components/Results.js +++ b/code/src/components/Results.js @@ -1,13 +1,10 @@ import React from 'react' -export const Results = ({ results, setResult }) => { - const handleNameChange = (event) => { - setResult(event.target.value); - } +export const Results = ({ name, results, setResult }) => { return (
-

Hello what´s your name?

+

{name} your favourite animal is {result}

diff --git a/code/src/components/Thing.js b/code/src/components/Thing.js index 1567b4404..b134fa29f 100644 --- a/code/src/components/Thing.js +++ b/code/src/components/Thing.js @@ -1,17 +1,56 @@ -import React from 'react' +import React from 'react'; export const Thing = ({ thing, setThing }) => { - const handleNameChange = (event) => { + const handleThingChange = (event) => { setThing(event.target.value); } return ( -
-
-

Hello what´s your name?

- - +
+

What´s your thing?

-
+
+ + + + + +
- ) -} \ No newline at end of file + ); +}; From cd88f1bda0578b1287b8a84096b02b9727afc81b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Wed, 15 Mar 2023 08:00:48 +0100 Subject: [PATCH 04/17] buttons not working in none of the pages --- code/src/App.js | 31 ++++++++++++++++++++++++++----- code/src/components/Color.js | 27 ++++++++++++++++++--------- code/src/components/Name.js | 12 +++++------- code/src/components/Results.js | 6 ++---- code/src/index.css | 17 +++++++++++++---- package-lock.json | 6 ++++++ 6 files changed, 70 insertions(+), 29 deletions(-) create mode 100644 package-lock.json diff --git a/code/src/App.js b/code/src/App.js index cdedb8ba9..d00823b05 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -21,7 +21,13 @@ export const App = () => { return (
-

Answer these questions and we will tell you your favourite animal

+ {counter === 0 && ( + <> +

Answer these questions and we will tell you your favourite animal

+ + + )} + {counter === 1 && ( )} @@ -34,13 +40,28 @@ export const App = () => { {counter === 4 && ( )} - {counter === 5 && ( + {counter >= 5 && ( + + )} + {counter < 5 && ( + <> +

tjudiluu

+ + )} - -
+
); } // start button hur ska jag sätta button nr 2 vart? -// förklara counter+1 och vad det gjorde \ No newline at end of file +// what should i put in result to show my results +// where should I put my if statement + +/* {counter < 5 && ( + <> +

tjudiluu

+ + + )} */ \ No newline at end of file diff --git a/code/src/components/Color.js b/code/src/components/Color.js index 444efecc9..34efb9cea 100644 --- a/code/src/components/Color.js +++ b/code/src/components/Color.js @@ -8,14 +8,23 @@ export const Color = ({ color, setColor }) => {
-

What´s your favourite color?

- - - - - - +

What´s your favourite color ?

+
+ + + + +
- ) -} \ No newline at end of file + ); +} + +// what should I have as a value to get the if statements right? +/* + + + */ \ No newline at end of file diff --git a/code/src/components/Name.js b/code/src/components/Name.js index c5b439a27..07046e496 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -1,15 +1,13 @@ -import React from 'react' +import React from 'react'; export const Name = ({ name, setName }) => { const handleNameChange = (event) => { setName(event.target.value); } return ( -
-

Hello what´s your name?

+
+

What is your name?

- - -
- ) + + ); } \ No newline at end of file diff --git a/code/src/components/Results.js b/code/src/components/Results.js index cb6c3c865..0e14a6028 100644 --- a/code/src/components/Results.js +++ b/code/src/components/Results.js @@ -1,12 +1,10 @@ import React from 'react' -export const Results = ({ name, results, setResult }) => { +export const Results = ({ name, results }) => { return (
-

{name} your favourite animal is {result}

- - +

{name} your favourite animal is {results}

diff --git a/code/src/index.css b/code/src/index.css index 9980a1176..68a25e8bd 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -39,24 +39,29 @@ body{ /*favourite color*/ .favouriteColor{ + display: grid; + grid-template-columns: 1fr 1fr; border: black solid 2px; margin: 20px; background-color: antiquewhite; + } .pink{ + grid-column: 1/3; background-color: pink; border: rgb(237, 77, 104) solid 2px; width: 100px; height: 100px; - -} + margin: 10px; + } .green{ background-color: green; border: rgb(200, 253, 200) solid 2px; width: 100px; height: 100px; padding-left: 5px; + margin: 10px; } .black{ @@ -64,14 +69,18 @@ background-color: black; border: white solid 2px; width: 100px; height: 100px; -padding: 5px;} +padding: 5px; +margin: 10px; +} .brown{ background-color: rgb(154, 80, 80); border: white solid 2px; width: 100px; height: 100px; -padding: 5px;} +padding: 5px; +margin: 10px; +} /*whats your thing?*/ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..4a12561e3 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "project-survey", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From 60e8312862100c9f5d7a063f986bc46e80e34533 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Wed, 15 Mar 2023 08:49:38 +0100 Subject: [PATCH 05/17] css --- code/src/App.js | 11 ++--------- code/src/components/Color.js | 29 +++++++++++++++++++++-------- code/src/index.css | 30 +++++++++++++++++++++++------- 3 files changed, 46 insertions(+), 24 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index d00823b05..5fe2ee8a0 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -46,7 +46,7 @@ export const App = () => { )} {counter < 5 && ( <> -

tjudiluu

+

tjudiluu behöver fixa denna så den inte finns hela tiden

)} @@ -57,11 +57,4 @@ export const App = () => { // start button hur ska jag sätta button nr 2 vart? // what should i put in result to show my results // where should I put my if statement - -/* {counter < 5 && ( - <> -

tjudiluu

- - - )} */ \ No newline at end of file +// how do I make next question just show from name... diff --git a/code/src/components/Color.js b/code/src/components/Color.js index 34efb9cea..871d5d58a 100644 --- a/code/src/components/Color.js +++ b/code/src/components/Color.js @@ -5,16 +5,29 @@ export const Color = ({ color, setColor }) => { setColor(event.target.value); } return ( -
+
+

What´s your favourite color ?

-

What´s your favourite color ?

-
- - - - -
+ + + +
); diff --git a/code/src/index.css b/code/src/index.css index 68a25e8bd..5380e7867 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -23,11 +23,22 @@ body{ .StartPage{ display: grid; grid-template-columns: 1fr; + justify-items: center; border: 2px solid green; margin: 20px; } +.startBtn{ + width: 100px; + margin: 20px; +} + +.nextQuestion{ + width: 100px; + margin: 20px; +} + /*input*/ @@ -38,30 +49,35 @@ body{ } /*favourite color*/ +.color h2{ +color: blue; +} + .favouriteColor{ display: grid; grid-template-columns: 1fr 1fr; - border: black solid 2px; + justify-items: center; margin: 20px; - background-color: antiquewhite; - } + .pink{ - grid-column: 1/3; - background-color: pink; - border: rgb(237, 77, 104) solid 2px; + + background-color: #FF007F; width: 100px; height: 100px; margin: 10px; + grid-column: 1/2; + } .green{ - background-color: green; + background-color: #00755E; border: rgb(200, 253, 200) solid 2px; width: 100px; height: 100px; padding-left: 5px; margin: 10px; + grid-column: 2/3; } .black{ From ac0e9a3188f045ba689203d874f6d99183fae3e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Wed, 15 Mar 2023 09:12:47 +0100 Subject: [PATCH 06/17] changed in radio buttons --- code/src/components/Thing.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/code/src/components/Thing.js b/code/src/components/Thing.js index b134fa29f..5d99cd660 100644 --- a/code/src/components/Thing.js +++ b/code/src/components/Thing.js @@ -1,9 +1,11 @@ import React from 'react'; export const Thing = ({ thing, setThing }) => { - const handleThingChange = (event) => { + /* const handleThingChange = (event) => { setThing(event.target.value); - } + console.log('value is:', event.target.value); + } */ + return (

What´s your thing?

@@ -12,11 +14,10 @@ export const Thing = ({ thing, setThing }) => { @@ -35,7 +36,7 @@ export const Thing = ({ thing, setThing }) => { id="sand" value="Sand" className="sand" - onChange={handleThingChange} + onChange={(event) => { setThing(event.target.value); }} checked={thing === 'Sand'} /> Sand @@ -46,7 +47,7 @@ export const Thing = ({ thing, setThing }) => { id="city" value="City" className="city" - onChange={handleThingChange} + onChange={(event) => { setThing(event.target.value); }} checked={thing === 'City'} /> City From bac98eea00a971991e1d346b84dbe64e5d712c54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Wed, 15 Mar 2023 13:38:48 +0100 Subject: [PATCH 07/17] fixed name, prefer, color --- code/src/App.js | 36 +++++++++++++++++++++++------------ code/src/components/Color.js | 25 ++++++++++++------------ code/src/components/Name.js | 12 ++++++++++-- code/src/components/Prefer.js | 5 ++++- code/src/components/Thing.js | 24 ++++++++++++++--------- code/src/index.css | 5 ++++- 6 files changed, 70 insertions(+), 37 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 5fe2ee8a0..7f061fbea 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ import React, { useState } from 'react'; import { Name } from './components/Name'; import { Prefer } from './components/Prefer'; @@ -13,42 +14,51 @@ export const App = () => { const [color, setColor] = useState('') const [thing, setThing] = useState('') const [results, setResults] = useState('') + const [started, setStarted] = useState(false); + const handleNextStep = () => { console.log('counter before', counter); setCounter(counter + 1); console.log('after', counter) } + const handleStartQuiz = () => { + setStarted(true); + handleNextStep(); + }; return (
- {counter === 0 && ( + {!started && ( <>

Answer these questions and we will tell you your favourite animal

- + )} {counter === 1 && ( - + )} {counter === 2 && ( - + )} {counter === 3 && ( - + )} {counter === 4 && ( - + )} {counter >= 5 && ( - + )} - {counter < 5 && ( - <> -

tjudiluu behöver fixa denna så den inte finns hela tiden

- - + {setStarted && counter < 5 && ( + )}
@@ -58,3 +68,5 @@ export const App = () => { // what should i put in result to show my results // where should I put my if statement // how do I make next question just show from name... +// what is exactly happening in line 30 & 55 + diff --git a/code/src/components/Color.js b/code/src/components/Color.js index 871d5d58a..d746b7526 100644 --- a/code/src/components/Color.js +++ b/code/src/components/Color.js @@ -1,32 +1,40 @@ import React from 'react' -export const Color = ({ color, setColor }) => { +export const Color = ({ color, setColor, counterFromApp, setCounter }) => { const handleColorChange = (event) => { setColor(event.target.value); + setCounter(counterFromApp + 1); + console.log('Color picked: ', event.target.value); } + console.log(color) return (

What´s your favourite color ?

- +
@@ -34,10 +42,3 @@ export const Color = ({ color, setColor }) => { } // what should I have as a value to get the if statements right? -/* - - - */ \ No newline at end of file diff --git a/code/src/components/Name.js b/code/src/components/Name.js index 07046e496..4fc4818e4 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -1,13 +1,21 @@ import React from 'react'; -export const Name = ({ name, setName }) => { +export const Name = ({ setName }) => { const handleNameChange = (event) => { setName(event.target.value); + console.log('Name:', event.target.value); } + const handleKeyPress = (event) => { + if (event.key === 'Enter') { + setName(event.target.value); + console.log('Name:', event.target.value); + } + } + return (

What is your name?

- +
); } \ No newline at end of file diff --git a/code/src/components/Prefer.js b/code/src/components/Prefer.js index eb16739c0..b50e25ba9 100644 --- a/code/src/components/Prefer.js +++ b/code/src/components/Prefer.js @@ -1,9 +1,12 @@ import React from 'react' -export const Prefer = ({ prefer, setPrefer }) => { +export const Prefer = ({ prefer, setPrefer, counterFromApp, setCounter }) => { const handlePreferChange = (event) => { setPrefer(event.target.value); + setCounter(counterFromApp + 1); + console.log('prefer: ', event.target.value); } + return (
diff --git a/code/src/components/Thing.js b/code/src/components/Thing.js index 5d99cd660..6abd4812c 100644 --- a/code/src/components/Thing.js +++ b/code/src/components/Thing.js @@ -1,14 +1,15 @@ import React from 'react'; -export const Thing = ({ thing, setThing }) => { - /* const handleThingChange = (event) => { +export const Thing = ({ thing, setThing, counterFromApp, setCounter }) => { + const handleThingChange = (event) => { setThing(event.target.value); - console.log('value is:', event.target.value); - } */ + setCounter(counterFromApp + 1); + console.log('thing picked: ', event.target.value); + } return (
-

What´s your thing?

+

What do you prefer?

@@ -26,7 +27,7 @@ export const Thing = ({ thing, setThing }) => { id="mountain" value="Mountain" className="mountain" - onChange={(event) => { setThing(event.target.value); }} + onChange={handleThingChange} checked={thing === 'Mountain'} /> Mountain @@ -36,7 +37,7 @@ export const Thing = ({ thing, setThing }) => { id="sand" value="Sand" className="sand" - onChange={(event) => { setThing(event.target.value); }} + onChange={handleThingChange} checked={thing === 'Sand'} /> Sand @@ -47,7 +48,7 @@ export const Thing = ({ thing, setThing }) => { id="city" value="City" className="city" - onChange={(event) => { setThing(event.target.value); }} + onChange={handleThingChange} checked={thing === 'City'} /> City @@ -55,3 +56,8 @@ export const Thing = ({ thing, setThing }) => {
); }; + +/* const handleThingChange = (event) => { + setThing(event.target.value); + console.log('value is:', event.target.value); + } */ diff --git a/code/src/index.css b/code/src/index.css index 5380e7867..e81c19ab3 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -28,7 +28,10 @@ body{ margin: 20px; } - +.StartPage h1{ + padding-left: 30px; + padding-right: 10px; +} .startBtn{ width: 100px; margin: 20px; From f6ba655903794a9542434565d749eb5feb12436c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Wed, 15 Mar 2023 16:07:20 +0100 Subject: [PATCH 08/17] new stuff --- code/src/App.js | 85 +++++++++++++++++++++++++++------- code/src/components/Name.js | 19 ++++---- code/src/components/Prefer.js | 8 ++-- code/src/components/Results.js | 5 +- code/src/components/Thing.js | 10 ++-- 5 files changed, 87 insertions(+), 40 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 7f061fbea..bea58e18a 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -5,21 +5,62 @@ import { Prefer } from './components/Prefer'; import { Results } from './components/Results'; import { Color } from './components/Color'; import { Thing } from './components/Thing'; +// import { handleQuizResult } from './components/quiz' import './index.css'; export const App = () => { const [counter, setCounter] = useState(0); const [name, setName] = useState('') - const [prefer, setPrefer] = useState('') + const [prefers, setPrefers] = useState('') const [color, setColor] = useState('') - const [thing, setThing] = useState('') - const [results, setResults] = useState('') + const [things, setThing] = useState('') + const [results] = useState('') const [started, setStarted] = useState(false); + const calculateResult = ({ prefer, thing, colors }) => { + let result; + if (prefer === 'surf' && thing === 'ocean' && colors === 'black') { + result = 'shark'; + } else if ((prefer === 'surf' && thing === 'sand' && colors === 'black') + || (prefer === 'surf' && thing === 'mountain' && colors === 'black')) { + result = 'dog+surf'; + } else if (prefer === 'surf' && thing === 'city' && colors === 'black') { + result = 'seagull'; + } else if (colors === 'green' && prefer === 'surf' && thing === 'ocean') { + result = 'turtle'; + } else if (colors === 'green' && prefer === 'surf' && thing === 'sand') { + result = 'turtle'; + } else if (colors === 'green' && prefer === 'surf' && thing === 'mountain') { + result = 'parrot'; + } else if (colors === 'green' && prefer === 'surf' && thing === 'city') { + result = 'turtle on a walk'; + } else if (colors === 'pink' && prefer === 'surf' && thing === 'ocean') { + result = 'jellyFish'; + } else if (colors === 'pink' && prefer === 'surf' && thing === 'sand') { + result = 'Pink sand crabs'; + } else if (colors === 'pink' && prefer === 'surf' && thing === 'mountain') { + result = 'jelly fish'; + } else if (colors === 'brown' && prefer === 'surf' && thing === 'city') { + result = 'jelly fish'; + } else if (colors === 'brown' && prefer === 'surf' && thing === 'ocean') { + result = 'dog +picture of dog that surfs'; + } else if (colors === 'brown' && prefer === 'surf' && thing === 'sand') { + result = 'Dog'; + } else { + result = 'unknown'; + } + + return result; + } + const handleNextStep = () => { console.log('counter before', counter); setCounter(counter + 1); console.log('after', counter) + if (counter === 4) { + const result = calculateResult({ prefer: prefers, thing: things, colors: color }); + setResults(result); + } } const handleStartQuiz = () => { setStarted(true); @@ -38,29 +79,35 @@ export const App = () => { )} {counter === 1 && ( - - )} +
+ + +
)} + {counter === 2 && ( - + )} {counter === 3 && ( )} {counter === 4 && ( - + )} {counter >= 5 && ( - - - )} - {setStarted && counter < 5 && ( - - )} + )} + {(counter === 1 && !name) + || (counter === 2 && !prefers) + || (counter === 3 && !color) + || (counter === 4 && !things) ? ( +

Please answer the current question before proceeding.

+ ) : ( + started && counter < 5 && ( + + ) + )}
); } @@ -69,4 +116,8 @@ export const App = () => { // where should I put my if statement // how do I make next question just show from name... // what is exactly happening in line 30 & 55 +/* {started && counter < 5 && ( + */ diff --git a/code/src/components/Name.js b/code/src/components/Name.js index 4fc4818e4..47c196459 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -1,21 +1,18 @@ import React from 'react'; -export const Name = ({ setName }) => { +export const Name = ({ name, setName, counter }) => { const handleNameChange = (event) => { setName(event.target.value); + console.log('Name:', event.target.value); } - const handleKeyPress = (event) => { - if (event.key === 'Enter') { - setName(event.target.value); - console.log('Name:', event.target.value); - } - } return ( -
-

What is your name?

- -
+ +
+

What is your name?

+ +
+ ); } \ No newline at end of file diff --git a/code/src/components/Prefer.js b/code/src/components/Prefer.js index b50e25ba9..2768e4a1c 100644 --- a/code/src/components/Prefer.js +++ b/code/src/components/Prefer.js @@ -1,8 +1,8 @@ import React from 'react' -export const Prefer = ({ prefer, setPrefer, counterFromApp, setCounter }) => { +export const Prefer = ({ prefers, setPrefers, counterFromApp, setCounter }) => { const handlePreferChange = (event) => { - setPrefer(event.target.value); + setPrefers(event.target.value); setCounter(counterFromApp + 1); console.log('prefer: ', event.target.value); } @@ -12,9 +12,9 @@ export const Prefer = ({ prefer, setPrefer, counterFromApp, setCounter }) => {

What do you prefer

- - + diff --git a/code/src/components/Results.js b/code/src/components/Results.js index 0e14a6028..41c9e649b 100644 --- a/code/src/components/Results.js +++ b/code/src/components/Results.js @@ -1,11 +1,10 @@ import React from 'react' -export const Results = ({ name, results }) => { +export const Results = ({ name, result, setResults }) => { return (
-

{name} your favourite animal is {results}

- +

{name}, your favourite animal is {result}

) diff --git a/code/src/components/Thing.js b/code/src/components/Thing.js index 6abd4812c..0a9864268 100644 --- a/code/src/components/Thing.js +++ b/code/src/components/Thing.js @@ -1,6 +1,6 @@ import React from 'react'; -export const Thing = ({ thing, setThing, counterFromApp, setCounter }) => { +export const Thing = ({ things, setThing, counterFromApp, setCounter }) => { const handleThingChange = (event) => { setThing(event.target.value); setCounter(counterFromApp + 1); @@ -18,7 +18,7 @@ export const Thing = ({ thing, setThing, counterFromApp, setCounter }) => { value="ocean" className="ocean" onChange={handleThingChange} - checked={thing === 'ocean'} /> + checked={things === 'ocean'} /> Ocean @@ -49,7 +49,7 @@ export const Thing = ({ thing, setThing, counterFromApp, setCounter }) => { value="City" className="city" onChange={handleThingChange} - checked={thing === 'City'} /> + checked={things === 'City'} /> City From 9caf8e734a4849a1d4c983dc767b451386dfcb08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Thu, 16 Mar 2023 10:59:27 +0100 Subject: [PATCH 09/17] save latest --- code/src/App.js | 59 +++------------ code/src/components/Color.js | 26 +++++-- code/src/components/Name.js | 6 +- code/src/components/Prefer.js | 8 +- code/src/components/QuizResult.js | 119 ++++++++++++++++++++++++++++++ code/src/components/Results.js | 10 ++- 6 files changed, 160 insertions(+), 68 deletions(-) create mode 100644 code/src/components/QuizResult.js diff --git a/code/src/App.js b/code/src/App.js index bea58e18a..1b4939cf8 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -5,7 +5,6 @@ import { Prefer } from './components/Prefer'; import { Results } from './components/Results'; import { Color } from './components/Color'; import { Thing } from './components/Thing'; -// import { handleQuizResult } from './components/quiz' import './index.css'; export const App = () => { @@ -17,50 +16,10 @@ export const App = () => { const [results] = useState('') const [started, setStarted] = useState(false); - const calculateResult = ({ prefer, thing, colors }) => { - let result; - if (prefer === 'surf' && thing === 'ocean' && colors === 'black') { - result = 'shark'; - } else if ((prefer === 'surf' && thing === 'sand' && colors === 'black') - || (prefer === 'surf' && thing === 'mountain' && colors === 'black')) { - result = 'dog+surf'; - } else if (prefer === 'surf' && thing === 'city' && colors === 'black') { - result = 'seagull'; - } else if (colors === 'green' && prefer === 'surf' && thing === 'ocean') { - result = 'turtle'; - } else if (colors === 'green' && prefer === 'surf' && thing === 'sand') { - result = 'turtle'; - } else if (colors === 'green' && prefer === 'surf' && thing === 'mountain') { - result = 'parrot'; - } else if (colors === 'green' && prefer === 'surf' && thing === 'city') { - result = 'turtle on a walk'; - } else if (colors === 'pink' && prefer === 'surf' && thing === 'ocean') { - result = 'jellyFish'; - } else if (colors === 'pink' && prefer === 'surf' && thing === 'sand') { - result = 'Pink sand crabs'; - } else if (colors === 'pink' && prefer === 'surf' && thing === 'mountain') { - result = 'jelly fish'; - } else if (colors === 'brown' && prefer === 'surf' && thing === 'city') { - result = 'jelly fish'; - } else if (colors === 'brown' && prefer === 'surf' && thing === 'ocean') { - result = 'dog +picture of dog that surfs'; - } else if (colors === 'brown' && prefer === 'surf' && thing === 'sand') { - result = 'Dog'; - } else { - result = 'unknown'; - } - - return result; - } - const handleNextStep = () => { console.log('counter before', counter); setCounter(counter + 1); console.log('after', counter) - if (counter === 4) { - const result = calculateResult({ prefer: prefers, thing: things, colors: color }); - setResults(result); - } } const handleStartQuiz = () => { setStarted(true); @@ -68,14 +27,14 @@ export const App = () => { }; return ( -
+
{!started && ( - <> +

Answer these questions and we will tell you your favourite animal

- - +
)} {counter === 1 && ( @@ -85,7 +44,7 @@ export const App = () => {
)} {counter === 2 && ( - + )} {counter === 3 && ( @@ -94,7 +53,7 @@ export const App = () => { )} {counter >= 5 && ( - )} + )} {(counter === 1 && !name) || (counter === 2 && !prefers) @@ -103,12 +62,12 @@ export const App = () => {

Please answer the current question before proceeding.

) : ( started && counter < 5 && ( - ) )} -
+ ); } // start button hur ska jag sätta button nr 2 vart? diff --git a/code/src/components/Color.js b/code/src/components/Color.js index d746b7526..11f635c8f 100644 --- a/code/src/components/Color.js +++ b/code/src/components/Color.js @@ -10,33 +10,45 @@ export const Color = ({ color, setColor, counterFromApp, setCounter }) => { return (

What´s your favourite color ?

- -
+
-
+ +
); } diff --git a/code/src/components/Name.js b/code/src/components/Name.js index 47c196459..45180cad9 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -9,10 +9,10 @@ export const Name = ({ name, setName, counter }) => { return (
-
+

What is your name?

- -
+ +
); } \ No newline at end of file diff --git a/code/src/components/Prefer.js b/code/src/components/Prefer.js index 2768e4a1c..585d33ef2 100644 --- a/code/src/components/Prefer.js +++ b/code/src/components/Prefer.js @@ -4,18 +4,18 @@ export const Prefer = ({ prefers, setPrefers, counterFromApp, setCounter }) => { const handlePreferChange = (event) => { setPrefers(event.target.value); setCounter(counterFromApp + 1); - console.log('prefer: ', event.target.value); + console.log('prefers: ', event.target.value); } return (
-

What do you prefer

- - + diff --git a/code/src/components/QuizResult.js b/code/src/components/QuizResult.js new file mode 100644 index 000000000..b6ca787b0 --- /dev/null +++ b/code/src/components/QuizResult.js @@ -0,0 +1,119 @@ +import React from 'react'; + +export const Color = ({ color, setColor, counterFromApp, setCounter }) => { + + + +const handleResults = (prefer, thing, color) = { + + if (prefer === 'surf' && thing === 'ocean' && color === 'black') { + return ('shark'); + } else if (prefer === 'surf' && thing === 'sand' && color === 'black') { + return ('dog+surf'); + } else if (prefer === 'surf' && thing === 'mountain' && color === 'black') { + return ('dog+surf'); + } else if (prefer === 'surf' && thing === 'city' && color === 'black') { + return ('seagull'); + } else if (color === 'green' && prefer === 'surf' && thing === 'ocean') { + return ('turtle'); + } else if (color === 'green' && prefer === 'surf' && thing === 'sand') { + return ('turtle'); + } else if (color === 'green' && prefer === 'surf' && thing === 'mountain') { + return ('parrot') + } else if (color === 'green' && prefer === 'surf' && thing === 'city') { + return ('turtle on a walk') + } else if (color === 'pink' && prefer === 'surf' && thing === 'ocean') { + return ('jellyFish') + } else if (color === 'pink' && prefer === 'surf' && thing === 'sand') { + return ('Pink sand crabs') + } else if (color === 'pink' && prefer === 'surf' && thing === 'mountain') { + return ('jelly fish') + } else if (color === 'brown' && prefer === 'surf' && thing === 'city') { + return ('jelly fish') + } else if (color === 'brown' && prefer === 'surf' && thing === 'ocean') { + return ('dog +picture of dog that surfs') + } else if (color === 'brown' && prefer === 'surf' && thing === 'sand') { + return ('Dog') + } else if (color === 'brown' && prefer === 'surf' && thing === 'mountain') { + return ('Dog') + } else if (prefer === 'books' && thing === 'ocean' && color === 'black') { + return ('shark') + } else if (prefer === 'surf' && thing === 'sand' && color === 'black'){ + return ('shark') + } else if (prefer === 'Books' && thing === 'mountain' && color === 'black') { + return ('dog+surf') + } else if (prefer === 'books' && thing === 'city' && color === 'black') { + return ('seagull') + } else if (color === 'green' && prefer === 'books' && thing === 'ocean') { + return ('turtle') + } else if (color === 'green' && prefer === 'books' && thing === 'sand') { + return ('turtle') + } else if (color === 'green' && prefer === 'books' && thing === 'mountain') { + return ('parrot') + } else if (color === 'green' && prefer === 'books' && thing === 'city') { + return ('turtle on a walk') + } else if (color === 'pink' && prefer === 'books' && thing === 'ocean') { + return ('jellyFish') + } else if (color === 'pink' && prefer === 'books' && thing === 'sand') { + return ('Pink sand crabs') + } else if (color === 'pink' && prefer === 'books' && thing === 'mountain') { + return ('jelly fish') + } else if (color === 'brown' && prefer === 'books' && thing === 'city') { + return ('jelly fish') + } else if (color === 'brown' && prefer === 'books' && thing === 'ocean') { + return ('dog +picture of dog that surfs') + } else if (color === 'brown' && prefer === 'books' && thing === 'sand') { + return ('Dog') + } else if (color === 'brown' && prefer === 'books' && thing === 'mountain') { + return ('Dog') + } else if (prefer === 'people' && thing === 'ocean' && color === 'black') { + return ('dog + dog surf') + } else if (prefer === 'people' && thing === 'sand' && color === 'black'){ + return ('dog+surf') + } else if (prefer === 'Books' && thing === 'mountain' && color === 'black') { + return ('dog+surf') + } else if (prefer === 'people' && thing === 'city' && color === 'black') { + return ('dog') + } else if (color === 'green' && prefer === 'people' && thing === 'ocean') { + return ('turtle') + } else if (color === 'green' && prefer === 'people' && thing === 'sand') { + return ('turtle') + } else if (color === 'green' && prefer === 'people' && thing === 'mountain') { + return ('parrot') + } else if (color === 'green' && prefer === 'people' && thing === 'city') { + return ('turtle on a walk') + } else if (color === 'pink' && prefer === 'people' && thing === 'ocean') { + return ('jellyFish') + } else if (color === 'pink' && prefer === 'people' && thing === 'sand') { + return ('Pink sand crabs') + } else if (color === 'pink' && prefer === 'people' && thing === 'mountain') { + return ('himalayan saltwater crab') + } else if (color === 'brown' && prefer === 'people' && thing === 'city') { + return ('nakenkatt') + } else if (color === 'brown' && prefer === 'people' && thing === 'ocean') { + return ('dog+surf'); + } else if (color === 'brown' && prefer === 'people' && thing === 'sand') { + return ('Dog'); + } else if (color === 'brown' && prefer === 'people' && thing === 'mountain') { + return ('Dog'); + } else if (color === 'black' && prefer === 'tents' && thing === 'ocean') { + return ('dog+surf'); + } else if (color === 'black' && prefer === 'tents' && thing === 'sand') { + return ('Dog'); + } else if (color === 'black' && prefer === 'tents' && thing === 'mountain') { + return ('Mountain goat'); + } else if (color === 'black' && prefer === 'tents' && thing === 'city') { + return ('rat'); + } else if (color === 'pink' && prefer === 'people' && thing === 'mountain') { + return ('himalayan salt water shrimp'); + } else if (color === 'pink' && prefer === 'people' && thing === 'city') { + return ('nakenkatt'); + + } + return ( +
+ +

Results: {results}

+
+ ); +} diff --git a/code/src/components/Results.js b/code/src/components/Results.js index 41c9e649b..ef707e84c 100644 --- a/code/src/components/Results.js +++ b/code/src/components/Results.js @@ -1,11 +1,13 @@ import React from 'react' +import { getResult } from './QuizResult' -export const Results = ({ name, result, setResults }) => { +export const Results = ({ name, color, prefer, things }) => { + const results = getResult({ prefer, things, color }); return (
-

{name}, your favourite animal is {result}

+

{name}, your favourite animal is {results}

- ) -} \ No newline at end of file + ); +}; \ No newline at end of file From 7022f5e9ffeef9ea75c3d04eda6f28d01abb112b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Thu, 16 Mar 2023 11:39:44 +0100 Subject: [PATCH 10/17] cleaned --- code/src/components/QuizResult.js | 216 +++++++++++++++--------------- code/src/components/Results.js | 5 +- 2 files changed, 108 insertions(+), 113 deletions(-) diff --git a/code/src/components/QuizResult.js b/code/src/components/QuizResult.js index b6ca787b0..0e780a521 100644 --- a/code/src/components/QuizResult.js +++ b/code/src/components/QuizResult.js @@ -1,119 +1,115 @@ import React from 'react'; -export const Color = ({ color, setColor, counterFromApp, setCounter }) => { - +export const quizResult = ({ prefer, color, thing, setResults }) => { + const handleResults = (event) => { + setResults(event.target.value); - -const handleResults = (prefer, thing, color) = { - - if (prefer === 'surf' && thing === 'ocean' && color === 'black') { - return ('shark'); - } else if (prefer === 'surf' && thing === 'sand' && color === 'black') { - return ('dog+surf'); - } else if (prefer === 'surf' && thing === 'mountain' && color === 'black') { - return ('dog+surf'); - } else if (prefer === 'surf' && thing === 'city' && color === 'black') { - return ('seagull'); - } else if (color === 'green' && prefer === 'surf' && thing === 'ocean') { - return ('turtle'); - } else if (color === 'green' && prefer === 'surf' && thing === 'sand') { - return ('turtle'); - } else if (color === 'green' && prefer === 'surf' && thing === 'mountain') { - return ('parrot') - } else if (color === 'green' && prefer === 'surf' && thing === 'city') { - return ('turtle on a walk') - } else if (color === 'pink' && prefer === 'surf' && thing === 'ocean') { - return ('jellyFish') - } else if (color === 'pink' && prefer === 'surf' && thing === 'sand') { - return ('Pink sand crabs') - } else if (color === 'pink' && prefer === 'surf' && thing === 'mountain') { - return ('jelly fish') - } else if (color === 'brown' && prefer === 'surf' && thing === 'city') { - return ('jelly fish') - } else if (color === 'brown' && prefer === 'surf' && thing === 'ocean') { - return ('dog +picture of dog that surfs') - } else if (color === 'brown' && prefer === 'surf' && thing === 'sand') { - return ('Dog') - } else if (color === 'brown' && prefer === 'surf' && thing === 'mountain') { - return ('Dog') - } else if (prefer === 'books' && thing === 'ocean' && color === 'black') { - return ('shark') - } else if (prefer === 'surf' && thing === 'sand' && color === 'black'){ - return ('shark') - } else if (prefer === 'Books' && thing === 'mountain' && color === 'black') { - return ('dog+surf') - } else if (prefer === 'books' && thing === 'city' && color === 'black') { - return ('seagull') - } else if (color === 'green' && prefer === 'books' && thing === 'ocean') { - return ('turtle') - } else if (color === 'green' && prefer === 'books' && thing === 'sand') { - return ('turtle') - } else if (color === 'green' && prefer === 'books' && thing === 'mountain') { - return ('parrot') - } else if (color === 'green' && prefer === 'books' && thing === 'city') { - return ('turtle on a walk') - } else if (color === 'pink' && prefer === 'books' && thing === 'ocean') { - return ('jellyFish') - } else if (color === 'pink' && prefer === 'books' && thing === 'sand') { - return ('Pink sand crabs') - } else if (color === 'pink' && prefer === 'books' && thing === 'mountain') { - return ('jelly fish') - } else if (color === 'brown' && prefer === 'books' && thing === 'city') { - return ('jelly fish') - } else if (color === 'brown' && prefer === 'books' && thing === 'ocean') { - return ('dog +picture of dog that surfs') - } else if (color === 'brown' && prefer === 'books' && thing === 'sand') { - return ('Dog') - } else if (color === 'brown' && prefer === 'books' && thing === 'mountain') { - return ('Dog') - } else if (prefer === 'people' && thing === 'ocean' && color === 'black') { - return ('dog + dog surf') - } else if (prefer === 'people' && thing === 'sand' && color === 'black'){ - return ('dog+surf') - } else if (prefer === 'Books' && thing === 'mountain' && color === 'black') { - return ('dog+surf') - } else if (prefer === 'people' && thing === 'city' && color === 'black') { - return ('dog') - } else if (color === 'green' && prefer === 'people' && thing === 'ocean') { - return ('turtle') - } else if (color === 'green' && prefer === 'people' && thing === 'sand') { - return ('turtle') - } else if (color === 'green' && prefer === 'people' && thing === 'mountain') { - return ('parrot') - } else if (color === 'green' && prefer === 'people' && thing === 'city') { - return ('turtle on a walk') - } else if (color === 'pink' && prefer === 'people' && thing === 'ocean') { - return ('jellyFish') - } else if (color === 'pink' && prefer === 'people' && thing === 'sand') { - return ('Pink sand crabs') - } else if (color === 'pink' && prefer === 'people' && thing === 'mountain') { - return ('himalayan saltwater crab') - } else if (color === 'brown' && prefer === 'people' && thing === 'city') { - return ('nakenkatt') - } else if (color === 'brown' && prefer === 'people' && thing === 'ocean') { - return ('dog+surf'); - } else if (color === 'brown' && prefer === 'people' && thing === 'sand') { - return ('Dog'); - } else if (color === 'brown' && prefer === 'people' && thing === 'mountain') { - return ('Dog'); - } else if (color === 'black' && prefer === 'tents' && thing === 'ocean') { - return ('dog+surf'); - } else if (color === 'black' && prefer === 'tents' && thing === 'sand') { - return ('Dog'); - } else if (color === 'black' && prefer === 'tents' && thing === 'mountain') { - return ('Mountain goat'); - } else if (color === 'black' && prefer === 'tents' && thing === 'city') { - return ('rat'); - } else if (color === 'pink' && prefer === 'people' && thing === 'mountain') { - return ('himalayan salt water shrimp'); - } else if (color === 'pink' && prefer === 'people' && thing === 'city') { - return ('nakenkatt'); - + console.log('Name:', event.target.value); + } + const quiz = () => { + if (prefer === 'surf' && thing === 'ocean' && color === 'black') { + return ('shark'); + } else if (prefer === 'surf' && thing === 'sand' && color === 'black') { + return ('dog+surf'); + } else if (prefer === 'surf' && thing === 'mountain' && color === 'black') { + return ('dog+surf'); + } else if (prefer === 'surf' && thing === 'city' && color === 'black') { + return ('seagull'); + } else if (color === 'green' && prefer === 'surf' && thing === 'ocean') { + return ('turtle'); + } else if (color === 'green' && prefer === 'surf' && thing === 'sand') { + return ('turtle'); + } else if (color === 'green' && prefer === 'surf' && thing === 'mountain') { + return ('parrot') + } else if (color === 'green' && prefer === 'surf' && thing === 'city') { + return ('turtle on a walk') + } else if (color === 'pink' && prefer === 'surf' && thing === 'ocean') { + return ('jellyFish') + } else if (color === 'pink' && prefer === 'surf' && thing === 'sand') { + return ('Pink sand crabs') + } else if (color === 'pink' && prefer === 'surf' && thing === 'mountain') { + return ('jelly fish') + } else if (color === 'brown' && prefer === 'surf' && thing === 'city') { + return ('jelly fish') + } else if (color === 'brown' && prefer === 'surf' && thing === 'ocean') { + return ('dog +picture of dog that surfs') + } else if (color === 'brown' && prefer === 'surf' && thing === 'sand') { + return ('Dog') + } else if (color === 'brown' && prefer === 'surf' && thing === 'mountain') { + return ('Dog') + } else if (prefer === 'books' && thing === 'ocean' && color === 'black') { + return ('shark') + } else if (prefer === 'Books' && thing === 'mountain' && color === 'black') { + return ('dog+surf') + } else if (prefer === 'books' && thing === 'city' && color === 'black') { + return ('seagull') + } else if (color === 'green' && prefer === 'books' && thing === 'ocean') { + return ('turtle') + } else if (color === 'green' && prefer === 'books' && thing === 'sand') { + return ('turtle') + } else if (color === 'green' && prefer === 'books' && thing === 'mountain') { + return ('parrot') + } else if (color === 'green' && prefer === 'books' && thing === 'city') { + return ('turtle on a walk') + } else if (color === 'pink' && prefer === 'books' && thing === 'ocean') { + return ('jellyFish') + } else if (color === 'pink' && prefer === 'books' && thing === 'sand') { + return ('Pink sand crabs') + } else if (color === 'pink' && prefer === 'books' && thing === 'mountain') { + return ('jelly fish') + } else if (color === 'brown' && prefer === 'books' && thing === 'city') { + return ('jelly fish') + } else if (color === 'brown' && prefer === 'books' && thing === 'ocean') { + return ('dog +picture of dog that surfs') + } else if (color === 'brown' && prefer === 'books' && thing === 'sand') { + return ('Dog') + } else if (color === 'brown' && prefer === 'books' && thing === 'mountain') { + return ('Dog') + } else if (prefer === 'people' && thing === 'ocean' && color === 'black') { + return ('dog + dog surf') + } else if (prefer === 'people' && thing === 'sand' && color === 'black') { + return ('dog+surf') + } else if (prefer === 'people' && thing === 'city' && color === 'black') { + return ('dog') + } else if (color === 'green' && prefer === 'people' && thing === 'ocean') { + return ('turtle') + } else if (color === 'green' && prefer === 'people' && thing === 'sand') { + return ('turtle') + } else if (color === 'green' && prefer === 'people' && thing === 'mountain') { + return ('parrot') + } else if (color === 'green' && prefer === 'people' && thing === 'city') { + return ('turtle on a walk') + } else if (color === 'pink' && prefer === 'people' && thing === 'ocean') { + return ('jellyFish') + } else if (color === 'pink' && prefer === 'people' && thing === 'sand') { + return ('Pink sand crabs') + } else if (color === 'pink' && prefer === 'people' && thing === 'mountain') { + return ('himalayan saltwater crab') + } else if (color === 'brown' && prefer === 'people' && thing === 'city') { + return ('nakenkatt') + } else if (color === 'brown' && prefer === 'people' && thing === 'ocean') { + return ('dog+surf'); + } else if (color === 'brown' && prefer === 'people' && thing === 'sand') { + return ('Dog'); + } else if (color === 'brown' && prefer === 'people' && thing === 'mountain') { + return ('Dog'); + } else if (color === 'black' && prefer === 'tents' && thing === 'ocean') { + return ('dog+surf'); + } else if (color === 'black' && prefer === 'tents' && thing === 'sand') { + return ('Dog'); + } else if (color === 'black' && prefer === 'tents' && thing === 'mountain') { + return ('Mountain goat'); + } else if (color === 'black' && prefer === 'tents' && thing === 'city') { + return ('rat'); + } else if (color === 'pink' && prefer === 'people' && thing === 'city') { + return ('nakenkatt'); + } } + quiz(); return (
- -

Results: {results}

+ +

Results: {quiz}

); } diff --git a/code/src/components/Results.js b/code/src/components/Results.js index ef707e84c..73a64a9cb 100644 --- a/code/src/components/Results.js +++ b/code/src/components/Results.js @@ -1,12 +1,11 @@ import React from 'react' -import { getResult } from './QuizResult' export const Results = ({ name, color, prefer, things }) => { - const results = getResult({ prefer, things, color }); + const animal = Results({ prefer, things, color }); return (
-

{name}, your favourite animal is {results}

+

{name}, your favourite animal is {animal}

); From 0e40f45aa1204e807cd1dd006dae1a4ee236004e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Fri, 17 Mar 2023 08:03:02 +0100 Subject: [PATCH 11/17] some css and got the ifstatement but not working --- code/src/App.js | 17 ++++++++++++----- code/src/components/Name.js | 2 +- code/src/components/QuizResult.js | 14 ++++++++------ code/src/components/Results.js | 8 +++++--- code/src/index.css | 14 ++++++++++---- 5 files changed, 36 insertions(+), 19 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 1b4939cf8..062ec04d0 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -2,9 +2,10 @@ import React, { useState } from 'react'; import { Name } from './components/Name'; import { Prefer } from './components/Prefer'; -import { Results } from './components/Results'; +// import { Results } from './components/Results'; import { Color } from './components/Color'; import { Thing } from './components/Thing'; +import { QuizResult } from './components/QuizResult' import './index.css'; export const App = () => { @@ -13,17 +14,21 @@ export const App = () => { const [prefers, setPrefers] = useState('') const [color, setColor] = useState('') const [things, setThing] = useState('') - const [results] = useState('') + const [results, setResults] = useState('') const [started, setStarted] = useState(false); + const [quizEnded, setQuizEnded] = useState(false); const handleNextStep = () => { console.log('counter before', counter); setCounter(counter + 1); console.log('after', counter) - } + }; const handleStartQuiz = () => { setStarted(true); handleNextStep(); + if (counter >= 5) { + setQuizEnded(true); + } }; return ( @@ -52,8 +57,9 @@ export const App = () => { {counter === 4 && ( )} - {counter >= 5 && ( - )} + {counter >= 5 && quizEnded && ( + + )} {(counter === 1 && !name) || (counter === 2 && !prefers) @@ -79,4 +85,5 @@ export const App = () => { */ +// why like this in nr 59 what does it mean? diff --git a/code/src/components/Name.js b/code/src/components/Name.js index 45180cad9..d31fc2cc4 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -11,7 +11,7 @@ export const Name = ({ name, setName, counter }) => {

What is your name?

- +
); diff --git a/code/src/components/QuizResult.js b/code/src/components/QuizResult.js index 0e780a521..d2ca8fc80 100644 --- a/code/src/components/QuizResult.js +++ b/code/src/components/QuizResult.js @@ -1,11 +1,13 @@ -import React from 'react'; +import React, { useState } from 'react'; -export const quizResult = ({ prefer, color, thing, setResults }) => { +export const QuizResult = ({ prefer, color, thing }) => { + const [results, setResults] = useState(''); const handleResults = (event) => { setResults(event.target.value); - - console.log('Name:', event.target.value); - } + const result = QuizResult({ prefer: 'surf', color: 'black', thing: 'ocean' }); + setResults(result); + console.log(result); + }; const quiz = () => { if (prefer === 'surf' && thing === 'ocean' && color === 'black') { return ('shark'); @@ -109,7 +111,7 @@ export const quizResult = ({ prefer, color, thing, setResults }) => { return (
-

Results: {quiz}

+

Results: {results}

); } diff --git a/code/src/components/Results.js b/code/src/components/Results.js index 73a64a9cb..3cb0a5864 100644 --- a/code/src/components/Results.js +++ b/code/src/components/Results.js @@ -1,11 +1,13 @@ -import React from 'react' +import React from 'react'; +import { QuizResult } from './QuizResults'; export const Results = ({ name, color, prefer, things }) => { - const animal = Results({ prefer, things, color }); + const result = QuizResult({ prefer, things, color }); + return (
-

{name}, your favourite animal is {animal}

+

{name}, your favourite animal is {result}

); diff --git a/code/src/index.css b/code/src/index.css index e81c19ab3..36cc5e4bb 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -18,23 +18,29 @@ code { body{ margin: 0; overflow-x: hidden; + background-color: #FFFD37 } /**/ .StartPage{ display: grid; grid-template-columns: 1fr; justify-items: center; - border: 2px solid green; - margin: 20px; + margin: 100px 60px 100px 60px; + background-color: #A8E4A0; + border-radius: 5px; + } .StartPage h1{ padding-left: 30px; - padding-right: 10px; + padding-right: 30px; + text-align: center; } .startBtn{ width: 100px; - margin: 20px; + margin: 50px 30px 100px 70px; + ; + } .nextQuestion{ From aa6010aaf6d7f72711e2f75a19287230823e95aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Fri, 17 Mar 2023 08:53:58 +0100 Subject: [PATCH 12/17] more css --- code/src/App.js | 4 ++-- code/src/components/Name.js | 14 ++++++++------ code/src/components/QuizResult.js | 9 +++++---- code/src/components/Results.js | 4 ++-- code/src/index.css | 13 ++++++++++--- 5 files changed, 27 insertions(+), 17 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 062ec04d0..eba174be0 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -34,7 +34,7 @@ export const App = () => { return (
{!started && ( -
+

Answer these questions and we will tell you your favourite animal

-

Results: {results}

+

Hey {name} your favourite animal is{results}

); } diff --git a/code/src/components/Results.js b/code/src/components/Results.js index 3cb0a5864..c7b86aae0 100644 --- a/code/src/components/Results.js +++ b/code/src/components/Results.js @@ -1,4 +1,4 @@ -import React from 'react'; +/* import React from 'react'; import { QuizResult } from './QuizResults'; export const Results = ({ name, color, prefer, things }) => { @@ -11,4 +11,4 @@ export const Results = ({ name, color, prefer, things }) => {
); -}; \ No newline at end of file +}; */ \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index 36cc5e4bb..2db38939b 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -50,11 +50,18 @@ body{ -/*input*/ +/*name-container*/ .inputName{ border: pink solid 2px; - margin: 20px; - padding: 5px; +margin-top: 70px; +} + +.name-container{ + margin: 100px 50px 100px 50px; +} +.name-container p{ + font-size: 40px; + } /*favourite color*/ From b6ca0875262e413c5057fd74aed7304a58065cdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Irup=C3=A9=20Pozo?= Date: Fri, 17 Mar 2023 10:01:51 +0100 Subject: [PATCH 13/17] some css --- code/src/App.js | 10 ++-- code/src/components/Prefer.js | 8 +-- code/src/components/QuizResult.js | 11 ++-- code/src/components/Thing.js | 8 +-- code/src/index.css | 85 +++++++++++++++++++++++-------- 5 files changed, 84 insertions(+), 38 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index eba174be0..f4a01ed49 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -30,7 +30,9 @@ export const App = () => { setQuizEnded(true); } }; - + const showResult = ( + + ) return (
{!started && ( @@ -65,8 +67,10 @@ export const App = () => { || (counter === 2 && !prefers) || (counter === 3 && !color) || (counter === 4 && !things) ? ( -

Please answer the current question before proceeding.

- ) : ( +

Please answer the current question before proceeding.

+ ) + || (counter === 5 && !showResult) + : ( started && counter < 5 && ( - + title="Select Pink color" /> + - + title="Select Black color" /> + diff --git a/code/src/components/Prefer.js b/code/src/components/Prefer.js index 0c39816ca..161c3597b 100644 --- a/code/src/components/Prefer.js +++ b/code/src/components/Prefer.js @@ -13,7 +13,7 @@ export const Prefer = ({ prefers, setPrefers, counterFromApp, setCounter }) => {
- Sand -