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..b11282468 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 + Super Nostalgia - Survey diff --git a/code/src/App.js b/code/src/App.js index f2007d229..ad664cfb8 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,16 @@ import React from 'react'; +import Survey from 'components/Survey'; +import Hero from 'components/Hero'; export const App = () => { return ( -
- Find me in src/app.js! -
+ <> +
+ +
+
+ +
+ ); } diff --git a/code/src/components/Hero.js b/code/src/components/Hero.js new file mode 100644 index 000000000..5c1757f2e --- /dev/null +++ b/code/src/components/Hero.js @@ -0,0 +1,14 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable indent */ +import React from 'react'; + +const Hero = () => { + return ( + <> +

Ultra Nostalgia

+
+ + ) +} + +export default Hero; \ No newline at end of file diff --git a/code/src/components/Landing.js b/code/src/components/Landing.js new file mode 100644 index 000000000..d996a3292 --- /dev/null +++ b/code/src/components/Landing.js @@ -0,0 +1,10 @@ +import React from "react"; + +const Landing = (props) => { +return ( + +) + +} + +export default Landing; diff --git a/code/src/components/Name.js b/code/src/components/Name.js new file mode 100644 index 000000000..9a736346c --- /dev/null +++ b/code/src/components/Name.js @@ -0,0 +1,47 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable indent */ + +import React, { useRef, useEffect } from 'react'; + +const Name = (props) => { +const { name, setName, counter, setCounter, percentboop, setPercentbop } = props + +const inputRef = useRef(null); + +useEffect(() => { + inputRef.current.focus(); +}, []); + +const handleNameChange = (event) => { + setName(event.target.value) +} + +const goToNextQuestion = () => { + setCounter(counter + 1); + setPercentbop(percentboop + 20) + }; + +const handleKeyDown = (event) => { + if (event.keyCode === 13) { + goToNextQuestion(); + } +}; + +return ( +
+

What is your name?

+ +
+) +} + +export default Name; \ No newline at end of file diff --git a/code/src/components/ProgressBar.js b/code/src/components/ProgressBar.js new file mode 100644 index 000000000..9d05d43e3 --- /dev/null +++ b/code/src/components/ProgressBar.js @@ -0,0 +1,17 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable indent */ + +import React from 'react'; + +const ProgressBar = ({ percent }) => { + // const { bop, setBop } = props; + return ( +
+
+ {percent}% +
+
+ ) +} + +export default ProgressBar; \ No newline at end of file diff --git a/code/src/components/Purchases.js b/code/src/components/Purchases.js new file mode 100644 index 000000000..b9404d071 --- /dev/null +++ b/code/src/components/Purchases.js @@ -0,0 +1,58 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable indent */ + +import React from 'react'; +import Question2Image from '../images/question2.jpg' + +const Purchases = (props) => { + const { purchases, setPurchases } = props + // const { food, setFood, avocado, setAvocado, percentboop, setPercentbop } = props + + // const inputRef = useRef(null); + + const handlePurchasesChange = (event) => { + setPurchases(event.target.value) + } + + // const goToNextQuestion = () => { + // setAvocado(avocado + 1) + // setPercentbop(percentboop + 10) + // } + + // const handleKeyDown = (event) => { + // if (event.keyCode === 13) { + // goToNextQuestion(); + // } + // }; + + return ( +
+ q2 +

How many retail therapy purchases have you done with us?

+ + {/* + {console.log(food)} */} +
+ ) +} + +export default Purchases; \ No newline at end of file diff --git a/code/src/components/RadioProduct.js b/code/src/components/RadioProduct.js new file mode 100644 index 000000000..9d24a24cb --- /dev/null +++ b/code/src/components/RadioProduct.js @@ -0,0 +1,51 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable react/jsx-tag-spacing */ +/* eslint-disable indent */ +/* eslint-disable react/jsx-indent-props */ + +import React from 'react'; +import Vinylimage from '../images/vinylicon.jpg' +import Posterimage from '../images/postericon.jpg' +import Fadsimage from '../images/fadicon.jpg' +import Consoleimage from '../images/consoleicon.jpg' + +const products = [ + 'Exclusive vinyl records', + 'Vintage video game consoles', + '90s-fads inspired merch', + 'Y2k wall-art and posters' +]; + +const RadioProduct = (props) => { + const { favProduct, setFavProduct } = props; + + const handleProductChange = (event) => { + setFavProduct(event.target.value); + } + return ( +
+

What is your favorite product from UltraNostalgia?

+ {products.map((product) => ( + + ))} +
+ vinyl + poster + fads + console +
+
+ ) +} + +export default RadioProduct; \ 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..852e68a01 --- /dev/null +++ b/code/src/components/Result.js @@ -0,0 +1,15 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable max-len */ +/* eslint-disable indent */ +import React from 'react'; + +const Result = ({ name, purchases, favProduct }) => { + return ( + <> +

Awesome! Thank you for completing our survey {name}.

+

You have used our online store {purchases} and we appreciate that, your favorite out of our range of ultra nostalgic products are {favProduct}.

+ + ) +} + +export default Result; \ No newline at end of file diff --git a/code/src/components/Satisfaction.js b/code/src/components/Satisfaction.js new file mode 100644 index 000000000..e49b1fdee --- /dev/null +++ b/code/src/components/Satisfaction.js @@ -0,0 +1,26 @@ +/* eslint-disable linebreak-style */ +import React from 'react'; + +const Satisfaction = (props) => { + const { satisfactionRange, satisfaction, handleSatisfactionChange } = props + return ( +
+
+

What do you think of our online store?

+ +
+
+ ); +}; + +export default Satisfaction; \ No newline at end of file diff --git a/code/src/components/Suggestion.js b/code/src/components/Suggestion.js new file mode 100644 index 000000000..2095cdf63 --- /dev/null +++ b/code/src/components/Suggestion.js @@ -0,0 +1,30 @@ +/* eslint-disable linebreak-style */ +/* eslint-disable padded-blocks */ +import React from 'react'; + +const Suggestion = ({ suggestion, setSuggestion }) => { + + const handleSuggestionChange = (event) => { + setSuggestion(event.target.value); + } + + return ( +
+

Got any suggestions?

+