From bb7c521a912b56a4fdd2aafad07dff556ca1b84b Mon Sep 17 00:00:00 2001 From: "tess.aquilon" Date: Sat, 18 Mar 2023 17:08:06 +0100 Subject: [PATCH 01/95] layed foundations for the project --- code/package-lock.json | 49 --------------------------------- code/src/App.js | 52 ++++++++++++++++++++++++++++++++--- code/src/components/Age.js | 14 ++++++++++ code/src/components/Gender.js | 27 ++++++++++++++++++ code/src/components/Name.js | 14 ++++++++++ code/src/components/Result.js | 12 ++++++++ code/src/index.js | 2 ++ package-lock.json | 6 ++++ 8 files changed, 123 insertions(+), 53 deletions(-) create mode 100644 code/src/components/Age.js create mode 100644 code/src/components/Gender.js create mode 100644 code/src/components/Name.js create mode 100644 code/src/components/Result.js create mode 100644 package-lock.json 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..97916cae6 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,53 @@ -import React from 'react'; +/* eslint-disable linebreak-style */ +import React, { useState } from 'react'; +import { Name } from './components/Name'; +import { Age } from './components/Age'; +import { Gender } from './components/Gender'; +import { Result } from './components/Result'; export const App = () => { + const [step, setStep] = useState(1); + const [name, setName] = useState(''); + const [age, setAge] = useState(0); + const [gender, setGender] = useState(''); + const [error, setError] = useState(false); + const handleStepIncrease = () => { + setStep(step + 1); + setError(false); + if (name.length <= 1) { + setError(true); + setStep(1); + } else if (age <= -1) { + setError(true); + setStep(2); + } + } return ( -
- Find me in src/app.js! -
+ <> + {(step === 1) && ( + + )} + {step === 2 && ( + + )} + {step === 3 && ( + + )} + {step === 4 && ( + + )} + {step < 4 && ( + <> +

+ Current step: {step} +

+ + + )} + {error && (

Please fill out this field.

)} + {error && (

Field required.

)} + ); } diff --git a/code/src/components/Age.js b/code/src/components/Age.js new file mode 100644 index 000000000..9fb29a78a --- /dev/null +++ b/code/src/components/Age.js @@ -0,0 +1,14 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +export const Age = ({ age, setAge }) => { + const handleAgeChange = (event) => { + setAge(event.target.value); + } + return ( + <> +

How old are you?

+ + + ); +} \ No newline at end of file diff --git a/code/src/components/Gender.js b/code/src/components/Gender.js new file mode 100644 index 000000000..84076d4e9 --- /dev/null +++ b/code/src/components/Gender.js @@ -0,0 +1,27 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +const genderOptions = ['Male', 'Female', 'Non-binary']; + +export const Gender = ({ gender, setGender }) => { + const handleGenderChange = (event) => { + setGender(event.target.value); + } + return ( +
+

What do you identify as?

+ {genderOptions.map((genderType) => ( + // eslint-disable-next-line jsx-a11y/label-has-associated-control + + ))} +
+ ); +} \ 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..ec787b926 --- /dev/null +++ b/code/src/components/Name.js @@ -0,0 +1,14 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +export const Name = ({ name, setName }) => { + const handleNameChange = (event) => { + setName(event.target.value); + } + return ( + <> +

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..7e8ba11db --- /dev/null +++ b/code/src/components/Result.js @@ -0,0 +1,12 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +export const Result = ({ name, age, gender }) => { + return ( + <> +

Your name is: {name}

+

You are: {age} years old

+

You identify as: {gender}

+ + ) +} \ No newline at end of file diff --git a/code/src/index.js b/code/src/index.js index 99f6d0de7..e05d177b1 100644 --- a/code/src/index.js +++ b/code/src/index.js @@ -1,3 +1,5 @@ +/* eslint-disable linebreak-style */ + import React from 'react'; import { createRoot } from 'react-dom/client' import './index.css' 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 14a1acf508f8bee529b85979339fc6e2e6667a3a Mon Sep 17 00:00:00 2001 From: "tess.aquilon" Date: Sat, 18 Mar 2023 22:12:20 +0100 Subject: [PATCH 02/95] added a dropdown menu --- code/src/App.js | 9 +++++++-- code/src/components/Age.js | 2 +- code/src/components/Country.js | 20 ++++++++++++++++++++ code/src/components/Gender.js | 2 +- code/src/components/Name.js | 2 +- code/src/components/Result.js | 3 ++- 6 files changed, 32 insertions(+), 6 deletions(-) create mode 100644 code/src/components/Country.js diff --git a/code/src/App.js b/code/src/App.js index 97916cae6..76b0f5424 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -4,12 +4,14 @@ import { Name } from './components/Name'; import { Age } from './components/Age'; import { Gender } from './components/Gender'; import { Result } from './components/Result'; +import { Country } from './components/Country'; export const App = () => { const [step, setStep] = useState(1); const [name, setName] = useState(''); const [age, setAge] = useState(0); const [gender, setGender] = useState(''); + const [country, setCountry] = useState(''); const [error, setError] = useState(false); const handleStepIncrease = () => { setStep(step + 1); @@ -34,9 +36,12 @@ export const App = () => { )} {step === 4 && ( - + )} - {step < 4 && ( + {step === 5 && ( + + )} + {step < 5 && ( <>

Current step: {step} diff --git a/code/src/components/Age.js b/code/src/components/Age.js index 9fb29a78a..330d6702c 100644 --- a/code/src/components/Age.js +++ b/code/src/components/Age.js @@ -8,7 +8,7 @@ export const Age = ({ age, setAge }) => { return ( <>

How old are you?

- + ); } \ No newline at end of file diff --git a/code/src/components/Country.js b/code/src/components/Country.js new file mode 100644 index 000000000..abc56a079 --- /dev/null +++ b/code/src/components/Country.js @@ -0,0 +1,20 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +export const Country = ({ country, setCountry }) => { + const handleCountryChange = (event) => { + setCountry(event.target.value); + }; + return ( + <> +

Where do you live?

+ + + ) +} \ No newline at end of file diff --git a/code/src/components/Gender.js b/code/src/components/Gender.js index 84076d4e9..7219af918 100644 --- a/code/src/components/Gender.js +++ b/code/src/components/Gender.js @@ -18,7 +18,7 @@ export const Gender = ({ gender, setGender }) => { value={genderType} onChange={handleGenderChange} checked={gender === genderType} - required /> + required="required" /> {genderType} ))} diff --git a/code/src/components/Name.js b/code/src/components/Name.js index ec787b926..7ed414a85 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -8,7 +8,7 @@ export const Name = ({ name, setName }) => { return ( <>

What is your name?

- + ); } \ No newline at end of file diff --git a/code/src/components/Result.js b/code/src/components/Result.js index 7e8ba11db..76e326fe8 100644 --- a/code/src/components/Result.js +++ b/code/src/components/Result.js @@ -1,12 +1,13 @@ /* eslint-disable linebreak-style */ import React from 'react'; -export const Result = ({ name, age, gender }) => { +export const Result = ({ name, age, gender, country }) => { return ( <>

Your name is: {name}

You are: {age} years old

You identify as: {gender}

+

You live in: {country}

) } \ No newline at end of file From d2c7f340deb71d961f59091e947c0c0aeb9a1306 Mon Sep 17 00:00:00 2001 From: "tess.aquilon" Date: Sat, 18 Mar 2023 23:05:55 +0100 Subject: [PATCH 03/95] added an animation to the start --- code/src/App.js | 26 ++++++++++++++++++-------- code/src/components/Happy.js | 19 +++++++++++++++++++ code/src/components/Result.js | 7 ++++--- code/src/index.css | 24 ++++++++++++++++++++++++ 4 files changed, 65 insertions(+), 11 deletions(-) create mode 100644 code/src/components/Happy.js diff --git a/code/src/App.js b/code/src/App.js index 76b0f5424..f7b562dad 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,10 +1,12 @@ /* eslint-disable linebreak-style */ +/* eslint-disable max-len */ import React, { useState } from 'react'; import { Name } from './components/Name'; import { Age } from './components/Age'; import { Gender } from './components/Gender'; import { Result } from './components/Result'; import { Country } from './components/Country'; +import { Happy } from './components/Happy'; export const App = () => { const [step, setStep] = useState(1); @@ -12,24 +14,29 @@ export const App = () => { const [age, setAge] = useState(0); const [gender, setGender] = useState(''); const [country, setCountry] = useState(''); + const [happy, setHappy] = useState(50); const [error, setError] = useState(false); const handleStepIncrease = () => { setStep(step + 1); setError(false); if (name.length <= 1) { setError(true); - setStep(1); + setStep(2); } else if (age <= -1) { setError(true); - setStep(2); + setStep(3); } } return ( <> {(step === 1) && ( - + <> +

Hi and welcome to my survey!

+

Please begin by filling out your name.

+ + )} - {step === 2 && ( + {(step === 2) && ( )} {step === 3 && ( @@ -39,15 +46,18 @@ export const App = () => { )} {step === 5 && ( - + + )} + {step === 6 && ( + )} - {step < 5 && ( + {step < 6 && ( <>

- Current step: {step} + Current step: {step}/5

)} diff --git a/code/src/components/Happy.js b/code/src/components/Happy.js new file mode 100644 index 000000000..7f7a35046 --- /dev/null +++ b/code/src/components/Happy.js @@ -0,0 +1,19 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +export const Happy = ({ happy, setHappy }) => { + const handleHappyChange = (event) => { + setHappy(event.target.value); + } + return ( +
+

On a range from 0 to 100 percent, how happy are you feeling today?

+ +
+ ); +} \ No newline at end of file diff --git a/code/src/components/Result.js b/code/src/components/Result.js index 76e326fe8..9b2e37142 100644 --- a/code/src/components/Result.js +++ b/code/src/components/Result.js @@ -1,13 +1,14 @@ /* eslint-disable linebreak-style */ import React from 'react'; -export const Result = ({ name, age, gender, country }) => { +export const Result = ({ name, age, gender, country, happy }) => { return ( - <> +

Your name is: {name}

You are: {age} years old

You identify as: {gender}

You live in: {country}

- +

You are currently feeling: {happy}% happy

+
) } \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..9e875c313 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -11,3 +11,27 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +.typewriter { + overflow: hidden; /* Ensures the content is not revealed until the animation */ + border-right: .15em solid orange; /* The typwriter cursor */ + white-space: nowrap; /* Keeps the content on a single line */ + margin: 0 auto; /* Gives that scrolling effect as the typing happens */ + letter-spacing: .15em; /* Adjust as needed */ + animation: + typing 3.5s steps(40, end), + blink-caret .75s step-end infinite; + } + + /* The typing effect */ + @keyframes typing { + from { width: 0 } + to { width: 100% } + } + + /* The typewriter cursor effect */ + @keyframes blink-caret { + from, to { border-color: transparent } + 50% { border-color: orange; } + } + From 2b458d5181c60465549fcde16a20275066972299 Mon Sep 17 00:00:00 2001 From: "tess.aquilon" Date: Tue, 21 Mar 2023 09:47:28 +0100 Subject: [PATCH 04/95] changed theme to madlibs game --- code/src/App.js | 12 ++++++------ code/src/components/Age.js | 14 -------------- code/src/components/Animal.js | 14 ++++++++++++++ code/src/components/Name.js | 2 +- code/src/components/Result.js | 13 +++++++------ 5 files changed, 28 insertions(+), 27 deletions(-) delete mode 100644 code/src/components/Age.js create mode 100644 code/src/components/Animal.js diff --git a/code/src/App.js b/code/src/App.js index f7b562dad..6fc2a525e 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -2,7 +2,7 @@ /* eslint-disable max-len */ import React, { useState } from 'react'; import { Name } from './components/Name'; -import { Age } from './components/Age'; +import { Animal } from './components/Animal'; import { Gender } from './components/Gender'; import { Result } from './components/Result'; import { Country } from './components/Country'; @@ -11,7 +11,7 @@ import { Happy } from './components/Happy'; export const App = () => { const [step, setStep] = useState(1); const [name, setName] = useState(''); - const [age, setAge] = useState(0); + const [animal, setAnimal] = useState(''); const [gender, setGender] = useState(''); const [country, setCountry] = useState(''); const [happy, setHappy] = useState(50); @@ -22,7 +22,7 @@ export const App = () => { if (name.length <= 1) { setError(true); setStep(2); - } else if (age <= -1) { + } else if (animal.length <= 1) { setError(true); setStep(3); } @@ -31,13 +31,13 @@ export const App = () => { <> {(step === 1) && ( <> -

Hi and welcome to my survey!

-

Please begin by filling out your name.

+

Let's play a MADLIBS game.

+

Begin by filling out your name.

)} {(step === 2) && ( - + )} {step === 3 && ( diff --git a/code/src/components/Age.js b/code/src/components/Age.js deleted file mode 100644 index 330d6702c..000000000 --- a/code/src/components/Age.js +++ /dev/null @@ -1,14 +0,0 @@ -/* eslint-disable linebreak-style */ -import React from 'react'; - -export const Age = ({ age, setAge }) => { - const handleAgeChange = (event) => { - setAge(event.target.value); - } - return ( - <> -

How old are you?

- - - ); -} \ No newline at end of file diff --git a/code/src/components/Animal.js b/code/src/components/Animal.js new file mode 100644 index 000000000..1ed2c025a --- /dev/null +++ b/code/src/components/Animal.js @@ -0,0 +1,14 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +export const Animal = ({ animal, setAnimal }) => { + const handleAnimalChange = (event) => { + setAnimal(event.target.value); + } + return ( + <> +

Please choose an animal.

+ + + ); +} \ No newline at end of file diff --git a/code/src/components/Name.js b/code/src/components/Name.js index 7ed414a85..13c9d7764 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -8,7 +8,7 @@ export const Name = ({ name, setName }) => { return ( <>

What is your name?

- + ); } \ No newline at end of file diff --git a/code/src/components/Result.js b/code/src/components/Result.js index 9b2e37142..511c354bd 100644 --- a/code/src/components/Result.js +++ b/code/src/components/Result.js @@ -3,12 +3,13 @@ import React from 'react'; export const Result = ({ name, age, gender, country, happy }) => { return ( -
-

Your name is: {name}

-

You are: {age} years old

-

You identify as: {gender}

-

You live in: {country}

-

You are currently feeling: {happy}% happy

+
+

Your name is: {name} + You are: {age} years old + You identify as: {gender} + You live in: {country} + You are currently feeling: {happy}% happy +

) } \ No newline at end of file From f78a9d6c95ee7796e629a4b3f6a7310cc5b14aec Mon Sep 17 00:00:00 2001 From: "tess.aquilon" Date: Tue, 21 Mar 2023 11:47:58 +0100 Subject: [PATCH 05/95] added font --- code/public/index.html | 5 +++- code/src/App.js | 38 +++++++++++++++---------- code/src/components/Adjective.js | 22 +++++++++++++++ code/src/components/Color.js | 29 +++++++++++++++++++ code/src/components/Country.js | 20 ------------- code/src/components/Gender.js | 27 ------------------ code/src/components/Happy.js | 19 ------------- code/src/components/Job.js | 23 +++++++++++++++ code/src/components/Name.js | 2 +- code/src/components/Result.js | 11 ++++---- code/src/components/Verb.js | 14 ++++++++++ code/src/index.css | 11 ++++++++ code/src/index.js | 3 +- code/src/reset.css | 48 ++++++++++++++++++++++++++++++++ 14 files changed, 182 insertions(+), 90 deletions(-) create mode 100644 code/src/components/Adjective.js create mode 100644 code/src/components/Color.js delete mode 100644 code/src/components/Country.js delete mode 100644 code/src/components/Gender.js delete mode 100644 code/src/components/Happy.js create mode 100644 code/src/components/Job.js create mode 100644 code/src/components/Verb.js create mode 100644 code/src/reset.css diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..41042e815 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -13,7 +13,10 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Technigo React App + + + + 🎮MADLIBS GAME🎮 diff --git a/code/src/App.js b/code/src/App.js index 6fc2a525e..fa587b6dc 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -3,36 +3,40 @@ import React, { useState } from 'react'; import { Name } from './components/Name'; import { Animal } from './components/Animal'; -import { Gender } from './components/Gender'; +import { Color } from './components/Color'; import { Result } from './components/Result'; -import { Country } from './components/Country'; -import { Happy } from './components/Happy'; +import { Job } from './components/Job'; +import { Verb } from './components/Verb'; +import { Adjective } from './components/Adjective'; export const App = () => { const [step, setStep] = useState(1); const [name, setName] = useState(''); const [animal, setAnimal] = useState(''); - const [gender, setGender] = useState(''); - const [country, setCountry] = useState(''); - const [happy, setHappy] = useState(50); + const [job, setJob] = useState(''); + const [color, setColor] = useState(''); + const [verb, setVerb] = useState(''); + const [adjective, setAdjective] = useState(''); const [error, setError] = useState(false); const handleStepIncrease = () => { setStep(step + 1); setError(false); + } + /* const handleError = () => { if (name.length <= 1) { setError(true); setStep(2); } else if (animal.length <= 1) { setError(true); - setStep(3); + setStep(2); } - } + } */ return ( <> {(step === 1) && ( <> -

Let's play a MADLIBS game.

-

Begin by filling out your name.

+

Welcome to the MADLIBS game. Let's play a round.

+

Start by entering your name.

)} @@ -40,18 +44,21 @@ export const App = () => { )} {step === 3 && ( - + )} {step === 4 && ( - + )} {step === 5 && ( - + )} {step === 6 && ( - + + )} + {step === 7 && ( + )} - {step < 6 && ( + {step < 7 && ( <>

Current step: {step}/5 @@ -63,6 +70,7 @@ export const App = () => { )} {error && (

Please fill out this field.

)} {error && (

Field required.

)} + ); } diff --git a/code/src/components/Adjective.js b/code/src/components/Adjective.js new file mode 100644 index 000000000..92b1e08e7 --- /dev/null +++ b/code/src/components/Adjective.js @@ -0,0 +1,22 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable max-len */ +import React from 'react'; + +const adjectives = ['happy', 'sad', 'spicy', 'flippin', 'darn', 'cheesy', 'chaotic', 'lazy', 'cruel', 'cringe-y', 'hot']; + +export const Adjective = ({ adjective, setAdjective }) => { + const generatedAdjective = () => { + const randomIndex = Math.floor(Math.random() * adjectives.length); + setAdjective(adjectives[randomIndex]); + } + return ( + <> + + + + + ) +} + diff --git a/code/src/components/Color.js b/code/src/components/Color.js new file mode 100644 index 000000000..8d476a6c9 --- /dev/null +++ b/code/src/components/Color.js @@ -0,0 +1,29 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +const colorOptions = ['red', 'yellow', 'pink', 'green', 'orange', 'purple', 'blue']; + +export const Color = ({ color, setColor }) => { + const handleColorChange = (event) => { + setColor(event.target.value); + } + return ( +
+

Please choose a color.

+
+ {colorOptions.map((colorType) => ( + // eslint-disable-next-line jsx-a11y/label-has-associated-control + + ))} +
+
+ ); +} \ No newline at end of file diff --git a/code/src/components/Country.js b/code/src/components/Country.js deleted file mode 100644 index abc56a079..000000000 --- a/code/src/components/Country.js +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable linebreak-style */ -import React from 'react'; - -export const Country = ({ country, setCountry }) => { - const handleCountryChange = (event) => { - setCountry(event.target.value); - }; - return ( - <> -

Where do you live?

- - - ) -} \ No newline at end of file diff --git a/code/src/components/Gender.js b/code/src/components/Gender.js deleted file mode 100644 index 7219af918..000000000 --- a/code/src/components/Gender.js +++ /dev/null @@ -1,27 +0,0 @@ -/* eslint-disable linebreak-style */ -import React from 'react'; - -const genderOptions = ['Male', 'Female', 'Non-binary']; - -export const Gender = ({ gender, setGender }) => { - const handleGenderChange = (event) => { - setGender(event.target.value); - } - return ( -
-

What do you identify as?

- {genderOptions.map((genderType) => ( - // eslint-disable-next-line jsx-a11y/label-has-associated-control - - ))} -
- ); -} \ No newline at end of file diff --git a/code/src/components/Happy.js b/code/src/components/Happy.js deleted file mode 100644 index 7f7a35046..000000000 --- a/code/src/components/Happy.js +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-disable linebreak-style */ -import React from 'react'; - -export const Happy = ({ happy, setHappy }) => { - const handleHappyChange = (event) => { - setHappy(event.target.value); - } - return ( -
-

On a range from 0 to 100 percent, how happy are you feeling today?

- -
- ); -} \ No newline at end of file diff --git a/code/src/components/Job.js b/code/src/components/Job.js new file mode 100644 index 000000000..194982fc2 --- /dev/null +++ b/code/src/components/Job.js @@ -0,0 +1,23 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +export const Job = ({ job, setJob }) => { + const handleJobChange = (event) => { + setJob(event.target.value); + }; + return ( + <> +

Please select a profession

+ + + ) +} \ No newline at end of file diff --git a/code/src/components/Name.js b/code/src/components/Name.js index 13c9d7764..db25b59fe 100644 --- a/code/src/components/Name.js +++ b/code/src/components/Name.js @@ -8,7 +8,7 @@ export const Name = ({ name, setName }) => { return ( <>

What is your name?

- + ); } \ No newline at end of file diff --git a/code/src/components/Result.js b/code/src/components/Result.js index 511c354bd..99a9c7872 100644 --- a/code/src/components/Result.js +++ b/code/src/components/Result.js @@ -1,14 +1,13 @@ /* eslint-disable linebreak-style */ +/* eslint-disable max-len */ + import React from 'react'; -export const Result = ({ name, age, gender, country, happy }) => { +export const Result = ({ name, animal, job, color, verb, adjective }) => { return (
-

Your name is: {name} - You are: {age} years old - You identify as: {gender} - You live in: {country} - You are currently feeling: {happy}% happy +

Here we go, {name}! + The {animal} wanted to be a {job}, but turned a funny shade of {color} after trying to {verb}! What a {adjective} shame.

) diff --git a/code/src/components/Verb.js b/code/src/components/Verb.js new file mode 100644 index 000000000..0ce94b90d --- /dev/null +++ b/code/src/components/Verb.js @@ -0,0 +1,14 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +export const Verb = ({ verb, setVerb }) => { + const handleVerbChange = (event) => { + setVerb(event.target.value); + } + return ( + <> +

Please enter a verb.

+ + + ); +} \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index 9e875c313..88f8a3895 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -13,6 +13,8 @@ code { } .typewriter { + font-family: 'Audiowide', cursive; + font-size: 48px; overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ @@ -35,3 +37,12 @@ code { 50% { border-color: orange; } } +input[type="radio"] { + display: none; + } + +.color-options { + display: flex; + gap: 10px; + flex-wrap: wrap; +} \ No newline at end of file diff --git a/code/src/index.js b/code/src/index.js index e05d177b1..b4d87b6c6 100644 --- a/code/src/index.js +++ b/code/src/index.js @@ -2,9 +2,10 @@ import React from 'react'; import { createRoot } from 'react-dom/client' +import './reset.css' import './index.css' import { App } from './App' const container = document.getElementById('root'); const root = createRoot(container); -root.render(); +root.render(); \ No newline at end of file diff --git a/code/src/reset.css b/code/src/reset.css new file mode 100644 index 000000000..af944401f --- /dev/null +++ b/code/src/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file From 84210cc7e6399df4a4a4239d4505ee8db74911b6 Mon Sep 17 00:00:00 2001 From: "tess.aquilon" Date: Tue, 21 Mar 2023 18:59:46 +0100 Subject: [PATCH 06/95] added a Lottie animation + more --- code/package-lock.json | 171 ++++++++++++++++++++++++++++- code/package.json | 2 + code/public/index.html | 1 + code/src/App.js | 36 +++--- code/src/assets/lf20_DnLK6k.json | 1 + code/src/assets/lf20_nw3e7mtx.json | 1 + code/src/components/Color.js | 4 +- code/src/components/Name.js | 2 +- code/src/index.css | 70 +++++++++++- 9 files changed, 267 insertions(+), 21 deletions(-) create mode 100644 code/src/assets/lf20_DnLK6k.json create mode 100644 code/src/assets/lf20_nw3e7mtx.json diff --git a/code/package-lock.json b/code/package-lock.json index 3a317936e..b855395e7 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -9,6 +9,8 @@ "version": "1.0.0", "dependencies": { "@babel/eslint-parser": "^7.18.9", + "@lottiefiles/lottie-player": "^1.7.1", + "@lottiefiles/react-lottie-player": "^3.5.3", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", @@ -3043,6 +3045,42 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.0.0.tgz", + "integrity": "sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw==" + }, + "node_modules/@lit/reactive-element": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz", + "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "node_modules/@lottiefiles/lottie-player": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@lottiefiles/lottie-player/-/lottie-player-1.7.1.tgz", + "integrity": "sha512-U2gokX7ZXHCD+DgRXfaFyxuVsc0SYfC2mXndnCVwGvpdApUGqvpZovihdB8p9fDKU2SBWLWBq38CuJTVz6k3Hg==", + "dependencies": { + "@types/pako": "^1.0.1", + "lit": "^2.1.2", + "lottie-web": "^5.10.0", + "pako": "^2.0.4", + "resize-observer-polyfill": "^1.5.1" + } + }, + "node_modules/@lottiefiles/react-lottie-player": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/@lottiefiles/react-lottie-player/-/react-lottie-player-3.5.3.tgz", + "integrity": "sha512-6pGbiTMjGnPddR1ur8M/TIDCiogZMc1aKIUbMEKXKAuNeYwZ2hvqwBJ+w5KRm88ccdcU88C2cGyLVsboFlSdVQ==", + "dependencies": { + "lottie-web": "^5.10.2" + }, + "peerDependencies": { + "react": "16 - 18" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3684,6 +3722,11 @@ "integrity": "sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==", "dev": true }, + "node_modules/@types/pako": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.4.tgz", + "integrity": "sha512-Z+5bJSm28EXBSUJEgx29ioWeEEHUh6TiMkZHDhLwjc9wVFH+ressbkmX6waUZc5R3Gobn4Qu5llGxaoflZ+yhA==" + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -3766,8 +3809,7 @@ "node_modules/@types/trusted-types": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", - "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", - "dev": true + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, "node_modules/@types/ws": { "version": "8.5.3", @@ -11656,6 +11698,33 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "node_modules/lit": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.6.1.tgz", + "integrity": "sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.2.0", + "lit-html": "^2.6.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz", + "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-html": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.6.1.tgz", + "integrity": "sha512-Z3iw+E+3KKFn9t2YKNjsXNEu/LRLI98mtH/C6lnFg7kvaqPIzPn124Yd4eT/43lyqrejpc5Wb6BHq3fdv4S8Rw==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -11739,6 +11808,11 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-web": { + "version": "5.10.2", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.2.tgz", + "integrity": "sha512-d0PFIGiwuMsJYaF4uPo+qG8dEorlI+xFI2zrrFtE1bGO4WoLIz+NjremxEq1swpR7juR10aeOtmNh3d6G3ub0A==" + }, "node_modules/lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -12407,6 +12481,11 @@ "node": ">=6" } }, + "node_modules/pako": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", + "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==" + }, "node_modules/param-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", @@ -14687,6 +14766,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -19470,6 +19554,39 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==", "dev": true }, + "@lit-labs/ssr-dom-shim": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.0.0.tgz", + "integrity": "sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw==" + }, + "@lit/reactive-element": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz", + "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "@lottiefiles/lottie-player": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/@lottiefiles/lottie-player/-/lottie-player-1.7.1.tgz", + "integrity": "sha512-U2gokX7ZXHCD+DgRXfaFyxuVsc0SYfC2mXndnCVwGvpdApUGqvpZovihdB8p9fDKU2SBWLWBq38CuJTVz6k3Hg==", + "requires": { + "@types/pako": "^1.0.1", + "lit": "^2.1.2", + "lottie-web": "^5.10.0", + "pako": "^2.0.4", + "resize-observer-polyfill": "^1.5.1" + } + }, + "@lottiefiles/react-lottie-player": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/@lottiefiles/react-lottie-player/-/react-lottie-player-3.5.3.tgz", + "integrity": "sha512-6pGbiTMjGnPddR1ur8M/TIDCiogZMc1aKIUbMEKXKAuNeYwZ2hvqwBJ+w5KRm88ccdcU88C2cGyLVsboFlSdVQ==", + "requires": { + "lottie-web": "^5.10.2" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -19939,6 +20056,11 @@ "integrity": "sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==", "dev": true }, + "@types/pako": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.4.tgz", + "integrity": "sha512-Z+5bJSm28EXBSUJEgx29ioWeEEHUh6TiMkZHDhLwjc9wVFH+ressbkmX6waUZc5R3Gobn4Qu5llGxaoflZ+yhA==" + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -20021,8 +20143,7 @@ "@types/trusted-types": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", - "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", - "dev": true + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, "@types/ws": { "version": "8.5.3", @@ -25847,6 +25968,33 @@ "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, + "lit": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.6.1.tgz", + "integrity": "sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==", + "requires": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.2.0", + "lit-html": "^2.6.0" + } + }, + "lit-element": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz", + "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "lit-html": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.6.1.tgz", + "integrity": "sha512-Z3iw+E+3KKFn9t2YKNjsXNEu/LRLI98mtH/C6lnFg7kvaqPIzPn124Yd4eT/43lyqrejpc5Wb6BHq3fdv4S8Rw==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + }, "loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -25915,6 +26063,11 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, + "lottie-web": { + "version": "5.10.2", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.2.tgz", + "integrity": "sha512-d0PFIGiwuMsJYaF4uPo+qG8dEorlI+xFI2zrrFtE1bGO4WoLIz+NjremxEq1swpR7juR10aeOtmNh3d6G3ub0A==" + }, "lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -26402,6 +26555,11 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, + "pako": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", + "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==" + }, "param-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", @@ -27925,6 +28083,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", diff --git a/code/package.json b/code/package.json index 7214c8fde..5d5e34fe4 100644 --- a/code/package.json +++ b/code/package.json @@ -4,6 +4,8 @@ "private": true, "dependencies": { "@babel/eslint-parser": "^7.18.9", + "@lottiefiles/lottie-player": "^1.7.1", + "@lottiefiles/react-lottie-player": "^3.5.3", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", diff --git a/code/public/index.html b/code/public/index.html index 41042e815..a3c0895f9 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -16,6 +16,7 @@ + 🎮MADLIBS GAME🎮 diff --git a/code/src/App.js b/code/src/App.js index fa587b6dc..57fada918 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,6 +1,7 @@ /* eslint-disable linebreak-style */ /* eslint-disable max-len */ import React, { useState } from 'react'; +import { Player, Controls } from '@lottiefiles/react-lottie-player'; import { Name } from './components/Name'; import { Animal } from './components/Animal'; import { Color } from './components/Color'; @@ -32,13 +33,23 @@ export const App = () => { } } */ return ( - <> +
{(step === 1) && ( - <> -

Welcome to the MADLIBS game. Let's play a round.

-

Start by entering your name.

- - +
+