From 8e3da563041137aa27a7b5cfe1cc514c0d820d61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrea=20Hedstr=C3=B6m?= Date: Wed, 15 Mar 2023 09:15:48 +0100 Subject: [PATCH 01/21] added components --- code/package-lock.json | 49 --------------------------- code/src/App.js | 15 +++++--- code/src/components/Color.js | 0 code/src/components/Favouriteplace.js | 12 +++++++ code/src/components/Food.js | 20 +++++++++++ code/src/components/Name.js | 13 +++++++ code/src/components/Result.js | 0 7 files changed, 56 insertions(+), 53 deletions(-) create mode 100644 code/src/components/Color.js create mode 100644 code/src/components/Favouriteplace.js create mode 100644 code/src/components/Food.js create mode 100644 code/src/components/Name.js create mode 100644 code/src/components/Result.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..651c9dde1 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,16 @@ -import React from 'react'; +import React, { useState } from 'react'; export const App = () => { + const [step, setStep] = useState(1); + + const handleStepincrease = () => { + setStep(step + 1); + } return ( -
- Find me in src/app.js! -
+ <> + +

Current step: {step}

+ + ); } diff --git a/code/src/components/Color.js b/code/src/components/Color.js new file mode 100644 index 000000000..e69de29bb diff --git a/code/src/components/Favouriteplace.js b/code/src/components/Favouriteplace.js new file mode 100644 index 000000000..038605558 --- /dev/null +++ b/code/src/components/Favouriteplace.js @@ -0,0 +1,12 @@ +import React from 'react'; + +export const FavouritePlace = ({ favouriteplace, setFavouritePlace }) => { + const handleFavouritePlaceChange = (event) => { + setFavouritePlaceChange(event.target.value); + } +} +return ( + <> +

Wich place in the world do you wanna be at right now?

+ +) \ No newline at end of file diff --git a/code/src/components/Food.js b/code/src/components/Food.js new file mode 100644 index 000000000..5c955b8fd --- /dev/null +++ b/code/src/components/Food.js @@ -0,0 +1,20 @@ +Import React from 'react'; + +const FoodOption = [ + 'The biggest cake you ever seen?', + 'Buffé with all your favourite food?', + 'Fruits and berries in piles?', + 'Ice cream that never melt and never ends?', +]; + +export const Food = ({ food, setFood }) => { + const handleFoodChange = (event) => { + setFood(event.target.value); + } +} +return ( + <> +

What do you wanna eat on your party?

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

Crappy day? Lets have a party!

+

What's your name?

+ + + ) \ No newline at end of file diff --git a/code/src/components/Result.js b/code/src/components/Result.js new file mode 100644 index 000000000..e69de29bb From 27621ca3383b3725b72a5acdbf614a89895258f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrea=20Hedstr=C3=B6m?= Date: Wed, 15 Mar 2023 10:05:37 +0100 Subject: [PATCH 02/21] added functions and buttons --- code/src/components/Color.js | 0 code/src/components/Confetti.js | 2 ++ code/src/components/Drink.js | 17 +++++++++++++++++ code/src/components/Favouriteplace.js | 1 + code/src/components/Food.js | 13 ++++++++++++- code/src/components/Party.js | 15 +++++++++++++++ code/src/components/Result.js | 0 7 files changed, 47 insertions(+), 1 deletion(-) delete mode 100644 code/src/components/Color.js create mode 100644 code/src/components/Confetti.js create mode 100644 code/src/components/Drink.js create mode 100644 code/src/components/Party.js delete mode 100644 code/src/components/Result.js diff --git a/code/src/components/Color.js b/code/src/components/Color.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/code/src/components/Confetti.js b/code/src/components/Confetti.js new file mode 100644 index 000000000..968290fa1 --- /dev/null +++ b/code/src/components/Confetti.js @@ -0,0 +1,2 @@ +import React from 'react'; + diff --git a/code/src/components/Drink.js b/code/src/components/Drink.js new file mode 100644 index 000000000..5eb0c99c8 --- /dev/null +++ b/code/src/components/Drink.js @@ -0,0 +1,17 @@ +inport React from 'react'; + +export const Drink = ({ drink, setDrink }) => { + const handleDrinkChange = (event) => { + setDrink(event.target.value); + } +} +return ( +

And what do you wanna drink on this special day?

+ +) \ No newline at end of file diff --git a/code/src/components/Favouriteplace.js b/code/src/components/Favouriteplace.js index 038605558..6706097a5 100644 --- a/code/src/components/Favouriteplace.js +++ b/code/src/components/Favouriteplace.js @@ -8,5 +8,6 @@ export const FavouritePlace = ({ favouriteplace, setFavouritePlace }) => { return ( <>

Wich place in the world do you wanna be at right now?

+ ) \ No newline at end of file diff --git a/code/src/components/Food.js b/code/src/components/Food.js index 5c955b8fd..bf4263283 100644 --- a/code/src/components/Food.js +++ b/code/src/components/Food.js @@ -15,6 +15,17 @@ export const Food = ({ food, setFood }) => { return ( <>

What do you wanna eat on your party?

- +
+ {FoodOption.map((group) => ( + + ))} +
+ ) \ No newline at end of file diff --git a/code/src/components/Party.js b/code/src/components/Party.js new file mode 100644 index 000000000..b360eba77 --- /dev/null +++ b/code/src/components/Party.js @@ -0,0 +1,15 @@ +Import React from 'react'; + +export const Party = ({ name, favouriteplace, food, drink }) => { + return ( + <> +

Crappy days will come and go but right now, imagine that you + are at {favouriteplace}, eating {food} and drinking {drink}. + Your favouritemusic is on and wherever you are - do a little dance! + No one knows that you're having a party RIGHT NOW, for YOU! + Need more paryfeelin? Push partybutton! +

+ + + ) +} \ No newline at end of file diff --git a/code/src/components/Result.js b/code/src/components/Result.js deleted file mode 100644 index e69de29bb..000000000 From 3e991f85f6414e2369a11a4be47560421f437e1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrea=20Hedstr=C3=B6m?= Date: Wed, 15 Mar 2023 10:20:39 +0100 Subject: [PATCH 03/21] added all steps in App.js --- code/src/App.js | 37 ++++++++++++++++++++++++++++++++---- code/src/components/Party.js | 2 +- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 651c9dde1..f184f2383 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,16 +1,45 @@ import React, { useState } from 'react'; +import { Name } from 'components/Name'; +import { FavouritePlace } from 'components/Favouriteplace'; +import { Food } from 'components/Food'; +import { Drink } from 'components/Drink'; +import { Party } from 'components/Party'; + export const App = () => { const [step, setStep] = useState(1); + const [name, setName] = useState(''); + const [favoruiteplace, setFavouritePlace] = useState(''); + const [food, setFood] = useState(''); + const [drink, setDrink] = useState(''); + - const handleStepincrease = () => { + const handleStepIncrease = () => { setStep(step + 1); } return ( <> - -

Current step: {step}

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

Current step: {step}

+ )} + ); -} +}; diff --git a/code/src/components/Party.js b/code/src/components/Party.js index b360eba77..f5df2e844 100644 --- a/code/src/components/Party.js +++ b/code/src/components/Party.js @@ -11,5 +11,5 @@ export const Party = ({ name, favouriteplace, food, drink }) => {

- ) + ); } \ No newline at end of file From 76768a895d3f41a7a3835c318103b8c9255a8741 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrea=20Hedstr=C3=B6m?= Date: Wed, 15 Mar 2023 11:10:31 +0100 Subject: [PATCH 04/21] got the structure to work --- code/src/App.js | 47 +++++++++++++-------------- code/src/components/Drink.js | 38 +++++++++++++--------- code/src/components/Favouriteplace.js | 13 -------- code/src/components/Food.js | 38 +++++++++++----------- code/src/components/Name.js | 23 ++++++------- code/src/components/Party.js | 16 ++++----- code/src/components/Place.js | 13 ++++++++ 7 files changed, 98 insertions(+), 90 deletions(-) delete mode 100644 code/src/components/Favouriteplace.js create mode 100644 code/src/components/Place.js diff --git a/code/src/App.js b/code/src/App.js index f184f2383..1b39dea2b 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Name } from 'components/Name'; -import { FavouritePlace } from 'components/Favouriteplace'; +import { Place } from 'components/Place'; import { Food } from 'components/Food'; import { Drink } from 'components/Drink'; import { Party } from 'components/Party'; @@ -9,37 +9,36 @@ import { Party } from 'components/Party'; export const App = () => { const [step, setStep] = useState(1); const [name, setName] = useState(''); - const [favoruiteplace, setFavouritePlace] = useState(''); + const [place, setPlace] = useState(''); const [food, setFood] = useState(''); const [drink, setDrink] = useState(''); - const handleStepIncrease = () => { setStep(step + 1); } return ( <> - {step === 1 && ( - - )} - {step === 2 && ( - - )} - {step === 3 && ( - - )} - {step === 4 && ( - - )} - {step >= 5 && ( - - )} - {step > 5 && ( - <> -

Current step: {step}

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

Current step: {step}

+ + + )} ); }; diff --git a/code/src/components/Drink.js b/code/src/components/Drink.js index 5eb0c99c8..d8e65b103 100644 --- a/code/src/components/Drink.js +++ b/code/src/components/Drink.js @@ -1,17 +1,25 @@ -inport React from 'react'; +import React from 'react'; export const Drink = ({ drink, setDrink }) => { - const handleDrinkChange = (event) => { - setDrink(event.target.value); - } -} -return ( -

And what do you wanna drink on this special day?

- -) \ No newline at end of file + const handleDrinkChange = (event) => { + setDrink(event.target.value); + } + return ( +
+

And what do you wanna drink on this special day?

+
+ +
+
+ ) +} \ No newline at end of file diff --git a/code/src/components/Favouriteplace.js b/code/src/components/Favouriteplace.js deleted file mode 100644 index 6706097a5..000000000 --- a/code/src/components/Favouriteplace.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -export const FavouritePlace = ({ favouriteplace, setFavouritePlace }) => { - const handleFavouritePlaceChange = (event) => { - setFavouritePlaceChange(event.target.value); - } -} -return ( - <> -

Wich place in the world do you wanna be at right now?

- - -) \ No newline at end of file diff --git a/code/src/components/Food.js b/code/src/components/Food.js index bf4263283..3772c0167 100644 --- a/code/src/components/Food.js +++ b/code/src/components/Food.js @@ -1,31 +1,31 @@ -Import React from 'react'; +import React from 'react'; const FoodOption = [ - 'The biggest cake you ever seen?', - 'Buffé with all your favourite food?', - 'Fruits and berries in piles?', - 'Ice cream that never melt and never ends?', + 'The biggest cake you ever seen?', + 'Buffé with all your favourite food?', + 'Fruits and berries in piles?', + 'Ice cream that never melt and never ends?', ]; export const Food = ({ food, setFood }) => { - const handleFoodChange = (event) => { - setFood(event.target.value); - } -} -return ( + const handleFoodChange = (event) => { + setFood(event.target.value); + } + return ( <> -

What do you wanna eat on your party?

-
+

What do you wanna eat on your party?

+
{FoodOption.map((group) => ( - + {group} + ))} -
- +
+ -) \ No newline at end of file + ) +} diff --git a/code/src/components/Name.js b/code/src/components/Name.js index 3b4898dca..2d9c53c0b 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -1,13 +1,14 @@ import React from 'react'; -export const Name = ({ name, setName }) => - const handleNameChange = (event) => { - setName(event.target.value); - } - return ( - <> -

Crappy day? Lets have a party!

-

What's your name?

- - - ) \ No newline at end of file +export const Name = ({ name, setName }) => { + const handleNameChange = (event) => { + setName(event.target.value); + } + return ( + <> +

Crappy day? Lets have a party!

+

What's your name?

+ + + ) +} \ No newline at end of file diff --git a/code/src/components/Party.js b/code/src/components/Party.js index f5df2e844..28f3f81ed 100644 --- a/code/src/components/Party.js +++ b/code/src/components/Party.js @@ -1,13 +1,13 @@ -Import React from 'react'; +import React from 'react'; -export const Party = ({ name, favouriteplace, food, drink }) => { - return ( - <> -

Crappy days will come and go but right now, imagine that you - are at {favouriteplace}, eating {food} and drinking {drink}. - Your favouritemusic is on and wherever you are - do a little dance! +export const Party = ({ name, place, food, drink }) => { + return ( + <> +

{name}! Crappy days will come and go but for now, imagine that you + are at {place}, eating {food} and drinking {drink}. + Your favouritemusic is on and wherever you are right now - do a little dance! No one knows that you're having a party RIGHT NOW, for YOU! - Need more paryfeelin? Push partybutton! + Need more paryfeeling? Push partybutton!

diff --git a/code/src/components/Place.js b/code/src/components/Place.js new file mode 100644 index 000000000..2bfb40024 --- /dev/null +++ b/code/src/components/Place.js @@ -0,0 +1,13 @@ +import React from 'react'; + +export const Place = ({ place, setPlace }) => { + const handlePlaceChange = (event) => { + setPlaceChange(event.target.value); + } + return ( + <> +

Wich place in the world do you wanna be at right now?

+ + +) +} \ No newline at end of file From 7e6fae33332e38611c0625c99523a4092a7bbfee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrea=20Hedstr=C3=B6m?= Date: Wed, 15 Mar 2023 23:58:00 +0100 Subject: [PATCH 05/21] added CSS --- code/src/App.js | 18 ++++++++---- code/src/components/Drink.js | 18 ++++++------ code/src/components/Food.js | 4 ++- code/src/components/Name.js | 9 +++++- code/src/components/Party.js | 1 + code/src/components/Place.js | 2 ++ code/src/index.css | 54 ++++++++++++++++++++++++++++++++++++ 7 files changed, 90 insertions(+), 16 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 1b39dea2b..856fb1a1d 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -17,7 +17,7 @@ export const App = () => { setStep(step + 1); } return ( - <> +
{step === 1 && ( )} @@ -31,14 +31,20 @@ export const App = () => { )} {step >= 5 && ( - - )} + + )} {step < 5 && ( <> -

Current step: {step}

- +
+ +
+
+

STEP {step}/5

+
+ )} - + +
); }; diff --git a/code/src/components/Drink.js b/code/src/components/Drink.js index d8e65b103..c319d46b3 100644 --- a/code/src/components/Drink.js +++ b/code/src/components/Drink.js @@ -5,21 +5,23 @@ export const Drink = ({ drink, setDrink }) => { setDrink(event.target.value); } return ( -
+ <> +

And what do you wanna drink on this special day?

-
+
+
-
+ ) } \ No newline at end of file diff --git a/code/src/components/Food.js b/code/src/components/Food.js index 3772c0167..29168eba0 100644 --- a/code/src/components/Food.js +++ b/code/src/components/Food.js @@ -13,8 +13,10 @@ export const Food = ({ food, setFood }) => { } return ( <> +

What do you wanna eat on your party?

-
+
+
{FoodOption.map((group) => (