diff --git a/package-lock.json b/package-lock.json index a2221b7..a598f1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,10 +11,12 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "formik": "^2.4.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^1.3.3" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -4117,6 +4119,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -8648,6 +8659,38 @@ "node": ">= 6" } }, + "node_modules/formik": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.5.tgz", + "integrity": "sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==", + "funding": [ + { + "type": "individual", + "url": "https://opencollective.com/formik" + } + ], + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.1", + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/formik/node_modules/deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -9052,6 +9095,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -12280,6 +12336,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -14592,6 +14653,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/property-expr": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz", + "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==" + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -14895,6 +14961,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -16713,6 +16784,16 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -16745,6 +16826,11 @@ "node": ">=0.6" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "node_modules/tough-cookie": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", @@ -18194,6 +18280,28 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.3.3.tgz", + "integrity": "sha512-v8QwZSsHH2K3/G9WSkp6mZKO+hugKT1EmnMqLNUcfu51HU9MDyhlETT/JgtzprnrnQHPWsjc6MUDMBp/l9fNnw==", + "dependencies": { + "property-expr": "^2.0.5", + "tiny-case": "^1.0.3", + "toposort": "^2.0.2", + "type-fest": "^2.19.0" + } + }, + "node_modules/yup/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } } } } diff --git a/package.json b/package.json index 57bc0b0..2b4578d 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,12 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "formik": "^2.4.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^1.3.3" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.css b/src/App.css index fedc064..a4c7454 100644 --- a/src/App.css +++ b/src/App.css @@ -74,4 +74,187 @@ h1 { .todo.checked{ background-color: rgb(14, 168, 14); +} + +.container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #efedee; + display: flex; + justify-content: center; + align-items: center; +} + +.modal { + width: 100%; + /* height: 60px; */ + background: rgba(51, 51, 51, 0.5); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transition: 0.4s; +} +.modal-container { + display: flex; + max-width: 60vw; + width: 100%; + border-radius: 10px; + overflow: hidden; + position: absolute; + + transition-duration: 0.3s; + background: #fff; +} +.modal-title { + margin: 0; + font-weight: 400; + color: #55311c; +} + +/* .modal-desc { + margin: 6px 0 30px 0; +} */ +.modal-left { + padding: 60px 30px 20px; + background: #fff; + flex: 1.5; + transition-duration: 0.5s; + opacity: 1; +} + +/* .modal-right { + flex: 2; + font-size: 0; + transition: 0.3s; + overflow: hidden; +} */ +/* .modal-right img { + width: 100%; + height: 100%; + transform: scale(1); + -o-object-fit: cover; + object-fit: cover; + transition-duration: 1.2s; +} */ + +/* .modal.is-open .modal-left { + transform: translateY(0); + opacity: 1; + transition-delay: 0.1s; +} */ +.modal-buttons { + display: flex; + justify-content: center; + align-items: center; + + ; +} +/* .modal-buttons a { + color: rgba(51, 51, 51, 0.6); + font-size: 14px; +} */ + +/* .sign-up { + margin: 60px 0 0; + font-size: 14px; + text-align: center; +} */ +/* .sign-up a { + color: #8c7569; +} */ + +.input-button { + padding: 8px 6px; + outline: none; + text-transform: uppercase; + border: 0; + color: #fff; + border-radius: 4px; + background: #20088a; + transition: 0.3s; + cursor: pointer; + font-family: "Nunito", sans-serif; + align-items: center; +} +.input-button:hover { + background: #55311c; +} + +.input-label { + font-size: 11px; + text-transform: uppercase; + font-weight: 600; + letter-spacing: 0.7px; + color: #8c7569; + transition: 0.3s; + text-align: left; +} + +.input-block { + display: flex; + flex-direction: column; + padding: 5px 5px 4px; + border: 1px solid #ddd; + border-radius: 4px; + margin-bottom: 20px; + transition: 0.3s; +} +.input-block p{ + color: red; + font-size: 14px; +} +.input-block input { + outline: 0; + border: 0; + padding: 4px 0 0; + font-size: 14px; +} +.input-block textarea{ + outline: 0; + border: 0; + padding: 4px 0 0; + font-size: 14px; +} +.input-block select{ + outline: 0; + border: 0; + padding: 4px 0 0; + font-size: 14px; +} +.input-block textarea::placeholder { + color: #ccc; + opacity: 1; +} + +.input-block input::-moz-placeholder { + color: #ccc; + opacity: 1; +} +.input-block input:-ms-input-placeholder { + color: #ccc; + opacity: 1; +} +.input-block input::placeholder { + color: #ccc; + opacity: 1; +} +.input-block:focus-within { + border-color: #8c7569; +} +.input-block:focus-within .input-label { + color: rgba(140, 117, 105, 0.8); +} + +@media (max-width: 750px) { + .modal-container { + max-width: 90vw; + } + + .modal-right { + display: none; + } } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 374f4e4..c6d0ea3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,12 @@ import './App.css'; +import Registration from './FormComponent/Registeration'; import TodoWrapper from './TodoComponent/TodoWrapper'; function App() { return (
- - + + {/* */}
); } diff --git a/src/FormComponent/Registeration.js b/src/FormComponent/Registeration.js new file mode 100644 index 0000000..c49e1c4 --- /dev/null +++ b/src/FormComponent/Registeration.js @@ -0,0 +1,85 @@ +import { useFormik } from "formik"; +import { RegisterSchema } from "../schemas" + +const initialValues = { + title: "", + desc: "", + assignee: "Naaz", + due_date: "", +} + +const Registration = () => { + + const { values, touched, handleChange, handleBlur, handleSubmit, errors } = useFormik({ + initialValues, validationSchema: RegisterSchema, onSubmit: (values, action) => { + action.resetForm() + } + + }) + console.log(values) + return ( +
+
+
+
+
+

Welcome!

+

To the best site for programmers:

+
+
+ + + {errors.title && touched.title ?

{errors.title}

: null} +
+
+ + + {errors.desc && touched.desc ?

{errors.desc}

: null} +
+
+ + + {errors.assignee && touched.assignee ?

{errors.assignee}

: null} +
+
+ + + {errors.due_date && touched.due_date ?

{errors.due_date}

: null} +
+
+ +
+ +
+
+
+
+ +
+
+ ); +} + +export default Registration; \ No newline at end of file diff --git a/src/schemas/index.jsx b/src/schemas/index.jsx new file mode 100644 index 0000000..35752d5 --- /dev/null +++ b/src/schemas/index.jsx @@ -0,0 +1,6 @@ +import * as Yup from "yup" +export const RegisterSchema = Yup.object().shape({ + title: Yup.string().min(2).max(25).required("Title is mandatory"), + desc: Yup.string().min(30).max(120).required("Description is mandatory"), + due_date: Yup.date().required("Due Date is mandatory"), + }); \ No newline at end of file