Current step: {step}
+ + + )} + ); } + diff --git a/code/src/components/Drink.js b/code/src/components/Drink.js new file mode 100644 index 000000000..5ab372bb6 --- /dev/null +++ b/code/src/components/Drink.js @@ -0,0 +1,13 @@ +import React from 'react' + +export const Drink = ({ drink, setDrink }) => { + const handleDrinkChange = (event) => { + setDrink(event.target.value); + } + return ( + <> +What is your fave drink
+ + + ); +} diff --git a/code/src/components/Food.js b/code/src/components/Food.js new file mode 100644 index 000000000..45d72cae5 --- /dev/null +++ b/code/src/components/Food.js @@ -0,0 +1,35 @@ +import React from 'react' + +/* a food component? food is the PROPS? */ +export const Food = ({ food, setFood }) => { +/* a function? */ +/* Anna, don´t forget to put a ( after return and a ) to close */ + const handleFoodChange = (event) => { + /* is this a varible? */ + setFood(event.target.value); + } + return ( + <> +What is your fave food?
+ + + ); +} + +/* what is object destructuring? */ +/* when do I use the { } ? */ +/* why is the { } in the food component? */ +/* is the type=TEXT the event? */ +/* value and onChange is connecting what? app.js? */ +/* what does return do? */ +/* what does the statehook do? */ +/* what is use state? */ +/* does the parent component always has to be in App.js? */ +/* what is the App.js file? why is it like the mothership of all js.files? */ +/* import { Name } from 'components/Name'; why do I need { crumelurs } here in the import? */ + +/* {step === 1 && ( +What is 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..0a707a34c --- /dev/null +++ b/code/src/components/Result.js @@ -0,0 +1,12 @@ +import React from 'react'; + +export const Result = ({ name, food, drink }) => { + return ( + <> +Your name is {name}!
+Your favourite food is {food}, yummi!😋
+Your favourite drink is {drink}!
+ + ); +} + 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 88c90082d6e3f76b1bd1dcf122b49df9265b230c Mon Sep 17 00:00:00 2001 From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com> Date: Wed, 15 Mar 2023 18:13:31 +0100 Subject: [PATCH 02/20] . --- code/src/App.js | 9 +++++---- code/src/components/Drink.js | 22 +++++++++++++++++++++- code/src/components/Food.js | 6 +++--- code/src/components/Radiobutton.js | 17 +++++++++++++++++ code/src/components/Result.js | 6 +++--- 5 files changed, 49 insertions(+), 11 deletions(-) create mode 100644 code/src/components/Radiobutton.js diff --git a/code/src/App.js b/code/src/App.js index 99db7864c..1ee1d7452 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -4,14 +4,15 @@ import { Name } from 'components/Name'; import { Food } from 'components/Food'; import { Drink } from 'components/Drink'; import { Result } from 'components/Result'; +import { RadioButton } from 'components/Radiobutton'; /* mothership (parent) COMPONENT ? */ export const App = () => { /* Is this VARIBLES ? */ const [step, setStep] = useState(1); - const [name, setName] = useState(2); - const [food, setFood] = useState(3); - const [drink, setDrink] = useState(4); + const [name, setName] = useState(); + const [food, setFood] = useState(); + const [drink, setDrink] = useState(); /* FUNCTION */ const handleStepIncrease = () => { /* Is this also a varible? */ @@ -21,7 +22,7 @@ export const App = () => { return ( <> {step === 1 && ( -What is your fave drink
+What is your fave drink?
+What is your fave drink?
+ + + */ \ No newline at end of file diff --git a/code/src/components/Food.js b/code/src/components/Food.js index 45d72cae5..61e5db4e3 100644 --- a/code/src/components/Food.js +++ b/code/src/components/Food.js @@ -1,8 +1,8 @@ import React from 'react' -/* a food component? food is the PROPS? */ +/* a food component - food is the PROPS! */ export const Food = ({ food, setFood }) => { -/* a function? */ +/* a function inside a component */ /* Anna, don´t forget to put a ( after return and a ) to close */ const handleFoodChange = (event) => { /* is this a varible? */ @@ -16,7 +16,7 @@ export const Food = ({ food, setFood }) => { ); } -/* what is object destructuring? */ +/* what is object destructuring? (food and setFood) */ /* when do I use the { } ? */ /* why is the { } in the food component? */ /* is the type=TEXT the event? */ diff --git a/code/src/components/Radiobutton.js b/code/src/components/Radiobutton.js new file mode 100644 index 000000000..2d0766e11 --- /dev/null +++ b/code/src/components/Radiobutton.js @@ -0,0 +1,17 @@ +import React from 'react' + +/* radio button component */ +/* export,const,food = decloration */ +/* = other side is argument */ +export const RadioButton = () => { + return ( +Your name is {name}!
-Your favourite food is {food}, yummi!😋
-Your favourite drink is {drink}!
+Your name is {name}! 💗
+Your favourite food is 🌮{food}, yummi!😋
+Your favourite drink is {drink}, 🍸 delich!
); } From f434760120987417ec3d369c26fa053926479b4a Mon Sep 17 00:00:00 2001 From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com> Date: Fri, 17 Mar 2023 11:35:36 +0100 Subject: [PATCH 03/20] a --- code/src/App.js | 20 ++++++++---------- code/src/components/Drink.js | 33 ------------------------------ code/src/components/Food.js | 3 +-- code/src/components/Name.js | 17 ++++++++------- code/src/components/Radiobutton.js | 17 --------------- code/src/components/Result.js | 6 +++--- code/src/components/ZodiacSign.js | 29 ++++++++++++++++++++++++++ code/src/index.css | 1 + 8 files changed, 53 insertions(+), 73 deletions(-) delete mode 100644 code/src/components/Drink.js create mode 100644 code/src/components/ZodiacSign.js diff --git a/code/src/App.js b/code/src/App.js index 1ee1d7452..55b7248bd 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -2,20 +2,18 @@ import React, { useState } from 'react'; import { Name } from 'components/Name'; import { Food } from 'components/Food'; -import { Drink } from 'components/Drink'; +import { ZodiacSign } from 'components/ZodiacSign'; import { Result } from 'components/Result'; -import { RadioButton } from 'components/Radiobutton'; +/* import { RadioButton } from 'components/Radiobutton'; */ -/* mothership (parent) COMPONENT ? */ export const App = () => { /* Is this VARIBLES ? */ const [step, setStep] = useState(1); const [name, setName] = useState(); const [food, setFood] = useState(); - const [drink, setDrink] = useState(); - /* FUNCTION */ + const [sign, setSign] = useState(); + const handleStepIncrease = () => { - /* Is this also a varible? */ setStep(step + 1); } @@ -25,22 +23,22 @@ export const App = () => {Current step: {step}
+hej {step}
)} ); } - +/* current step hanterar nästa steg knappen */ diff --git a/code/src/components/Drink.js b/code/src/components/Drink.js deleted file mode 100644 index ae5fec16a..000000000 --- a/code/src/components/Drink.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' -import { RadioButton } from './Radiobutton'; - -export const Drink = ({ drink, setDrink }) => { - const handleDrinkChange = (event) => { - setDrink(event.target.value); - } - - return ( - <> -What is your fave drink?
- -What is your fave drink?
- - - */ \ No newline at end of file diff --git a/code/src/components/Food.js b/code/src/components/Food.js index 61e5db4e3..9aefddca2 100644 --- a/code/src/components/Food.js +++ b/code/src/components/Food.js @@ -3,14 +3,13 @@ import React from 'react' /* a food component - food is the PROPS! */ export const Food = ({ food, setFood }) => { /* a function inside a component */ -/* Anna, don´t forget to put a ( after return and a ) to close */ const handleFoodChange = (event) => { /* is this a varible? */ setFood(event.target.value); } return ( <> -What is your fave food?
+What kind of food do you like?
); diff --git a/code/src/components/Name.js b/code/src/components/Name.js index 8ba1f8741..4fd43e504 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -1,14 +1,17 @@ import React from 'react'; -/* is this a child component? (name component) to the parent in app.js? ? */ export const Name = ({ name, setName }) => { const handleNameChange = (event) => { setName(event.target.value); } return ( - <> -What is your name?
- - - ); -} \ No newline at end of file + //Your name is {name}! 💗
-Your favourite food is 🌮{food}, yummi!😋
-Your favourite drink is {drink}, 🍸 delich!
+You are a {sign}
+You like {food}, Yummi!
); } diff --git a/code/src/components/ZodiacSign.js b/code/src/components/ZodiacSign.js new file mode 100644 index 000000000..e3d01cd39 --- /dev/null +++ b/code/src/components/ZodiacSign.js @@ -0,0 +1,29 @@ +import React from 'react' + +export const ZodiacSign = ({ sign, setSign }) => { + const handleZodiacSignChange = (event) => { + setSign(event.target.value); + } + + const zodiacSigns = [ + 'Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', + 'Libra', 'Scorpio', 'Sagittarius', 'Capricorn', 'Aquarius', 'Pisces' + ]; + return ( +You have selected {sign} as your Zodiac Sign.
+ )} +hej {step}
- - + {step < 5 && ( +{step}
+ +What kind of food do you like?
- - - ); -} - -/* what is object destructuring? (food and setFood) */ -/* when do I use the { } ? */ -/* why is the { } in the food component? */ -/* is the type=TEXT the event? */ -/* value and onChange is connecting what? app.js? */ -/* what does return do? */ -/* what does the statehook do? */ -/* what is use state? */ -/* does the parent component always has to be in App.js? */ -/* what is the App.js file? why is it like the mothership of all js.files? */ -/* import { Name } from 'components/Name'; why do I need { crumelurs } here in the import? */ - -/* {step === 1 && ( -How much of a {milk} are you?
+That much {milk} huh?
+ )} +Your name is {name}! 💗
You are a {sign}
-You like {food}, Yummi!
+You are the laid back kind of {sign}
+Wow that´s totally awesome!
); } diff --git a/code/src/components/Selector.js b/code/src/components/Selector.js new file mode 100644 index 000000000..e55d24605 --- /dev/null +++ b/code/src/components/Selector.js @@ -0,0 +1,30 @@ +import React from 'react' + +export const Selector = ({ milk, selector, setSelector }) => { + const handleSelector = (event) => { + setSelector(event.target.value); + } + return ( +What kind of {milk} are you?
+ +What´s your Zodiac sign?
+ + */ \ No newline at end of file diff --git a/code/src/components/ZodiacSign.js b/code/src/components/ZodiacSign.js index e3d01cd39..db449c8c7 100644 --- a/code/src/components/ZodiacSign.js +++ b/code/src/components/ZodiacSign.js @@ -14,14 +14,16 @@ export const ZodiacSign = ({ sign, setSign }) => {Your name is {name}! 💗
You are a {sign}
-You are the laid back kind of {sign}
+You are the {item} laid back kind of {sign}
Wow that´s totally awesome!
); diff --git a/code/src/components/Selector.js b/code/src/components/Selector.js index e55d24605..86a9aaf56 100644 --- a/code/src/components/Selector.js +++ b/code/src/components/Selector.js @@ -1,6 +1,76 @@ -import React from 'react' +import React from 'react'; -export const Selector = ({ milk, selector, setSelector }) => { +const howMuch = ['okey', 'a lot', 'to much', 'im extreme']; + +export const Selector = ({ select, setSelect }) => { + return ( + <> +How much {select} are you?
+ +What´s your Zodiac sign?
- - */ \ No newline at end of file +} */ \ No newline at end of file diff --git a/code/src/components/ZodiacSign.js b/code/src/components/ZodiacSign.js index db449c8c7..c797c60de 100644 --- a/code/src/components/ZodiacSign.js +++ b/code/src/components/ZodiacSign.js @@ -1,31 +1,54 @@ import React from 'react' export const ZodiacSign = ({ sign, setSign }) => { - const handleZodiacSignChange = (event) => { +/* const handleZodiacSignChange = (event) => { setSign(event.target.value); - } + } */ - const zodiacSigns = [ - 'Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', - 'Libra', 'Scorpio', 'Sagittarius', 'Capricorn', 'Aquarius', 'Pisces' - ]; return ( +Okey, so you're a {sign}, cool!
+ )} +Okey, so you´re a {sign}, cool!
- )} - - ); -} -/* NR 2 */ \ No newline at end of file + ))} */ +/* const zodiacSigns = [ + 'Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', + 'Libra', 'Scorpio', 'Sagittarius', 'Capricorn', 'Aquarius', 'Pisces' + ]; */ \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index 1efee662c..1dde69967 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -5,56 +5,70 @@ body { /*background-image: url("https://images.pexels.com/photos/3934512/pexels-photo-3934512.jpeg"); background-size: 50%;*/ } - code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } -.zodiac-container { - border: 1px solid red; - display: flex; - flex-direction: column; +html { text-align: center; - margin: 9px; -} -.zodiac-container h2 { - text-align: center; -} -.zodiac-container p { - border: 1px solid green; - padding: 5px; } -.signs { - display: flex; - flex-direction: column; - justify-content: center; -} - +/* PAGE 1 */ .name-container { display: flex; - border: 1px solid black; + /*border: 1px solid black;*/ flex-direction: column; align-items: center; text-align: center; + padding-top: 175px; } -.name-container h2 { +/*.name-container h2 { border: 2px solid green; -} - -.button { +}*/ + button { text-align: center; + background-color: rgb(255, 255, 255); + color: rgb(38, 38, 38); + width: 79px; + border-radius: 30px; +} +button:hover { +background-color: #89426c; +} +.button p { + color: transparent; } label { padding: 5px; } -.background-image { +/*.background-image { height: 50%; width: 50%; -} +}*/ +/* PAGE 3 */ .signmeeter { text-align: center; +} + +.zodiac-container { + border: 1px solid red; + display: flex; + flex-direction: column; + text-align: center; + margin: 9px; +} +.zodiac-container h2 { + text-align: center; +} +.zodiac-container p { + border: 1px solid green; + padding: 5px; +} +.signs { + display: flex; + flex-direction: column; + justify-content: center; } \ No newline at end of file From 769767dc0ddcc1510c9655f47e0ecc3e488a57fc Mon Sep 17 00:00:00 2001 From: Annaselvine <120709649+AnnaElvine@users.noreply.github.com> Date: Sun, 19 Mar 2023 14:06:39 +0100 Subject: [PATCH 07/20] fixed background and some small stuff --- code/src/App.js | 1 - code/src/components/Name.js | 14 +-- code/src/components/Selector.js | 46 +-------- code/src/components/ZodiacSign.js | 48 +++------- code/src/index.css | 149 ++++++++++++++++++++++++++---- 5 files changed, 157 insertions(+), 101 deletions(-) diff --git a/code/src/App.js b/code/src/App.js index 54a33dce9..41e9b00bb 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -36,7 +36,6 @@ export const App = () => { {step >= 4 && ({step}
diff --git a/code/src/components/Name.js b/code/src/components/Name.js index 0ac097cb4..c2d38b469 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -6,12 +6,14 @@ export const Name = ({ name, setName }) => { } return ( //How much {select} are you?
- -What kind of {milk} are you?
- -Okey, so you're a {sign}, cool!
- )} +Okey, so you're a {sign}, cool!
+ )} +How much of a {milk} are you?
-That much {milk} huh?
- )} -Your name is {name}! 💗
-You are a {sign}
-You are the {item} laid back kind of {sign}
-Wow that´s totally awesome!
+Okey {name}!
+Your zodiac sign is {sign}
+You are the {select} type of {sign}!
+More {sign}´s to the people!!!
Okey, so you're a {sign}, cool!
+Okey, so you're a {sign}, cool!
)}{step}
diff --git a/code/src/components/Name.js b/code/src/components/Name.js index c2d38b469..475a955f7 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -8,7 +8,7 @@ export const Name = ({ name, setName }) => { //It´s good to be {select} too I guess!
+ )} + {select === 'A lot' && ( +Okey, so you're a {select}, cool!
+ )} + {select === 'Im extreme' && ( +Okey, so you're a {select}, cool!
+ )} +It´s good to be {select} too I guess!
+{select} is pretty good too, I guess! 👵🏻
)} {select === 'A lot' && ( -Okey, so you're a {select}, cool!
+Sugar & spice, {select}, is nice! 🌶🔥
)} {select === 'Im extreme' && ( -Okey, so you're a {select}, cool!
+The {select}´s turn´s the world upside down. You go you wild thing 😎
)}