diff --git a/README.md b/README.md
index 50e5933d0..12fc55915 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,9 @@
-# Survey form with React
+# Survey done with React
+Week 2 of working with React and this weeks project was to do a survey with React.
-Replace this readme with your own information about your project.
+# The problem
+At first I found it useful and easy, but once I wanted to grow my app I just ended up with soooo many problems. Had to delete most of my folders and just to a very easy version of what my original idea was.
+Now I'm just happy it works but I definitely have to work more on this to get bigger applications to work. This was just a minor and I really did a very basic version of this weeks task.
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## The problem
-
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
-
-## View it live
-
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+# View it live
+https://ylva-karlsson-week6-survey.netlify.app
\ No newline at end of file
diff --git a/code/.eslintrc.json b/code/.eslintrc.json
index c9c0675c3..df2fbad96 100644
--- a/code/.eslintrc.json
+++ b/code/.eslintrc.json
@@ -36,25 +36,25 @@
"arrow-body-style": "off",
"class-methods-use-this": "off",
"brace-style": [
- "error",
+ "warn",
"1tbs",
{
"allowSingleLine": true
}
],
"comma-dangle": [
- "error",
+ "warn",
"never"
],
"consistent-return": "off",
- "curly": "error",
+ "curly": "warn",
"eol-last": "off",
"import/extensions": "off",
"import/no-extraneous-dependencies": "off",
"import/no-unresolved": "off",
"import/prefer-default-export": "off",
"indent": [
- "error",
+ "warn",
2,
{
"SwitchCase": 1
@@ -62,14 +62,15 @@
],
"jsx-a11y/anchor-is-valid": "off",
"jsx-a11y/label-has-for": "off",
+ "jsx-a11y/label-has-associated-control": "off",
"jsx-a11y/href-no-hash": "off",
"no-alert": "off",
"no-console": "off",
"no-debugger": "off",
"no-else-return": "off",
- "no-irregular-whitespace": "error",
+ "no-irregular-whitespace": "warn",
"no-multiple-empty-lines": [
- "error",
+ "warn",
{
"max": 1
}
@@ -77,7 +78,7 @@
"no-param-reassign": "off",
"no-restricted-syntax": "off",
"object-curly-newline": [
- "error",
+ "warn",
{
"ObjectExpression": {
"consistent": true
@@ -87,44 +88,44 @@
}
}
],
- "prefer-template": "error",
+ "prefer-template": "warn",
"react/destructuring-assignment": "off",
"react/forbid-prop-types": "off",
"react/jsx-closing-bracket-location": [
- "error",
+ "warn",
{
"selfClosing": "after-props",
"nonEmpty": "after-props"
}
],
"react/jsx-curly-spacing": [
- "error",
+ "warn",
{
"when": "never",
"children": true
}
],
"react/jsx-filename-extension": "off",
- "react/jsx-no-bind": "error",
+ "react/jsx-no-bind": "warn",
"react/jsx-uses-react": "warn",
"react/jsx-wrap-multilines": "off",
"react/jsx-one-expression-per-line": "off",
"react/no-danger": "off",
- "react/no-did-mount-set-state": "error",
- "react/no-did-update-set-state": "error",
- "react/no-direct-mutation-state": "error",
+ "react/no-did-mount-set-state": "warn",
+ "react/no-did-update-set-state": "warn",
+ "react/no-direct-mutation-state": "warn",
"react/no-multi-comp": [
- "error",
+ "warn",
{
"ignoreStateless": true
}
],
- "react/no-string-refs": "error",
+ "react/no-string-refs": "warn",
"react/prop-types": "off",
"react/require-extension": "off",
"react/sort-comp": "off",
"react/jsx-indent": "off",
- "react-hooks/rules-of-hooks": "error",
+ "react-hooks/rules-of-hooks": "warn",
"react-hooks/exhaustive-deps": "warn",
"semi": "off"
}
diff --git a/code/.vscode/settings.json b/code/.vscode/settings.json
new file mode 100644
index 000000000..fa03d4e65
--- /dev/null
+++ b/code/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": true
+ },
+ "eslint.validate": ["javascript"]
+}
\ No newline at end of file
diff --git a/code/README.md b/code/README.md
index 6e1ac173a..12fc55915 100644
--- a/code/README.md
+++ b/code/README.md
@@ -1,19 +1,9 @@
-# Technigo React Starter App
+# Survey done with React
+Week 2 of working with React and this weeks project was to do a survey with React.
-This app has been generated using `create-react-app`, then cleaned up a little so we have a project with just the elements we need to get started.
+# The problem
+At first I found it useful and easy, but once I wanted to grow my app I just ended up with soooo many problems. Had to delete most of my folders and just to a very easy version of what my original idea was.
+Now I'm just happy it works but I definitely have to work more on this to get bigger applications to work. This was just a minor and I really did a very basic version of this weeks task.
-Add components in the `src` folder and use them in `src/app.js` to get started.
-
-## Usage
-
-1. On GitHub, click the 'use this template' button to create a new repo on your account
-1. Clone the new repo to your computer
-1. Install required dependencies with npm: `npm install`
-1. Start the project: `npm start`
-
-Alternatively, if you don't want a new git repo on your account;
-
-1. Download & extract the [latest release](https://github.com/Technigo/react-starter/releases/latest) from GitHub
-1. Open the directory in the terminal: `cd /path/to/react-starter`
-1. Install required dependencies with npm: `npm install`
-1. Start the project: `npm start`
+# View it live
+https://ylva-karlsson-week6-survey.netlify.app
\ No newline at end of file
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/package.json b/code/package.json
index 7214c8fde..d64f7045b 100644
--- a/code/package.json
+++ b/code/package.json
@@ -18,7 +18,8 @@
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
- "lint": "eslint ."
+ "lint": "eslint .",
+ "fix": "eslint --fix ."
},
"browserslist": {
"production": [
diff --git a/code/public/background-survey.jpg b/code/public/background-survey.jpg
new file mode 100644
index 000000000..411a57c88
Binary files /dev/null and b/code/public/background-survey.jpg differ
diff --git a/code/public/favicon.ico b/code/public/favicon.ico
new file mode 100644
index 000000000..38b5b93c4
Binary files /dev/null and b/code/public/favicon.ico differ
diff --git a/code/public/index.html b/code/public/index.html
index e6730aa66..342c8a91d 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
+ Survey React App - by Ylva K
+
+
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..15b201cee 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,78 @@
-import React from 'react';
+/* eslint-disable react/react-in-jsx-scope */
+import React, { useState } from 'react';
+import NameInput from 'components/NameInput';
+import Favoriteplace from 'components/Favoriteplace';
+import Time from 'components/Time';
+import Comments from 'components/Comments';
+import Slider from 'components/Slider';
+import EndSurvey from 'components/EndSurvey';
+
+import './index.css';
export const App = () => {
+ const [step, setStep] = useState(1);
+ const [name, setName] = useState('');
+ const [favoriteplace, setFavoriteplace] = useState('');
+ const [time, setTime] = useState('');
+ const [comments, setComments] = useState('');
+ const [slider, setSlider] = useState('');
+ const [submitted, setSubmitted] = useState(false);
+ const [progress, setProgress] = useState(0);
+
+ const handleStepIncrease = () => {
+ const increment = 100 / 5;
+ setStep(step + 1);
+ setProgress(progress + increment);
+ }
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ setSubmitted(true);
+ };
+
return (
-
- Find me in src/app.js!
+
+
Please fill in this survey about your favorite place!