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/public/index.html b/code/public/index.html index e6730aa66..407e2df55 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 + Oscar's Technigo React App diff --git a/code/src/App.js b/code/src/App.js index f2007d229..d22c9f7fd 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,48 @@ -import React from 'react'; +/* eslint-disable linebreak-style */ +/* eslint-disable global-require */ +/* eslint-disable react-hooks/rules-of-hooks */ +import React, { useState } from 'react'; +import { Movie } from 'components/Movie'; +import { Show } from 'components/Show'; +import { Name } from './components/Name' +import { Results } from './components/Results'; +import { Genre } from './components/Genre'; export const App = () => { + const [step, setStep] = useState(1) + const [name, setName] = useState('') + const [genre, setGenre] = useState('') + const [movie, setMovie] = useState('') + const [show, setShow] = useState('') + + const handleStepIncrease = () => { + setStep(step + 1) + } + return ( -
- Find me in src/app.js! -
- ); +
+ {step === 1 && ( + + )} + {step === 2 && ( + + )} + {step === 3 && ( + + )} + {step === 4 && ( + + )} + {step >= 5 && ( + + )} + + {step < 5 && ( + <> +

Current page: {step}

+ + + )} + + ) } diff --git a/code/src/components/Assets/aot.jpg b/code/src/components/Assets/aot.jpg new file mode 100644 index 000000000..6f5ff22ee Binary files /dev/null and b/code/src/components/Assets/aot.jpg differ diff --git a/code/src/components/Assets/arrival.jpg b/code/src/components/Assets/arrival.jpg new file mode 100644 index 000000000..4b9ff496b Binary files /dev/null and b/code/src/components/Assets/arrival.jpg differ diff --git a/code/src/components/Assets/everything-everywhere.jpg b/code/src/components/Assets/everything-everywhere.jpg new file mode 100644 index 000000000..7f46b616b Binary files /dev/null and b/code/src/components/Assets/everything-everywhere.jpg differ diff --git a/code/src/components/Assets/game-night.jpg b/code/src/components/Assets/game-night.jpg new file mode 100644 index 000000000..18c1e915d Binary files /dev/null and b/code/src/components/Assets/game-night.jpg differ diff --git a/code/src/components/Assets/love-actually.jpg b/code/src/components/Assets/love-actually.jpg new file mode 100644 index 000000000..9cd19dcb8 Binary files /dev/null and b/code/src/components/Assets/love-actually.jpg differ diff --git a/code/src/components/Assets/mad-men.jpg b/code/src/components/Assets/mad-men.jpg new file mode 100644 index 000000000..e00240065 Binary files /dev/null and b/code/src/components/Assets/mad-men.jpg differ diff --git a/code/src/components/Assets/movies-background.jpg b/code/src/components/Assets/movies-background.jpg new file mode 100644 index 000000000..42c00c962 Binary files /dev/null and b/code/src/components/Assets/movies-background.jpg differ diff --git a/code/src/components/Assets/new-girl.jpg b/code/src/components/Assets/new-girl.jpg new file mode 100644 index 000000000..77b1a8c87 Binary files /dev/null and b/code/src/components/Assets/new-girl.jpg differ diff --git a/code/src/components/Assets/normal-people.jpg b/code/src/components/Assets/normal-people.jpg new file mode 100644 index 000000000..c94968721 Binary files /dev/null and b/code/src/components/Assets/normal-people.jpg differ diff --git a/code/src/components/Genre.css b/code/src/components/Genre.css new file mode 100644 index 000000000..1c2c12207 --- /dev/null +++ b/code/src/components/Genre.css @@ -0,0 +1,4 @@ +.genreDropdown { + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/code/src/components/Genre.js b/code/src/components/Genre.js new file mode 100644 index 000000000..02160b07c --- /dev/null +++ b/code/src/components/Genre.js @@ -0,0 +1,55 @@ +/* eslint-disable linebreak-style */ +import React from 'react' +import './Genre.css' + +export const Genre = ({ genre, setGenre }) => { + const handleGenreChange = (event) => { + setGenre(event.target.value) + } + return ( + <> +
+

What is your favorite genre of movie/tv show?

+
+
+ + +
+ + ) +} + +/* + +const options = [ + { value: 'action', label: 'Action' }, + { value: 'drama', label: 'Drama' }, + { value: 'comedy', label: 'Comedy' }, + { value: 'romance', label: 'Romance' } + ] + + export const Genre = ({ genre, setGenre }) => { + const handleGenreChange = (event) => { + setGenre(event.target.value) + } + return ( +
+ +
+ ) + } */ \ No newline at end of file diff --git a/code/src/components/Movie.css b/code/src/components/Movie.css new file mode 100644 index 000000000..3680cc401 --- /dev/null +++ b/code/src/components/Movie.css @@ -0,0 +1,30 @@ +.movieFav { + display: flex; + justify-content: space-around; + flex-direction: column; + margin: 1rem; + gap: 1rem; + padding: 1rem; + object-fit: contain; +} + +.arrival img { + display: flex; + width: 200px; + height: 250px; +} +.loveActually img { + display: flex; + width: 200px; + height: 250px; +} +.eeaao img { + display: flex; + width: 200px; + height: 250px; +} +.gameNight img { + display: flex; + width: 200px; + height: 250px; +} \ No newline at end of file diff --git a/code/src/components/Movie.js b/code/src/components/Movie.js new file mode 100644 index 000000000..f0bc26da4 --- /dev/null +++ b/code/src/components/Movie.js @@ -0,0 +1,40 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable global-require */ +import React from 'react' +import './Movie.css' + +export const Movie = ({ movie, setMovie }) => { + const handleMovieChange = (event) => ( + setMovie(event.target.value) + ) + return ( + <> +

What is your favorite movie?

+
+
+ Arrival Movie + + Arrival +
+
+ Love Actually Movie + + Love Actually +
+
+ Everything, Everywhere, All at Once Movie + + Everything, Everywhere, All At Once +
+
+ Game Night Movie + + Game Night +
+
+ + ) +} \ No newline at end of file diff --git a/code/src/components/Name.css b/code/src/components/Name.css new file mode 100644 index 000000000..e69de29bb diff --git a/code/src/components/Name.js b/code/src/components/Name.js new file mode 100644 index 000000000..6819921bf --- /dev/null +++ b/code/src/components/Name.js @@ -0,0 +1,17 @@ +/* eslint-disable linebreak-style */ +import React from 'react' + +export const Name = ({ name, setName }) => { + const handleNameChange = (event) => { + setName(event.target.value) + event.preventDefault() + } + return ( + <> +

What is your name?

+ + + + ) +} + diff --git a/code/src/components/Results.css b/code/src/components/Results.css new file mode 100644 index 000000000..e69de29bb diff --git a/code/src/components/Results.js b/code/src/components/Results.js new file mode 100644 index 000000000..32b31fa90 --- /dev/null +++ b/code/src/components/Results.js @@ -0,0 +1,14 @@ +/* eslint-disable linebreak-style */ +import React from 'react' + +export const Results = ({ name, genre, movie, show }) => { + return ( + <> +

Final Results!

+

Hey {name}

+

Your favorite genre is {genre}

+

Your favorite movie (from this selection) is {movie}

+

Your favorite show is {show}

+ + ) +} \ No newline at end of file diff --git a/code/src/components/Show.css b/code/src/components/Show.css new file mode 100644 index 000000000..d07bc78e3 --- /dev/null +++ b/code/src/components/Show.css @@ -0,0 +1,33 @@ +.showFav { + display: flex; + justify-content: space-around; + flex-direction: column; + margin: 1rem; + gap: 1rem; + padding: 1rem; + object-fit: contain; +} + +.normalPeople img { + display: flex; + width: 200px; + height: 250px; +} + +.madMen img { + display: flex; + width: 200px; + height: 250px; +} + +.newGirl img { + display: flex; + width: 200px; + height: 250px; +} + +.attackOnTitan img { + display: flex; + width: 200px; + height: 250px; +} \ No newline at end of file diff --git a/code/src/components/Show.js b/code/src/components/Show.js new file mode 100644 index 000000000..dbb2f13ae --- /dev/null +++ b/code/src/components/Show.js @@ -0,0 +1,40 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable global-require */ +import React from 'react' +import './Show.css' + +export const Show = ({ show, setShow }) => { + const handleShowChange = (event) => ( + setShow(event.target.value) + ) + return ( + <> +

What is your favorite show?

+
+
+ The show Normal People + + Normal People +
+
+ The show New Girl + + New Girl +
+
+ The show Mad Men + + Mad Men +
+
+ The show Attack on Titan + + Attack on Titan +
+
+ + ) +} \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..98e336265 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-image: url('./components/Assets/movies-background.jpg'); } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + + +.surveyForm { + display: flex; + width: auto; + margin: 5rem 5rem 5rem 5rem; + border: 2px solid rgb(245, 175, 10); + color: rgb(0, 255, 145); + background-color: rgb(107, 108, 109); + align-items: center; + flex-direction: column; + justify-content: center; +} \ No newline at end of file diff --git a/code/src/index.js b/code/src/index.js index 99f6d0de7..225f795a8 100644 --- a/code/src/index.js +++ b/code/src/index.js @@ -1,3 +1,4 @@ +/* eslint-disable linebreak-style */ import React from 'react'; import { createRoot } from 'react-dom/client' import './index.css'