From 775c5e2dca715788927de0e800410f25339bf2ca Mon Sep 17 00:00:00 2001 From: AntoniaGranit Date: Tue, 14 Mar 2023 15:36:14 +0200 Subject: [PATCH 01/11] add components and finish basic code --- code/package-lock.json | 49 ----------------------------- code/src/App.js | 9 +++++- code/src/Components/Checkbox.js | 19 +++++++++++ code/src/Components/Name.js | 16 ++++++++++ code/src/Components/Radiobuttons.js | 45 ++++++++++++++++++++++++++ code/src/Components/Select.js | 20 ++++++++++++ code/src/Components/Summary.js | 0 code/src/Components/Survey.js | 0 8 files changed, 108 insertions(+), 50 deletions(-) create mode 100644 code/src/Components/Checkbox.js create mode 100644 code/src/Components/Name.js create mode 100644 code/src/Components/Radiobuttons.js create mode 100644 code/src/Components/Select.js create mode 100644 code/src/Components/Summary.js create mode 100644 code/src/Components/Survey.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..e4f0631da 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,16 @@ import React from 'react'; +import { Name } from './Components/Name'; +import { Select } from './Components/Select'; +import { Checkbox } from './Components/Checkbox'; +import { Radiobuttons } from './Components/Radiobuttons'; export const App = () => { return (
- Find me in src/app.js! + + setCheck(event.target.checked)} /> + + + ); +}; \ 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..b7575071f --- /dev/null +++ b/code/src/Components/Name.js @@ -0,0 +1,16 @@ +import React, { useState } from 'react'; +import '../index.css'; + +export const Name = () => { + const [name, setName] = useState('') + + return ( +
+

Name:

+ setName(event.target.value)} + value={name} /> +
+ ); +}; \ No newline at end of file diff --git a/code/src/Components/Radiobuttons.js b/code/src/Components/Radiobuttons.js new file mode 100644 index 000000000..fe24fded7 --- /dev/null +++ b/code/src/Components/Radiobuttons.js @@ -0,0 +1,45 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ +import React, { useState } from 'react'; +import '../index.css'; + +export const Radiobuttons = () => { + const [ageGroup, setAgeGroup] = useState() + + return ( +
+

Age group:

+ + + + +
+ ); +}; \ No newline at end of file diff --git a/code/src/Components/Select.js b/code/src/Components/Select.js new file mode 100644 index 000000000..009563b73 --- /dev/null +++ b/code/src/Components/Select.js @@ -0,0 +1,20 @@ +import React, { useState } from 'react'; +import '../index.css'; + +export const Select = () => { + const [location, setLocation] = useState('') + + return ( +
+ +
+ ); +}; \ No newline at end of file diff --git a/code/src/Components/Summary.js b/code/src/Components/Summary.js new file mode 100644 index 000000000..e69de29bb diff --git a/code/src/Components/Survey.js b/code/src/Components/Survey.js new file mode 100644 index 000000000..e69de29bb From 2eb2a21fb84319d653027ebc7e39463b512a1adc Mon Sep 17 00:00:00 2001 From: AntoniaGranit Date: Wed, 15 Mar 2023 14:01:00 +0200 Subject: [PATCH 02/11] survey progress --- code/public/index.html | 2 +- code/src/App.js | 51 ++++++++++++++++++++++++----- code/src/Components/Checkbox.js | 11 ++++--- code/src/Components/Location.js | 33 +++++++++++++++++++ code/src/Components/Name.js | 17 ++++++---- code/src/Components/Radiobuttons.js | 45 ------------------------- code/src/Components/Select.js | 23 +++++++------ code/src/Components/Summary.js | 12 +++++++ code/src/Components/Survey.js | 0 code/src/index.css | 14 ++++++++ 10 files changed, 132 insertions(+), 76 deletions(-) create mode 100644 code/src/Components/Location.js delete mode 100644 code/src/Components/Radiobuttons.js delete mode 100644 code/src/Components/Survey.js diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..b2dc60965 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -13,7 +13,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Technigo React App + The Afrobeats Playlist Survey diff --git a/code/src/App.js b/code/src/App.js index e4f0631da..83de940d6 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,16 +1,51 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Name } from './Components/Name'; import { Select } from './Components/Select'; import { Checkbox } from './Components/Checkbox'; -import { Radiobuttons } from './Components/Radiobuttons'; +import { Location } from './Components/Location'; +import { Summary } from './Components/Summary' export const App = () => { + const [step, setStep] = useState(1) + + const handleStepIncrease = () => { + setStep(step + 1); + } + + const [name, setName] = useState(''); + const [reason, setReason] = useState(''); + const [check, setCheck] = useState(false); + const [location, setLocation] = useState(''); + return ( -
- - + )} + {step === 3 && ( + + )} + {step === 4 && ( + + )} + {step === 5 && ( + + )} + {step <= 4 && ( +
+ +
+ )} + {step <= 4 && ( +
+

{step}/5

+
+ )} +
+ ); } diff --git a/code/src/Components/Checkbox.js b/code/src/Components/Checkbox.js index 1324e97c6..37a45859c 100644 --- a/code/src/Components/Checkbox.js +++ b/code/src/Components/Checkbox.js @@ -1,10 +1,11 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ -import React, { useState } from 'react'; +import React from 'react'; import '../index.css'; -export const Checkbox = () => { - const [check, setCheck] = useState(false) - +export const Checkbox = ({ check, setCheck }) => { + const handleCheckbox = (event) => { + setCheck(event.target.checked); + } return (
); diff --git a/code/src/Components/Location.js b/code/src/Components/Location.js new file mode 100644 index 000000000..74b6fd94f --- /dev/null +++ b/code/src/Components/Location.js @@ -0,0 +1,33 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ +import React from 'react'; +import '../index.css'; + +export const Location = ({ location, setLocation }) => { + const handleLocationChange = (event) => { + setLocation(event.target.value) + } + + return ( +
+

Where do you enjoy listening to music the most?

+ +
+ +
+ ); +}; \ No newline at end of file diff --git a/code/src/Components/Name.js b/code/src/Components/Name.js index b7575071f..fab798e73 100644 --- a/code/src/Components/Name.js +++ b/code/src/Components/Name.js @@ -1,16 +1,19 @@ -import React, { useState } from 'react'; +/* eslint-disable react/no-unescaped-entities */ +import React from 'react'; import '../index.css'; -export const Name = () => { - const [name, setName] = useState('') +export const Name = ({ name, setName }) => { + const handleNameChange = (event) => { + setName(event.target.value); + } return (
-

Name:

- Let's begin! What is your name?

+ Name: setName(event.target.value)} - value={name} /> + value={name} + onChange={handleNameChange} />
); }; \ No newline at end of file diff --git a/code/src/Components/Radiobuttons.js b/code/src/Components/Radiobuttons.js deleted file mode 100644 index fe24fded7..000000000 --- a/code/src/Components/Radiobuttons.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint-disable jsx-a11y/label-has-associated-control */ -import React, { useState } from 'react'; -import '../index.css'; - -export const Radiobuttons = () => { - const [ageGroup, setAgeGroup] = useState() - - return ( -
-

Age group:

- - - - -
- ); -}; \ No newline at end of file diff --git a/code/src/Components/Select.js b/code/src/Components/Select.js index 009563b73..0b767db49 100644 --- a/code/src/Components/Select.js +++ b/code/src/Components/Select.js @@ -1,19 +1,22 @@ -import React, { useState } from 'react'; +import React from 'react'; import '../index.css'; -export const Select = () => { - const [location, setLocation] = useState('') +export const Select = ({ name, reason, setReason }) => { + const handleReasonSelect = (event) => { + setReason(event.target.value) + } return (
+

Hi there, {name}! What kind of musical tempo do you prefer? + For what reason do you like to listen to music? +

); diff --git a/code/src/Components/Summary.js b/code/src/Components/Summary.js index e69de29bb..dac758e2f 100644 --- a/code/src/Components/Summary.js +++ b/code/src/Components/Summary.js @@ -0,0 +1,12 @@ +import React from 'react'; +import '../index.css'; + +export const Summary = ({ name, reason, location }) => { + return ( +
+

Alright, {name}!

+

You listen to music to {reason}.

+

You prefer to listen to music {location}.

+
+ ) +} \ No newline at end of file diff --git a/code/src/Components/Survey.js b/code/src/Components/Survey.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..ac92c8396 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -5,9 +5,23 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: aqua; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + + +.survey-wrapper { + background-color: aquamarine; + display: flex; +flex-direction: column; +justify-content: center; +border: 1px solid black; +} + +.next-question-btn { + width: 70px; +} \ No newline at end of file From 7ee6f77eecf6a3a76ae79e975970c92445bbcd53 Mon Sep 17 00:00:00 2001 From: AntoniaGranit Date: Wed, 15 Mar 2023 21:47:32 +0200 Subject: [PATCH 03/11] questions finished, start on results and styling --- code/src/App.js | 57 ++++++-- code/src/Components/Checkbox.js | 173 ++++++++++++++++++++++-- code/src/Components/Feel.js | 42 ++++++ code/src/Components/Location.js | 54 ++++---- code/src/Components/Name.js | 26 ++-- code/src/Components/Results/Alte.js | 33 +++++ code/src/Components/Results/Amapiano.js | 0 code/src/Components/Results/Classic.js | 0 code/src/Components/Results/RB.js | 0 code/src/Components/Select.js | 34 +++-- code/src/Components/Summary.js | 10 +- code/src/Components/checkbox.css | 20 +++ code/src/index.css | 40 +++++- 13 files changed, 406 insertions(+), 83 deletions(-) create mode 100644 code/src/Components/Feel.js create mode 100644 code/src/Components/Results/Alte.js create mode 100644 code/src/Components/Results/Amapiano.js create mode 100644 code/src/Components/Results/Classic.js create mode 100644 code/src/Components/Results/RB.js create mode 100644 code/src/Components/checkbox.css diff --git a/code/src/App.js b/code/src/App.js index 83de940d6..4630277d6 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -3,44 +3,71 @@ import { Name } from './Components/Name'; import { Select } from './Components/Select'; import { Checkbox } from './Components/Checkbox'; import { Location } from './Components/Location'; -import { Summary } from './Components/Summary' +// import { Summary } from './Components/Summary'; +import { Feel } from './Components/Feel'; +import { Alte } from './Components/Results/Alte' export const App = () => { const [step, setStep] = useState(1) + const [name, setName] = useState(''); + const [reason, setReason] = useState(''); + const [adjectivesArray, setAdjectivesArray] = useState([]) + const [location, setLocation] = useState(''); + const [feel, setFeel] = useState(''); const handleStepIncrease = () => { setStep(step + 1); } - const [name, setName] = useState(''); - const [reason, setReason] = useState(''); - const [check, setCheck] = useState(false); - const [location, setLocation] = useState(''); + const onAdjectivesArrayChange = (adjective) => { + if (adjectivesArray.includes(adjective)) { + const filteredAdjectivesArray = adjectivesArray.filter(() => { + return adjectivesArray !== adjective + }) + setAdjectivesArray(filteredAdjectivesArray) + } else { + setAdjectivesArray([...adjectivesArray, adjective]) + } + } return (
{step === 1 && ( - + )} {step === 2 && ( - )} {step === 3 && ( - + )} {step === 4 && ( - + )} {step === 5 && ( - + )} - {step <= 4 && ( -
- -
+ {step === 6 && ( + )} - {step <= 4 && ( + {step <= 5 && (

{step}/5

diff --git a/code/src/Components/Checkbox.js b/code/src/Components/Checkbox.js index 37a45859c..f2c0e3f67 100644 --- a/code/src/Components/Checkbox.js +++ b/code/src/Components/Checkbox.js @@ -1,20 +1,167 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ import React from 'react'; import '../index.css'; +import './checkbox.css'; -export const Checkbox = ({ check, setCheck }) => { - const handleCheckbox = (event) => { - setCheck(event.target.checked); - } +export const Checkbox = (props) => { + const { step, adjectivesArray, onAdjectivesArrayChange, handleStepIncrease } = props + console.log(step); return ( -
- -
+
+

Tick all the adjectives that sound good to you.

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
); }; \ No newline at end of file diff --git a/code/src/Components/Feel.js b/code/src/Components/Feel.js new file mode 100644 index 000000000..0d4743327 --- /dev/null +++ b/code/src/Components/Feel.js @@ -0,0 +1,42 @@ +/* eslint-disable react/button-has-type */ +/* eslint-disable react/no-unescaped-entities */ +/* eslint-disable jsx-a11y/label-has-associated-control */ +import React from 'react'; +import '../index.css'; + +export const Feel = ({ step, feel, setFeel, handleStepIncrease }) => { + const handleFeelChange = (event) => { + setFeel(event.target.value) + } + console.log(step) + return ( + <> +
+

What "feel" of music suits your fancy?

+ +
+ +
+ + + ); +}; \ No newline at end of file diff --git a/code/src/Components/Location.js b/code/src/Components/Location.js index 74b6fd94f..9bd29d13c 100644 --- a/code/src/Components/Location.js +++ b/code/src/Components/Location.js @@ -1,33 +1,41 @@ +/* eslint-disable react/button-has-type */ /* eslint-disable jsx-a11y/label-has-associated-control */ import React from 'react'; import '../index.css'; -export const Location = ({ location, setLocation }) => { +export const Location = ({ step, location, setLocation, handleStepIncrease }) => { const handleLocationChange = (event) => { setLocation(event.target.value) } - + console.log(step); return ( -
-

Where do you enjoy listening to music the most?

- -
- -
+ <> +
+

Where do you enjoy listening to music the most?

+ +
+ +
+ + ); }; \ No newline at end of file diff --git a/code/src/Components/Name.js b/code/src/Components/Name.js index fab798e73..265efd5f2 100644 --- a/code/src/Components/Name.js +++ b/code/src/Components/Name.js @@ -1,19 +1,29 @@ +/* eslint-disable react/button-has-type */ /* eslint-disable react/no-unescaped-entities */ import React from 'react'; import '../index.css'; -export const Name = ({ name, setName }) => { +export const Name = ({ step, name, setName, handleStepIncrease }) => { const handleNameChange = (event) => { setName(event.target.value); } + console.log(step); return ( -
-

Let's begin! What is your name?

- Name: -
+
+
+

Let's begin! What is your name?

+ Name: +
+ +
); }; \ No newline at end of file diff --git a/code/src/Components/Results/Alte.js b/code/src/Components/Results/Alte.js new file mode 100644 index 000000000..707d8277b --- /dev/null +++ b/code/src/Components/Results/Alte.js @@ -0,0 +1,33 @@ +/* eslint-disable react/no-unescaped-entities */ +import React from 'react'; +import '../../index.css'; + +export const Alte = ({ name, reason, location, feel }) => { + return ( +
+
+

You got... alté!

+

Great job, {name}! The results are in.

+

You often find yourself listening to music to {reason}, and + your favourite place to listen to music is {location}. + Most music you listen to could be described as {feel}. +

+

+ For this reason, I've curated a playlist of alternative afrobeats, + or alté, for you. Alté is a contemporary subgenre of Afrobeats where + artistic self-expression and individuality is key. Learn more about alté here! +

+
+
+