From 4314d6f524fbd1929f7fa1654ec05612e4cc5260 Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Thu, 18 May 2023 02:54:09 -0400 Subject: [PATCH 01/10] Added a Bootstrap Collapse functionality --- package-lock.json | 308 +++++++++++++++++++++++-------- package.json | 3 + src/App.js | 43 ++++- src/components/Character-Data.js | 51 +++++ src/components/Character.js | 17 +- src/index.js | 1 + 6 files changed, 339 insertions(+), 84 deletions(-) create mode 100644 src/components/Character-Data.js diff --git a/package-lock.json b/package-lock.json index 44cde1123..21f35df1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,17 +5,21 @@ "requires": true, "packages": { "": { + "name": "web-sprint-challenge-intro-to-react", "version": "0.1.1", "dependencies": { "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", "axios": "^0.26.0", + "boostrap": "^2.0.0", + "bootstrap": "^5.2.3", "msw": "^0.38.2", "mutationobserver-shim": "^0.3.7", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", + "reactstrap": "^9.1.10", "styled-components": "^5.3.3" } }, @@ -2594,6 +2598,15 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -4511,6 +4524,30 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "node_modules/boostrap": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/boostrap/-/boostrap-2.0.0.tgz", + "integrity": "sha512-JEeFMOweKeGXEM9rt95eaVISOkluG9aKcl0jQCETOVH9jynCZxuBZe2oWgcWJpj5wqYWZl625SnW7OgHT2Ineg==", + "deprecated": "Package no longer supported. Contact support@npmjs.com for more info." + }, + "node_modules/bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.6" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -4784,6 +4821,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz", @@ -5928,6 +5970,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", @@ -12077,11 +12128,30 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-fast-compare": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz", + "integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==" + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -12162,6 +12232,38 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, + "node_modules/reactstrap": { + "version": "9.1.10", + "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.1.10.tgz", + "integrity": "sha512-VMDiQNV8hKug1GFOHEymYUYxDnueYl44F+wREABuYy2RgvzDq7OL7T/T8OpUz6JAA+f9LeeHohXxFbpb+a/VmA==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@popperjs/core": "^2.6.0", + "classnames": "^2.2.3", + "prop-types": "^15.5.8", + "react-popper": "^2.2.4", + "react-transition-group": "^4.4.2" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -13893,19 +13995,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz", - "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -14106,6 +14195,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz", @@ -16771,6 +16868,11 @@ } } }, + "@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -17664,14 +17766,12 @@ "acorn-import-assertions": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", - "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", - "requires": {} + "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==" }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "requires": {} + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==" }, "acorn-node": { "version": "1.8.2", @@ -17740,8 +17840,7 @@ "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "ansi-escapes": { "version": "4.3.2", @@ -18009,8 +18108,7 @@ "babel-plugin-named-asset-import": { "version": "0.3.8", "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz", - "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==", - "requires": {} + "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==" }, "babel-plugin-polyfill-corejs2": { "version": "0.3.1", @@ -18225,6 +18323,16 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "boostrap": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/boostrap/-/boostrap-2.0.0.tgz", + "integrity": "sha512-JEeFMOweKeGXEM9rt95eaVISOkluG9aKcl0jQCETOVH9jynCZxuBZe2oWgcWJpj5wqYWZl625SnW7OgHT2Ineg==" + }, + "bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -18414,6 +18522,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-css": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz", @@ -18807,7 +18920,9 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": {} + "requires": { + "ajv": "^8.0.0" + } }, "ajv-keywords": { "version": "5.1.0", @@ -18838,8 +18953,7 @@ "css-prefers-color-scheme": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz", - "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==", - "requires": {} + "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==" }, "css-select": { "version": "4.2.1", @@ -18946,8 +19060,7 @@ "cssnano-utils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz", - "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==", - "requires": {} + "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==" }, "csso": { "version": "4.2.0", @@ -19253,6 +19366,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", @@ -19822,8 +19944,7 @@ "eslint-plugin-react-hooks": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz", - "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==", - "requires": {} + "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==" }, "eslint-plugin-testing-library": { "version": "5.0.6", @@ -20720,8 +20841,7 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "requires": {} + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" }, "idb": { "version": "6.1.5", @@ -21460,8 +21580,7 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "requires": {} + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" }, "jest-regex-util": { "version": "27.5.1", @@ -22104,7 +22223,9 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": {} + "requires": { + "ajv": "^8.0.0" + } }, "ajv-keywords": { "version": "5.1.0", @@ -22751,8 +22872,7 @@ "postcss-browser-comments": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz", - "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==", - "requires": {} + "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==" }, "postcss-calc": { "version": "8.2.4", @@ -22809,8 +22929,7 @@ "postcss-custom-media": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz", - "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==", - "requires": {} + "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==" }, "postcss-custom-properties": { "version": "12.1.4", @@ -22839,26 +22958,22 @@ "postcss-discard-comments": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.0.tgz", - "integrity": "sha512-L0IKF4jAshRyn03SkEO6ar/Ipz2oLywVbg2THf2EqqdNkBwmVMxuTR/RoAltOw4piiaLt3gCAdrbAqmTBInmhg==", - "requires": {} + "integrity": "sha512-L0IKF4jAshRyn03SkEO6ar/Ipz2oLywVbg2THf2EqqdNkBwmVMxuTR/RoAltOw4piiaLt3gCAdrbAqmTBInmhg==" }, "postcss-discard-duplicates": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz", - "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==", - "requires": {} + "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==" }, "postcss-discard-empty": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.0.tgz", - "integrity": "sha512-782T/buGgb3HOuHOJAHpdyKzAAKsv/BxWqsutnZ+QsiHEcDkY7v+6WWdturuBiSal6XMOO1p1aJvwXdqLD5vhA==", - "requires": {} + "integrity": "sha512-782T/buGgb3HOuHOJAHpdyKzAAKsv/BxWqsutnZ+QsiHEcDkY7v+6WWdturuBiSal6XMOO1p1aJvwXdqLD5vhA==" }, "postcss-discard-overridden": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz", - "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==", - "requires": {} + "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==" }, "postcss-double-position-gradients": { "version": "3.1.0", @@ -22880,8 +22995,7 @@ "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", - "requires": {} + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" }, "postcss-focus-visible": { "version": "6.0.4", @@ -22902,14 +23016,12 @@ "postcss-font-variant": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz", - "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==", - "requires": {} + "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==" }, "postcss-gap-properties": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz", - "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==", - "requires": {} + "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==" }, "postcss-image-set-function": { "version": "4.0.6", @@ -22922,8 +23034,7 @@ "postcss-initial": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz", - "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==", - "requires": {} + "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==" }, "postcss-js": { "version": "4.0.0", @@ -22964,14 +23075,12 @@ "postcss-logical": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", - "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", - "requires": {} + "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==" }, "postcss-media-minmax": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", - "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "requires": {} + "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==" }, "postcss-merge-longhand": { "version": "5.1.0", @@ -23032,8 +23141,7 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "requires": {} + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -23090,8 +23198,7 @@ "postcss-normalize-charset": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", - "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==", - "requires": {} + "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==" }, "postcss-normalize-display-values": { "version": "5.1.0", @@ -23176,14 +23283,12 @@ "postcss-overflow-shorthand": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz", - "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==", - "requires": {} + "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==" }, "postcss-page-break": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz", - "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==", - "requires": {} + "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==" }, "postcss-place": { "version": "7.0.4", @@ -23270,8 +23375,7 @@ "postcss-replace-overflow-wrap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz", - "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==", - "requires": {} + "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==" }, "postcss-selector-not": { "version": "5.0.0", @@ -23587,11 +23691,25 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-fast-compare": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz", + "integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==" + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "requires": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -23652,6 +23770,30 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, + "reactstrap": { + "version": "9.1.10", + "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.1.10.tgz", + "integrity": "sha512-VMDiQNV8hKug1GFOHEymYUYxDnueYl44F+wREABuYy2RgvzDq7OL7T/T8OpUz6JAA+f9LeeHohXxFbpb+a/VmA==", + "requires": { + "@babel/runtime": "^7.12.5", + "@popperjs/core": "^2.6.0", + "classnames": "^2.2.3", + "prop-types": "^15.5.8", + "react-popper": "^2.2.4", + "react-transition-group": "^4.4.2" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -24470,8 +24612,7 @@ "style-loader": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", - "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", - "requires": {} + "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==" }, "styled-components": { "version": "5.3.3", @@ -24679,6 +24820,7 @@ "is-glob": "^4.0.3", "normalize-path": "^3.0.0", "object-hash": "^2.2.0", + "postcss": "^8.4.6", "postcss-js": "^4.0.0", "postcss-load-config": "^3.1.0", "postcss-nested": "5.0.6", @@ -24944,12 +25086,6 @@ "is-typedarray": "^1.0.0" } }, - "typescript": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz", - "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==", - "peer": true - }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -25103,6 +25239,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz", @@ -25207,7 +25351,9 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": {} + "requires": { + "ajv": "^8.0.0" + } }, "ajv-keywords": { "version": "5.1.0", @@ -25287,7 +25433,9 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": {} + "requires": { + "ajv": "^8.0.0" + } }, "ajv-keywords": { "version": "5.1.0", @@ -25329,8 +25477,7 @@ "ws": { "version": "8.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz", - "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==", - "requires": {} + "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==" } } }, @@ -25727,8 +25874,7 @@ "ws": { "version": "7.5.7", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz", - "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==", - "requires": {} + "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==" }, "xml-name-validator": { "version": "3.0.0", diff --git a/package.json b/package.json index 46ae0ec6b..8c2512cd4 100644 --- a/package.json +++ b/package.json @@ -7,11 +7,14 @@ "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", "axios": "^0.26.0", + "boostrap": "^2.0.0", + "bootstrap": "^5.2.3", "msw": "^0.38.2", "mutationobserver-shim": "^0.3.7", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", + "reactstrap": "^9.1.10", "styled-components": "^5.3.3" }, "scripts": { diff --git a/src/App.js b/src/App.js index 52e90c02c..c09f78b4f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,7 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import Character from './components/Character' +import axios from 'axios'; +import { Button } from "reactstrap"; const App = () => { // Try to think through what state you'll need for this app before starting. Then build out @@ -7,12 +10,48 @@ const App = () => { // Fetch characters from the API in an effect hook. Remember, anytime you have a // side effect in a component, you want to think about which state and/or props it should // sync up with, if any. + const [data, setData] = useState(null); + + useEffect(() => { + axios.get('https://swapi.dev/api/people/') + .then(res => { + let tempData = res.data; + for (let i = 0; i < tempData.length; i++) + { + tempData[i].key = i+1; + } + setData(tempData); + }).catch(err => console.error(err)) + },[]) + return (
-

Characters

+ {data && } + {console.log(data)}
); } export default App; + +/* +birth_year: "19BBY" +created: "2014-12-09T13:50:51.644000Z" +edited: "2014-12-20T21:17:56.891000Z" +eye_color: "blue" +films: (4) ['A New Hope', 'The Empire Strikes Back', 'Return of the Jedi', 'Revenge of the Sith'] +gender: "male" +hair_color: "blond" +height: "172" +homeworld: "http://swapi.dev/api/planets/1/" +id: 1 +mass: "77" +name: "Luke Skywalker" +skin_color: +"fair" +species: [] +starships: ['http://swapi.dev/api/starships/12/', 'http://swapi.dev/api/starships/22/'] +url: "http://swapi.dev/api/people/1/" +vehicles: ['http://swapi.dev/api/vehicles/14/', 'http://swapi.dev/api/vehicles/30/'] +*/ diff --git a/src/components/Character-Data.js b/src/components/Character-Data.js new file mode 100644 index 000000000..1223d5526 --- /dev/null +++ b/src/components/Character-Data.js @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import { Collapse, Button, CardBody, Card } from 'reactstrap'; + +function CharacterData(props) { + const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color} = props; + const [isOpen, setIsOpen] = useState(false); + + const comment = "I hate this shit!"; + + const toggle = () => setIsOpen(!isOpen); + + return ( + + + + + +
  • + Name: { name } +
    • +
  • + gender: {gender} +
    • +
  • + Height: {height} +
    • +
  • + Mass: {mass} +
    • +
  • + BirthYear: {birth_year} +
    • +
  • + Eye Color: {eye_color} +
    • +
  • + Hair Color: {hair_color} +
    • +
  • + Skin Color: {skin_color} +
    • +     +     +     +     + ); +} + +export default CharacterData; \ No newline at end of file diff --git a/src/components/Character.js b/src/components/Character.js index 4083249c0..9d5d40b4a 100644 --- a/src/components/Character.js +++ b/src/components/Character.js @@ -1 +1,16 @@ -// Write your Character component here +import CharacterData from "./Character-Data"; +import React from 'react'; + +const Character = (props) => { + const { data } = props; + return ( +
    + {data.map(element => { + return + })} +
    + ); +} + +export default Character; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 768b2a6c8..24c400397 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ // This is for the fake API. Do not delete! +import 'bootstrap/dist/css/bootstrap.min.css'; import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; From 538849a5fc9eb6232f6ec86b81ce61d9bbe434f4 Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Thu, 18 May 2023 02:56:43 -0400 Subject: [PATCH 02/10] Removed unecessary variables --- src/components/Character-Data.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Character-Data.js b/src/components/Character-Data.js index 1223d5526..a52e98c38 100644 --- a/src/components/Character-Data.js +++ b/src/components/Character-Data.js @@ -5,8 +5,6 @@ function CharacterData(props) { const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color} = props; const [isOpen, setIsOpen] = useState(false); - const comment = "I hate this shit!"; - const toggle = () => setIsOpen(!isOpen); return ( From 42c9476e46053392c5fa514797872b5b0c4c5fb8 Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Thu, 18 May 2023 11:25:24 -0400 Subject: [PATCH 03/10] Adjusted the css styles of the Buttons and Title --- package-lock.json | 109 ++++++++++++++++++++++-------- src/App.css | 6 ++ src/App.js | 1 + src/components/Character-Data.css | 3 + src/components/Character-Data.js | 9 +-- src/index.css | 3 + 6 files changed, 97 insertions(+), 34 deletions(-) create mode 100644 src/components/Character-Data.css diff --git a/package-lock.json b/package-lock.json index 21f35df1e..af52cc145 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13995,6 +13995,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -17766,12 +17779,14 @@ "acorn-import-assertions": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", - "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==" + "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", + "requires": {} }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==" + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "requires": {} }, "acorn-node": { "version": "1.8.2", @@ -17840,7 +17855,8 @@ "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "requires": {} }, "ansi-escapes": { "version": "4.3.2", @@ -18108,7 +18124,8 @@ "babel-plugin-named-asset-import": { "version": "0.3.8", "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz", - "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==" + "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==", + "requires": {} }, "babel-plugin-polyfill-corejs2": { "version": "0.3.1", @@ -18331,7 +18348,8 @@ "bootstrap": { "version": "5.2.3", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", - "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==" + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "requires": {} }, "brace-expansion": { "version": "1.1.11", @@ -18953,7 +18971,8 @@ "css-prefers-color-scheme": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz", - "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==" + "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==", + "requires": {} }, "css-select": { "version": "4.2.1", @@ -19060,7 +19079,8 @@ "cssnano-utils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz", - "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==" + "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==", + "requires": {} }, "csso": { "version": "4.2.0", @@ -19944,7 +19964,8 @@ "eslint-plugin-react-hooks": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz", - "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==" + "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==", + "requires": {} }, "eslint-plugin-testing-library": { "version": "5.0.6", @@ -20841,7 +20862,8 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "requires": {} }, "idb": { "version": "6.1.5", @@ -21580,7 +21602,8 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", + "requires": {} }, "jest-regex-util": { "version": "27.5.1", @@ -22872,7 +22895,8 @@ "postcss-browser-comments": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz", - "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==" + "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==", + "requires": {} }, "postcss-calc": { "version": "8.2.4", @@ -22929,7 +22953,8 @@ "postcss-custom-media": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz", - "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==" + "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==", + "requires": {} }, "postcss-custom-properties": { "version": "12.1.4", @@ -22958,22 +22983,26 @@ "postcss-discard-comments": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.0.tgz", - "integrity": "sha512-L0IKF4jAshRyn03SkEO6ar/Ipz2oLywVbg2THf2EqqdNkBwmVMxuTR/RoAltOw4piiaLt3gCAdrbAqmTBInmhg==" + "integrity": "sha512-L0IKF4jAshRyn03SkEO6ar/Ipz2oLywVbg2THf2EqqdNkBwmVMxuTR/RoAltOw4piiaLt3gCAdrbAqmTBInmhg==", + "requires": {} }, "postcss-discard-duplicates": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz", - "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==" + "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==", + "requires": {} }, "postcss-discard-empty": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.0.tgz", - "integrity": "sha512-782T/buGgb3HOuHOJAHpdyKzAAKsv/BxWqsutnZ+QsiHEcDkY7v+6WWdturuBiSal6XMOO1p1aJvwXdqLD5vhA==" + "integrity": "sha512-782T/buGgb3HOuHOJAHpdyKzAAKsv/BxWqsutnZ+QsiHEcDkY7v+6WWdturuBiSal6XMOO1p1aJvwXdqLD5vhA==", + "requires": {} }, "postcss-discard-overridden": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz", - "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==" + "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==", + "requires": {} }, "postcss-double-position-gradients": { "version": "3.1.0", @@ -22995,7 +23024,8 @@ "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", + "requires": {} }, "postcss-focus-visible": { "version": "6.0.4", @@ -23016,12 +23046,14 @@ "postcss-font-variant": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz", - "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==" + "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==", + "requires": {} }, "postcss-gap-properties": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz", - "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==" + "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==", + "requires": {} }, "postcss-image-set-function": { "version": "4.0.6", @@ -23034,7 +23066,8 @@ "postcss-initial": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz", - "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==" + "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==", + "requires": {} }, "postcss-js": { "version": "4.0.0", @@ -23075,12 +23108,14 @@ "postcss-logical": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", - "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==" + "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", + "requires": {} }, "postcss-media-minmax": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", - "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==" + "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", + "requires": {} }, "postcss-merge-longhand": { "version": "5.1.0", @@ -23141,7 +23176,8 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -23198,7 +23234,8 @@ "postcss-normalize-charset": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", - "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==" + "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==", + "requires": {} }, "postcss-normalize-display-values": { "version": "5.1.0", @@ -23283,12 +23320,14 @@ "postcss-overflow-shorthand": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz", - "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==" + "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==", + "requires": {} }, "postcss-page-break": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz", - "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==" + "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==", + "requires": {} }, "postcss-place": { "version": "7.0.4", @@ -23375,7 +23414,8 @@ "postcss-replace-overflow-wrap": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz", - "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==" + "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==", + "requires": {} }, "postcss-selector-not": { "version": "5.0.0", @@ -24612,7 +24652,8 @@ "style-loader": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", - "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==" + "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", + "requires": {} }, "styled-components": { "version": "5.3.3", @@ -25086,6 +25127,12 @@ "is-typedarray": "^1.0.0" } }, + "typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true + }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", @@ -25477,7 +25524,8 @@ "ws": { "version": "8.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz", - "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==" + "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==", + "requires": {} } } }, @@ -25874,7 +25922,8 @@ "ws": { "version": "7.5.7", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz", - "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==" + "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==", + "requires": {} }, "xml-name-validator": { "version": "3.0.0", diff --git a/src/App.css b/src/App.css index fab70641c..55d998b5e 100644 --- a/src/App.css +++ b/src/App.css @@ -5,4 +5,10 @@ color: #443e3e; text-shadow: 1px 1px 5px #fff; } + + +.h1-title { + margin-top: 5rem; + text-shadow: 1.5px 1.5px; +} /* write your parent styles in here for your App.js */ diff --git a/src/App.js b/src/App.js index c09f78b4f..8b32ddddc 100644 --- a/src/App.js +++ b/src/App.js @@ -27,6 +27,7 @@ const App = () => { return (
    +

    StarWars Characters

    {data && } {console.log(data)}
    diff --git a/src/components/Character-Data.css b/src/components/Character-Data.css new file mode 100644 index 000000000..0f9f9103d --- /dev/null +++ b/src/components/Character-Data.css @@ -0,0 +1,3 @@ +.cardbody { + background-color: burlywood; +} \ No newline at end of file diff --git a/src/components/Character-Data.js b/src/components/Character-Data.js index a52e98c38..7ec795e91 100644 --- a/src/components/Character-Data.js +++ b/src/components/Character-Data.js @@ -1,20 +1,21 @@ import React, { useState } from 'react'; import { Collapse, Button, CardBody, Card } from 'reactstrap'; +import "./Character-Data.css"; function CharacterData(props) { - const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color} = props; + const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color } = props; const [isOpen, setIsOpen] = useState(false); const toggle = () => setIsOpen(!isOpen); return ( - - + - +
  • Name: { name }
    • diff --git a/src/index.css b/src/index.css index 5ea3014fb..4b7dab475 100644 --- a/src/index.css +++ b/src/index.css @@ -5,3 +5,6 @@ body { background-image: url('./images/sw-bg.jpg'); background-size: cover; } +.character-container-wrapper { + +} From e988b9ad4fc4a2fc1c031d07803dea1bdbe1e220 Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Thu, 18 May 2023 11:27:34 -0400 Subject: [PATCH 04/10] modified the CardBody on Character-Data.js file --- src/components/Character-Data.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Character-Data.js b/src/components/Character-Data.js index 7ec795e91..50bef62b6 100644 --- a/src/components/Character-Data.js +++ b/src/components/Character-Data.js @@ -16,9 +16,9 @@ function CharacterData(props) { -
  • +
    Name: { name } -
    • +
  • gender: {gender}
    • From 97dc906749785f933b0b162ce19e1f6f0e6711f0 Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Thu, 18 May 2023 21:40:53 -0400 Subject: [PATCH 05/10] Removed the div on line 19-21 to pass the npm run test --- src/App.js | 1 - src/components/Character-Data.js | 7 ++----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 8b32ddddc..75a3064d9 100644 --- a/src/App.js +++ b/src/App.js @@ -35,7 +35,6 @@ const App = () => { } export default App; - /* birth_year: "19BBY" created: "2014-12-09T13:50:51.644000Z" diff --git a/src/components/Character-Data.js b/src/components/Character-Data.js index 50bef62b6..8f00e4667 100644 --- a/src/components/Character-Data.js +++ b/src/components/Character-Data.js @@ -3,22 +3,19 @@ import { Collapse, Button, CardBody, Card } from 'reactstrap'; import "./Character-Data.css"; function CharacterData(props) { - const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color } = props; + const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color, key } = props; const [isOpen, setIsOpen] = useState(false); const toggle = () => setIsOpen(!isOpen); return ( - -
    - Name: { name } -
  • gender: {gender}
    • From 46d2b7a5baa8fc2b2ac77b134d62c6a7701aceda Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Thu, 18 May 2023 23:29:19 -0400 Subject: [PATCH 06/10] removed forloop from App.js --- src/App.js | 5 ----- src/components/Character.js | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 75a3064d9..11942e4e5 100644 --- a/src/App.js +++ b/src/App.js @@ -16,10 +16,6 @@ const App = () => { axios.get('https://swapi.dev/api/people/') .then(res => { let tempData = res.data; - for (let i = 0; i < tempData.length; i++) - { - tempData[i].key = i+1; - } setData(tempData); }).catch(err => console.error(err)) },[]) @@ -29,7 +25,6 @@ const App = () => {

    StarWars Characters

    {data && } - {console.log(data)}
    ); } diff --git a/src/components/Character.js b/src/components/Character.js index 9d5d40b4a..0936907c0 100644 --- a/src/components/Character.js +++ b/src/components/Character.js @@ -6,7 +6,7 @@ const Character = (props) => { return (
    {data.map(element => { - return })}
    From 5d286bd3eeb05dff9dd2d3b69bf4ad325f5a1602 Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Sat, 20 May 2023 04:04:54 -0400 Subject: [PATCH 07/10] Fixing the code for CodeGrade --- src/App.js | 8 ++-- src/components/Character-Data.css | 3 -- src/components/Character-Data.js | 47 -------------------- src/components/Character.js | 73 +++++++++++++++++++++++++------ 4 files changed, 65 insertions(+), 66 deletions(-) delete mode 100644 src/components/Character-Data.css delete mode 100644 src/components/Character-Data.js diff --git a/src/App.js b/src/App.js index 11942e4e5..9a8793262 100644 --- a/src/App.js +++ b/src/App.js @@ -15,8 +15,7 @@ const App = () => { useEffect(() => { axios.get('https://swapi.dev/api/people/') .then(res => { - let tempData = res.data; - setData(tempData); + setData(res.data); }).catch(err => console.error(err)) },[]) @@ -24,7 +23,10 @@ const App = () => { return (

    StarWars Characters

    - {data && } + {data && data.map(elem => { + return () + })}
    ); } diff --git a/src/components/Character-Data.css b/src/components/Character-Data.css deleted file mode 100644 index 0f9f9103d..000000000 --- a/src/components/Character-Data.css +++ /dev/null @@ -1,3 +0,0 @@ -.cardbody { - background-color: burlywood; -} \ No newline at end of file diff --git a/src/components/Character-Data.js b/src/components/Character-Data.js deleted file mode 100644 index 8f00e4667..000000000 --- a/src/components/Character-Data.js +++ /dev/null @@ -1,47 +0,0 @@ -import React, { useState } from 'react'; -import { Collapse, Button, CardBody, Card } from 'reactstrap'; -import "./Character-Data.css"; - -function CharacterData(props) { - const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color, key } = props; - const [isOpen, setIsOpen] = useState(false); - - const toggle = () => setIsOpen(!isOpen); - - return ( - - - - - -
  • - gender: {gender} -
    • -
  • - Height: {height} -
    • -
  • - Mass: {mass} -
    • -
  • - BirthYear: {birth_year} -
    • -
  • - Eye Color: {eye_color} -
    • -
  • - Hair Color: {hair_color} -
    • -
  • - Skin Color: {skin_color} -
    • -     -     -     -     - ); -} - -export default CharacterData; \ No newline at end of file diff --git a/src/components/Character.js b/src/components/Character.js index 0936907c0..27d928c1e 100644 --- a/src/components/Character.js +++ b/src/components/Character.js @@ -1,16 +1,63 @@ -import CharacterData from "./Character-Data"; -import React from 'react'; +// import CharacterData from "./Character-Data"; +// import React from 'react'; -const Character = (props) => { - const { data } = props; - return ( -
    - {data.map(element => { - return - })} -
    - ); -} +// const Character = (props) => { +// const { data } = props; +// return ( +//
    +// {data.map(element => { + // return +// })} +//
    +// ); +// } +// export default Character; + +import React, { useState } from 'react'; +import { Collapse, Button, CardBody, Card } from 'reactstrap'; + +function Character(props) { + const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color} = props; + const [isOpen, setIsOpen] = useState(false); + + const toggle = () => setIsOpen(!isOpen); + + return ( + + + + + +
  • + gender: {gender} +
    • +
  • + Height: {height} +
    • +
  • + Mass: {mass} +
    • +
  • + BirthYear: {birth_year} +
    • +
  • + Eye Color: {eye_color} +
    • +
  • + Hair Color: {hair_color} +
    • +
  • + Skin Color: {skin_color} +
    • +     +     +     +     + ); +} + export default Character; \ No newline at end of file From 55a19aca06bfd3e78794b77c44586a552ec1cdd7 Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Sat, 20 May 2023 04:13:40 -0400 Subject: [PATCH 08/10] for codegrade --- src/components/Character.js | 107 +++++++++++++++++++----------------- 1 file changed, 57 insertions(+), 50 deletions(-) diff --git a/src/components/Character.js b/src/components/Character.js index 27d928c1e..71046c56d 100644 --- a/src/components/Character.js +++ b/src/components/Character.js @@ -1,62 +1,69 @@ -// import CharacterData from "./Character-Data"; -// import React from 'react'; - -// const Character = (props) => { -// const { data } = props; -// return ( -//
    -// {data.map(element => { - // return -// })} -//
    -// ); +// import React, { useState } from 'react'; +// import { Collapse, Button, CardBody, Card } from 'reactstrap'; + +// function Character(props) { +// const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color} = props; +// const [isOpen, setIsOpen] = useState(false); + +// const toggle = () => setIsOpen(!isOpen); + +// return ( +// +// +// +// +// +//
  • +// gender: {gender} +//
    • +//
  • +// Height: {height} +//
    • +//
  • +// Mass: {mass} +//
    • +//
  • +// BirthYear: {birth_year} +//
    • +//
  • +// Eye Color: {eye_color} +//
    • +//
  • +// Hair Color: {hair_color} +//
    • +//
  • +// Skin Color: {skin_color} +//
    • +//     +//     +//     +//     +// ); // } - + // export default Character; import React, { useState } from 'react'; -import { Collapse, Button, CardBody, Card } from 'reactstrap'; + function Character(props) { const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color} = props; - const [isOpen, setIsOpen] = useState(false); - - const toggle = () => setIsOpen(!isOpen); return ( - - - - - -
  • - gender: {gender} -
    • -
  • - Height: {height} -
    • -
  • - Mass: {mass} -
    • -
  • - BirthYear: {birth_year} -
    • -
  • - Eye Color: {eye_color} -
    • -
  • - Hair Color: {hair_color} -
    • -
  • - Skin Color: {skin_color} -
    • -     -     -     -     +
    +

    Name: {name}

    +

    + gender: {gender} + Height: {height} + Mass: {mass} + BirthYear: {birth_year} + Eye Color: {eye_color} + Hair Color: {hair_color} + Skin Color: {skin_color} +

    +
    ); } From 26bd87215f1088659dd955883f2f472606e8008e Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Sat, 20 May 2023 14:33:58 -0400 Subject: [PATCH 09/10] reverted the code back to the dropdown ui --- src/App.js | 2 +- src/components/Character.js | 119 ++++++++++++++++++------------------ 2 files changed, 59 insertions(+), 62 deletions(-) diff --git a/src/App.js b/src/App.js index 9a8793262..e988e5446 100644 --- a/src/App.js +++ b/src/App.js @@ -24,7 +24,7 @@ const App = () => {

    StarWars Characters

    {data && data.map(elem => { - return () })}
    diff --git a/src/components/Character.js b/src/components/Character.js index 71046c56d..711da1e6c 100644 --- a/src/components/Character.js +++ b/src/components/Character.js @@ -1,70 +1,67 @@ -// import React, { useState } from 'react'; -// import { Collapse, Button, CardBody, Card } from 'reactstrap'; - -// function Character(props) { -// const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color} = props; -// const [isOpen, setIsOpen] = useState(false); - -// const toggle = () => setIsOpen(!isOpen); - -// return ( -// -// -// -// -// -//
  • -// gender: {gender} -//
    • -//
  • -// Height: {height} -//
    • -//
  • -// Mass: {mass} -//
    • -//
  • -// BirthYear: {birth_year} -//
    • -//
  • -// Eye Color: {eye_color} -//
    • -//
  • -// Hair Color: {hair_color} -//
    • -//
  • -// Skin Color: {skin_color} -//
    • -//     -//     -//     -//     -// ); -// } - -// export default Character; - import React, { useState } from 'react'; - +import { Collapse, Button, CardBody, Card } from 'reactstrap'; function Character(props) { const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color} = props; + const [isOpen, setIsOpen] = useState(false); + + const toggle = () => setIsOpen(!isOpen); return ( -
    -

    Name: {name}

    -

    - gender: {gender} - Height: {height} - Mass: {mass} - BirthYear: {birth_year} - Eye Color: {eye_color} - Hair Color: {hair_color} - Skin Color: {skin_color} -

    -
    + + + + + +
  • + gender: {gender} +
    • +
  • + Height: {height} +
    • +
  • + Mass: {mass} +
    • +
  • + BirthYear: {birth_year} +
    • +
  • + Eye Color: {eye_color} +
    • +
  • + Hair Color: {hair_color} +
    • +
  • + Skin Color: {skin_color} +
    • +     +     +     +     ); } -export default Character; \ No newline at end of file +export default Character; + +// function Character(props) { +// const { name, height, eye_color, gender, mass, birth_year, hair_color, skin_color} = props; + +// return ( +//
    +//

    Name: {name}

    +//

    +// gender: {gender} +// Height: {height} +// Mass: {mass} +// BirthYear: {birth_year} +// Eye Color: {eye_color} +// Hair Color: {hair_color} +// Skin Color: {skin_color} +//

    +//
    +// ); +// } + +// export default Character; \ No newline at end of file From 68588b3ff3c9926993c807c097e766b9ffb1e5aa Mon Sep 17 00:00:00 2001 From: Jomar Banting Date: Sun, 21 May 2023 12:32:33 -0400 Subject: [PATCH 10/10] modified --- src/App.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index e988e5446..e531f52b4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react'; import Character from './components/Character' import axios from 'axios'; -import { Button } from "reactstrap"; const App = () => { // Try to think through what state you'll need for this app before starting. Then build out @@ -45,8 +44,7 @@ homeworld: "http://swapi.dev/api/planets/1/" id: 1 mass: "77" name: "Luke Skywalker" -skin_color: -"fair" +skin_color: "fair" species: [] starships: ['http://swapi.dev/api/starships/12/', 'http://swapi.dev/api/starships/22/'] url: "http://swapi.dev/api/people/1/"