From b5686a78a9be70c7cc607f0fea9d151a0cfb0a2b Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Tue, 18 Oct 2022 20:34:57 -0300 Subject: [PATCH 01/10] alterando readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9ac398f..2277f51 100644 --- a/README.md +++ b/README.md @@ -46,3 +46,4 @@ Esse projeto está sob a licença MIT. --- Feito com ♥ by Rocketseat :wave: [Participe da nossa comunidade!](https://discord.gg/rocketseat) +Desenvolvido por Lucas \ No newline at end of file From c3ae04b3ed2d15466b75a42a2def35fbd42bbfe7 Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Tue, 18 Oct 2022 21:08:15 -0300 Subject: [PATCH 02/10] mudado texto readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2277f51..9d382ce 100644 --- a/README.md +++ b/README.md @@ -46,4 +46,4 @@ Esse projeto está sob a licença MIT. --- Feito com ♥ by Rocketseat :wave: [Participe da nossa comunidade!](https://discord.gg/rocketseat) -Desenvolvido por Lucas \ No newline at end of file +Desenvolvido por Lucas Filipe From b3caf9426e6efc5b566ab7746f17214279fb8099 Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Tue, 18 Oct 2022 21:16:41 -0300 Subject: [PATCH 03/10] trabalhando com a DOM --- .vscode/settings.json | 2 +- package-lock.json | 881 ++++++++++++++++++++++++++++++++++++++++++ src/main.js | 19 + 3 files changed, 901 insertions(+), 1 deletion(-) create mode 100644 package-lock.json diff --git a/.vscode/settings.json b/.vscode/settings.json index 8c0b1ca..058f57b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -33,5 +33,5 @@ } }, "terminal.integrated.defaultProfile.windows": "Git Bash", - "window.zoomLevel": 0 + "window.zoomLevel": -1 } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..8aa47c2 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,881 @@ +{ + "name": "projeto-base", + "version": "0.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "projeto-base", + "version": "0.0.0", + "devDependencies": { + "vite": "^3.1.0" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.11.tgz", + "integrity": "sha512-PzMcQLazLBkwDEkrNPi9AbjFt6+3I7HKbiYF2XtWQ7wItrHvEOeO3T8Am434zAozWtVP7lrTue1bEfc2nYWeCA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.11.tgz", + "integrity": "sha512-geWp637tUhNmhL3Xgy4Bj703yXB9dqiLJe05lCUfjSFDrQf9C/8pArusyPUbUbPwlC/EAUjBw32sxuIl/11dZw==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.11.tgz", + "integrity": "sha512-OgHGuhlfZ//mToxjte1D5iiiQgWfJ2GByVMwEC/IuoXsBGkuyK1+KrjYu0laSpnN/L1UmLUCv0s25vObdc1bVg==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.15.11", + "@esbuild/linux-loong64": "0.15.11", + "esbuild-android-64": "0.15.11", + "esbuild-android-arm64": "0.15.11", + "esbuild-darwin-64": "0.15.11", + "esbuild-darwin-arm64": "0.15.11", + "esbuild-freebsd-64": "0.15.11", + "esbuild-freebsd-arm64": "0.15.11", + "esbuild-linux-32": "0.15.11", + "esbuild-linux-64": "0.15.11", + "esbuild-linux-arm": "0.15.11", + "esbuild-linux-arm64": "0.15.11", + "esbuild-linux-mips64le": "0.15.11", + "esbuild-linux-ppc64le": "0.15.11", + "esbuild-linux-riscv64": "0.15.11", + "esbuild-linux-s390x": "0.15.11", + "esbuild-netbsd-64": "0.15.11", + "esbuild-openbsd-64": "0.15.11", + "esbuild-sunos-64": "0.15.11", + "esbuild-windows-32": "0.15.11", + "esbuild-windows-64": "0.15.11", + "esbuild-windows-arm64": "0.15.11" + } + }, + "node_modules/esbuild-android-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.11.tgz", + "integrity": "sha512-rrwoXEiuI1kaw4k475NJpexs8GfJqQUKcD08VR8sKHmuW9RUuTR2VxcupVvHdiGh9ihxL9m3lpqB1kju92Ialw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-android-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.11.tgz", + "integrity": "sha512-/hDubOg7BHOhUUsT8KUIU7GfZm5bihqssvqK5PfO4apag7YuObZRZSzViyEKcFn2tPeHx7RKbSBXvAopSHDZJQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-darwin-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.11.tgz", + "integrity": "sha512-1DqHD0ms3AhiwkKnjRUzmiW7JnaJJr5FKrPiR7xuyMwnjDqvNWDdMq4rKSD9OC0piFNK6n0LghsglNMe2MwJtA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-darwin-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.11.tgz", + "integrity": "sha512-OMzhxSbS0lwwrW40HHjRCeVIJTURdXFA8c3GU30MlHKuPCcvWNUIKVucVBtNpJySXmbkQMDJdJNrXzNDyvoqvQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-freebsd-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.11.tgz", + "integrity": "sha512-8dKP26r0/Qyez8nTCwpq60QbuYKOeBygdgOAWGCRalunyeqWRoSZj9TQjPDnTTI9joxd3QYw3UhVZTKxO9QdRg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-freebsd-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.11.tgz", + "integrity": "sha512-aSGiODiukLGGnSg/O9+cGO2QxEacrdCtCawehkWYTt5VX1ni2b9KoxpHCT9h9Y6wGqNHmXFnB47RRJ8BIqZgmQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-32": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.11.tgz", + "integrity": "sha512-lsrAfdyJBGx+6aHIQmgqUonEzKYeBnyfJPkT6N2dOf1RoXYYV1BkWB6G02tjsrz1d5wZzaTc3cF+TKmuTo/ZwA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.11.tgz", + "integrity": "sha512-Y2Rh+PcyVhQqXKBTacPCltINN3uIw2xC+dsvLANJ1SpK5NJUtxv8+rqWpjmBgaNWKQT1/uGpMmA9olALy9PLVA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-arm": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.11.tgz", + "integrity": "sha512-TJllTVk5aSyqPFvvcHTvf6Wu1ZKhWpJ/qNmZO8LL/XeB+LXCclm7HQHNEIz6MT7IX8PmlC1BZYrOiw2sXSB95A==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.11.tgz", + "integrity": "sha512-uhcXiTwTmD4OpxJu3xC5TzAAw6Wzf9O1XGWL448EE9bqGjgV1j+oK3lIHAfsHnuIn8K4nDW8yjX0Sv5S++oRuw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-mips64le": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.11.tgz", + "integrity": "sha512-WD61y/R1M4BLe4gxXRypoQ0Ci+Vjf714QYzcPNkiYv5I8K8WDz2ZR8Bm6cqKxd6rD+e/rZgPDbhQ9PCf7TMHmA==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-ppc64le": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.11.tgz", + "integrity": "sha512-JVleZS9oPVLTlBhPTWgOwxFWU/wMUdlBwTbGA4GF8c38sLbS13cupj+C8bLq929jU7EMWry4SaL+tKGIaTlqKg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-riscv64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.11.tgz", + "integrity": "sha512-9aLIalZ2HFHIOZpmVU11sEAS9F8TnHw49daEjcgMpBXHFF57VuT9f9/9LKJhw781Gda0P9jDkuCWJ0tFbErvJw==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-linux-s390x": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.11.tgz", + "integrity": "sha512-sZHtiXXOKsLI3XGBGoYO4qKBzJlb8xNsWmvFiwFMHFzA4AXgDP1KDp7Dawe9C2pavTRBDvl+Ok4n/DHQ59oaTg==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-netbsd-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.11.tgz", + "integrity": "sha512-hUC9yN06K9sg7ju4Vgu9ChAPdsEgtcrcLfyNT5IKwKyfpLvKUwCMZSdF+gRD3WpyZelgTQfJ+pDx5XFbXTlB0A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-openbsd-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.11.tgz", + "integrity": "sha512-0bBo9SQR4t66Wd91LGMAqmWorzO0TTzVjYiifwoFtel8luFeXuPThQnEm5ztN4g0fnvcp7AnUPPzS/Depf17wQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-sunos-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.11.tgz", + "integrity": "sha512-EuBdTGlsMTjEl1sQnBX2jfygy7iR6CKfvOzi+gEOfhDqbHXsmY1dcpbVtcwHAg9/2yUZSfMJHMAgf1z8M4yyyw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-windows-32": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.11.tgz", + "integrity": "sha512-O0/Wo1Wk6dc0rZSxkvGpmTNIycEznHmkObTFz2VHBhjPsO4ZpCgfGxNkCpz4AdAIeMczpTXt/8d5vdJNKEGC+Q==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-windows-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.11.tgz", + "integrity": "sha512-x977Q4HhNjnHx00b4XLAnTtj5vfbdEvkxaQwC1Zh5AN8g5EX+izgZ6e5QgqJgpzyRNJqh4hkgIJF1pyy1be0mQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild-windows-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.11.tgz", + "integrity": "sha512-VwUHFACuBahrvntdcMKZteUZ9HaYrBRODoKe4tIWxguQRvvYoYb7iu5LrcRS/FQx8KPZNaa72zuqwVtHeXsITw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/is-core-module": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", + "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", + "dev": true, + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/nanoid": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "dev": true, + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/postcss": { + "version": "8.4.18", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", + "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + } + ], + "dependencies": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/resolve": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", + "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "dev": true, + "dependencies": { + "is-core-module": "^2.9.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/rollup": { + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=10.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/vite": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", + "dev": true, + "dependencies": { + "esbuild": "^0.15.9", + "postcss": "^8.4.16", + "resolve": "^1.22.1", + "rollup": "~2.78.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "less": "*", + "sass": "*", + "stylus": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "terser": { + "optional": true + } + } + } + }, + "dependencies": { + "@esbuild/android-arm": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.11.tgz", + "integrity": "sha512-PzMcQLazLBkwDEkrNPi9AbjFt6+3I7HKbiYF2XtWQ7wItrHvEOeO3T8Am434zAozWtVP7lrTue1bEfc2nYWeCA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-loong64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.11.tgz", + "integrity": "sha512-geWp637tUhNmhL3Xgy4Bj703yXB9dqiLJe05lCUfjSFDrQf9C/8pArusyPUbUbPwlC/EAUjBw32sxuIl/11dZw==", + "dev": true, + "optional": true + }, + "esbuild": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.11.tgz", + "integrity": "sha512-OgHGuhlfZ//mToxjte1D5iiiQgWfJ2GByVMwEC/IuoXsBGkuyK1+KrjYu0laSpnN/L1UmLUCv0s25vObdc1bVg==", + "dev": true, + "requires": { + "@esbuild/android-arm": "0.15.11", + "@esbuild/linux-loong64": "0.15.11", + "esbuild-android-64": "0.15.11", + "esbuild-android-arm64": "0.15.11", + "esbuild-darwin-64": "0.15.11", + "esbuild-darwin-arm64": "0.15.11", + "esbuild-freebsd-64": "0.15.11", + "esbuild-freebsd-arm64": "0.15.11", + "esbuild-linux-32": "0.15.11", + "esbuild-linux-64": "0.15.11", + "esbuild-linux-arm": "0.15.11", + "esbuild-linux-arm64": "0.15.11", + "esbuild-linux-mips64le": "0.15.11", + "esbuild-linux-ppc64le": "0.15.11", + "esbuild-linux-riscv64": "0.15.11", + "esbuild-linux-s390x": "0.15.11", + "esbuild-netbsd-64": "0.15.11", + "esbuild-openbsd-64": "0.15.11", + "esbuild-sunos-64": "0.15.11", + "esbuild-windows-32": "0.15.11", + "esbuild-windows-64": "0.15.11", + "esbuild-windows-arm64": "0.15.11" + } + }, + "esbuild-android-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.11.tgz", + "integrity": "sha512-rrwoXEiuI1kaw4k475NJpexs8GfJqQUKcD08VR8sKHmuW9RUuTR2VxcupVvHdiGh9ihxL9m3lpqB1kju92Ialw==", + "dev": true, + "optional": true + }, + "esbuild-android-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.11.tgz", + "integrity": "sha512-/hDubOg7BHOhUUsT8KUIU7GfZm5bihqssvqK5PfO4apag7YuObZRZSzViyEKcFn2tPeHx7RKbSBXvAopSHDZJQ==", + "dev": true, + "optional": true + }, + "esbuild-darwin-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.11.tgz", + "integrity": "sha512-1DqHD0ms3AhiwkKnjRUzmiW7JnaJJr5FKrPiR7xuyMwnjDqvNWDdMq4rKSD9OC0piFNK6n0LghsglNMe2MwJtA==", + "dev": true, + "optional": true + }, + "esbuild-darwin-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.11.tgz", + "integrity": "sha512-OMzhxSbS0lwwrW40HHjRCeVIJTURdXFA8c3GU30MlHKuPCcvWNUIKVucVBtNpJySXmbkQMDJdJNrXzNDyvoqvQ==", + "dev": true, + "optional": true + }, + "esbuild-freebsd-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.11.tgz", + "integrity": "sha512-8dKP26r0/Qyez8nTCwpq60QbuYKOeBygdgOAWGCRalunyeqWRoSZj9TQjPDnTTI9joxd3QYw3UhVZTKxO9QdRg==", + "dev": true, + "optional": true + }, + "esbuild-freebsd-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.11.tgz", + "integrity": "sha512-aSGiODiukLGGnSg/O9+cGO2QxEacrdCtCawehkWYTt5VX1ni2b9KoxpHCT9h9Y6wGqNHmXFnB47RRJ8BIqZgmQ==", + "dev": true, + "optional": true + }, + "esbuild-linux-32": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.11.tgz", + "integrity": "sha512-lsrAfdyJBGx+6aHIQmgqUonEzKYeBnyfJPkT6N2dOf1RoXYYV1BkWB6G02tjsrz1d5wZzaTc3cF+TKmuTo/ZwA==", + "dev": true, + "optional": true + }, + "esbuild-linux-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.11.tgz", + "integrity": "sha512-Y2Rh+PcyVhQqXKBTacPCltINN3uIw2xC+dsvLANJ1SpK5NJUtxv8+rqWpjmBgaNWKQT1/uGpMmA9olALy9PLVA==", + "dev": true, + "optional": true + }, + "esbuild-linux-arm": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.11.tgz", + "integrity": "sha512-TJllTVk5aSyqPFvvcHTvf6Wu1ZKhWpJ/qNmZO8LL/XeB+LXCclm7HQHNEIz6MT7IX8PmlC1BZYrOiw2sXSB95A==", + "dev": true, + "optional": true + }, + "esbuild-linux-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.11.tgz", + "integrity": "sha512-uhcXiTwTmD4OpxJu3xC5TzAAw6Wzf9O1XGWL448EE9bqGjgV1j+oK3lIHAfsHnuIn8K4nDW8yjX0Sv5S++oRuw==", + "dev": true, + "optional": true + }, + "esbuild-linux-mips64le": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.11.tgz", + "integrity": "sha512-WD61y/R1M4BLe4gxXRypoQ0Ci+Vjf714QYzcPNkiYv5I8K8WDz2ZR8Bm6cqKxd6rD+e/rZgPDbhQ9PCf7TMHmA==", + "dev": true, + "optional": true + }, + "esbuild-linux-ppc64le": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.11.tgz", + "integrity": "sha512-JVleZS9oPVLTlBhPTWgOwxFWU/wMUdlBwTbGA4GF8c38sLbS13cupj+C8bLq929jU7EMWry4SaL+tKGIaTlqKg==", + "dev": true, + "optional": true + }, + "esbuild-linux-riscv64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.11.tgz", + "integrity": "sha512-9aLIalZ2HFHIOZpmVU11sEAS9F8TnHw49daEjcgMpBXHFF57VuT9f9/9LKJhw781Gda0P9jDkuCWJ0tFbErvJw==", + "dev": true, + "optional": true + }, + "esbuild-linux-s390x": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.11.tgz", + "integrity": "sha512-sZHtiXXOKsLI3XGBGoYO4qKBzJlb8xNsWmvFiwFMHFzA4AXgDP1KDp7Dawe9C2pavTRBDvl+Ok4n/DHQ59oaTg==", + "dev": true, + "optional": true + }, + "esbuild-netbsd-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.11.tgz", + "integrity": "sha512-hUC9yN06K9sg7ju4Vgu9ChAPdsEgtcrcLfyNT5IKwKyfpLvKUwCMZSdF+gRD3WpyZelgTQfJ+pDx5XFbXTlB0A==", + "dev": true, + "optional": true + }, + "esbuild-openbsd-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.11.tgz", + "integrity": "sha512-0bBo9SQR4t66Wd91LGMAqmWorzO0TTzVjYiifwoFtel8luFeXuPThQnEm5ztN4g0fnvcp7AnUPPzS/Depf17wQ==", + "dev": true, + "optional": true + }, + "esbuild-sunos-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.11.tgz", + "integrity": "sha512-EuBdTGlsMTjEl1sQnBX2jfygy7iR6CKfvOzi+gEOfhDqbHXsmY1dcpbVtcwHAg9/2yUZSfMJHMAgf1z8M4yyyw==", + "dev": true, + "optional": true + }, + "esbuild-windows-32": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.11.tgz", + "integrity": "sha512-O0/Wo1Wk6dc0rZSxkvGpmTNIycEznHmkObTFz2VHBhjPsO4ZpCgfGxNkCpz4AdAIeMczpTXt/8d5vdJNKEGC+Q==", + "dev": true, + "optional": true + }, + "esbuild-windows-64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.11.tgz", + "integrity": "sha512-x977Q4HhNjnHx00b4XLAnTtj5vfbdEvkxaQwC1Zh5AN8g5EX+izgZ6e5QgqJgpzyRNJqh4hkgIJF1pyy1be0mQ==", + "dev": true, + "optional": true + }, + "esbuild-windows-arm64": { + "version": "0.15.11", + "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.11.tgz", + "integrity": "sha512-VwUHFACuBahrvntdcMKZteUZ9HaYrBRODoKe4tIWxguQRvvYoYb7iu5LrcRS/FQx8KPZNaa72zuqwVtHeXsITw==", + "dev": true, + "optional": true + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true + }, + "function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true + }, + "has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, + "requires": { + "function-bind": "^1.1.1" + } + }, + "is-core-module": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", + "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", + "dev": true, + "requires": { + "has": "^1.0.3" + } + }, + "nanoid": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "dev": true + }, + "path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "postcss": { + "version": "8.4.18", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz", + "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==", + "dev": true, + "requires": { + "nanoid": "^3.3.4", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, + "resolve": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", + "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "dev": true, + "requires": { + "is-core-module": "^2.9.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + } + }, + "rollup": { + "version": "2.78.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz", + "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==", + "dev": true, + "requires": { + "fsevents": "~2.3.2" + } + }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true + }, + "supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true + }, + "vite": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz", + "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==", + "dev": true, + "requires": { + "esbuild": "^0.15.9", + "fsevents": "~2.3.2", + "postcss": "^8.4.16", + "resolve": "^1.22.1", + "rollup": "~2.78.0" + } + } + } +} diff --git a/src/main.js b/src/main.js index 5cb2f01..da830c0 100644 --- a/src/main.js +++ b/src/main.js @@ -1 +1,20 @@ import "./css/index.css" + +const ccBgColor01 = document.querySelector(".cc-bg svg > g g:nth-child(1) path") +const ccBgColor02 = document.querySelector(".cc-bg svg > g g:nth-child(2) path") +const ccLogo = document.querySelector(".cc-logo span:nth-child(2) img") + +//função para mudar backgroud do cartao +function setCard(type) { + const colors = { + visa: ["#436d99", "#2d57f2"], + mastercard: ["#df6f29", "#c69347"], + default: ["black", "gray"] + } + + ccBgColor01.setAttribute("fill", colors[type][0]) + ccBgColor02.setAttribute("fill", colors[type][1]) + ccLogo.setAttribute("src", `cc-${type}.svg`) +} + +setCard("visa") From 0cc99a24c7caadbd3d6d792b7f5d9c4d713fc0ca Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Wed, 19 Oct 2022 19:53:53 -0300 Subject: [PATCH 04/10] criando mascatas para formulario e expressoes regulares --- package-lock.json | 16 ++++++++++ package.json | 3 ++ src/main.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 93 insertions(+) diff --git a/package-lock.json b/package-lock.json index 8aa47c2..8e472e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "projeto-base", "version": "0.0.0", + "dependencies": { + "imask": "^6.4.3" + }, "devDependencies": { "vite": "^3.1.0" } @@ -432,6 +435,14 @@ "node": ">= 0.4.0" } }, + "node_modules/imask": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz", + "integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw==", + "engines": { + "npm": ">=4.0.0" + } + }, "node_modules/is-core-module": { "version": "2.11.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", @@ -794,6 +805,11 @@ "function-bind": "^1.1.1" } }, + "imask": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz", + "integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw==" + }, "is-core-module": { "version": "2.11.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", diff --git a/package.json b/package.json index ab2e72f..38ebe31 100644 --- a/package.json +++ b/package.json @@ -10,5 +10,8 @@ }, "devDependencies": { "vite": "^3.1.0" + }, + "dependencies": { + "imask": "^6.4.3" } } diff --git a/src/main.js b/src/main.js index da830c0..df90e4d 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,5 @@ import "./css/index.css" +import IMask from "imask" const ccBgColor01 = document.querySelector(".cc-bg svg > g g:nth-child(1) path") const ccBgColor02 = document.querySelector(".cc-bg svg > g g:nth-child(2) path") @@ -18,3 +19,76 @@ function setCard(type) { } setCard("visa") + +//criando mascara para input CVC +const securityCode = document.querySelector("#security-code") +const securityCodePattern = { + mask: "0000" +} +const securityCodeMasked = IMask(securityCode, securityCodePattern) + +//criando mascara para expiração +const experationDate = document.querySelector("#expiration-date") +const experationDatePattern = { + mask: "MM{/}YY", + + //validando mes + blocks: { + MM: { + mask: IMask.MaskedRange, + from: 1, + to: 12 + }, + + YY: { + mask: IMask.MaskedRange, + from: String(new Date().getFullYear()).slice(2), // pega a data atual e os dois ultmos numeros do ano + to: String(new Date().getFullYear() + 10).slice(2) //pega a data atual + 10 anos + } + } +} +const experationDateMasked = IMask(experationDate, experationDatePattern) + +//visa +//criando mascara para o numero de cartao visa +//inicia com 4 seguido de mais 15 digitos + +//master +//criando mascara para o numero de cartao master +//inicia com 5 seguido de um digito entre 1 e 5, seguido por mais dois digitos +//ou inicia com 22 seguido de um digito entre 2 e 9, seguido por mais 1 digitos +//ou inicia com 2 seguido de um digito entre 3 e 7, seguido por mais dois digitos +const cardNumber = document.querySelector("#card-number") +const cardNumberPatter = { + mask: [ + { + mask: "0000 0000 0000 0000", + regex: /^4\d{0,15}/, //expressao regular + cardtype: "visa" + }, + + { + mask: "0000 0000 0000 0000", + regex: /(^5[1-5]\d{0,2}| ^22[2-9]\d| ^2[3-7]\d{0,2}\d{0,12})/, //expressao regular + cardtype: "mastercard" + }, + + { + mask: "0000 0000 0000 0000", + cardtype: "default" + } + ], + + // + dispatch: function(appended, dynamicMasked) { + const number = (dynamicMasked.value + appended).replace(/\D/g, "") + + const foundMask = dynamicMasked.compiledMasks.find(function(item) { + return number.match(item.regex) + }) + + console.log(foundMask) + return foundMask + } +} +const cardNumberMasked = IMask(cardNumber, cardNumberPatter) From 21e0e2e26e3f86f529c0e9b717d1beae9091f084 Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Thu, 20 Oct 2022 00:11:39 -0300 Subject: [PATCH 05/10] criando eventos --- index.html | 2 +- src/main.js | 39 +++++++++++++++++++++++++-------------- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 185cfbf..07d707a 100644 --- a/index.html +++ b/index.html @@ -155,7 +155,7 @@ - + diff --git a/src/main.js b/src/main.js index df90e4d..4ae1637 100644 --- a/src/main.js +++ b/src/main.js @@ -10,7 +10,7 @@ function setCard(type) { const colors = { visa: ["#436d99", "#2d57f2"], mastercard: ["#df6f29", "#c69347"], - default: ["black", "gray"] + default: ["black", "gray"], } ccBgColor01.setAttribute("fill", colors[type][0]) @@ -23,7 +23,7 @@ setCard("visa") //criando mascara para input CVC const securityCode = document.querySelector("#security-code") const securityCodePattern = { - mask: "0000" + mask: "0000", } const securityCodeMasked = IMask(securityCode, securityCodePattern) @@ -37,15 +37,15 @@ const experationDatePattern = { MM: { mask: IMask.MaskedRange, from: 1, - to: 12 + to: 12, }, YY: { mask: IMask.MaskedRange, from: String(new Date().getFullYear()).slice(2), // pega a data atual e os dois ultmos numeros do ano - to: String(new Date().getFullYear() + 10).slice(2) //pega a data atual + 10 anos - } - } + to: String(new Date().getFullYear() + 10).slice(2), //pega a data atual + 10 anos + }, + }, } const experationDateMasked = IMask(experationDate, experationDatePattern) @@ -64,31 +64,42 @@ const cardNumberPatter = { { mask: "0000 0000 0000 0000", regex: /^4\d{0,15}/, //expressao regular - cardtype: "visa" + cardtype: "visa", }, { mask: "0000 0000 0000 0000", regex: /(^5[1-5]\d{0,2}| ^22[2-9]\d| ^2[3-7]\d{0,2}\d{0,12})/, //expressao regular - cardtype: "mastercard" + cardtype: "mastercard", }, { mask: "0000 0000 0000 0000", - cardtype: "default" - } + cardtype: "default", + }, ], // - dispatch: function(appended, dynamicMasked) { + dispatch: function (appended, dynamicMasked) { const number = (dynamicMasked.value + appended).replace(/\D/g, "") - const foundMask = dynamicMasked.compiledMasks.find(function(item) { + const foundMask = dynamicMasked.compiledMasks.find(function (item) { return number.match(item.regex) }) - console.log(foundMask) + //console.log(foundMask) return foundMask - } + }, } const cardNumberMasked = IMask(cardNumber, cardNumberPatter) + +//criando evento +const addButton = document.querySelector("#buttonCard") //selecionando elemento id que é guardado na variavel addButton +addButton.addEventListener("click", () => { + alert("Cartão adicionado!") +}) //é adicionado ao elemento addButton o evento addEventListener para "escutar" se o usuario ira clicar no botao, clicando no botao é disparado uma função + +//para nao recarregar formulario ao executar evento +document.querySelector("form").addEventListener("submit", (event) => { + event.preventDefault() +}) From db8424ad764ae764d01b6ab9c40ac62e5c30f7e5 Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Thu, 20 Oct 2022 00:25:46 -0300 Subject: [PATCH 06/10] atualizando readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9d382ce..aad2ba2 100644 --- a/README.md +++ b/README.md @@ -46,4 +46,5 @@ Esse projeto está sob a licença MIT. --- Feito com ♥ by Rocketseat :wave: [Participe da nossa comunidade!](https://discord.gg/rocketseat) -Desenvolvido por Lucas Filipe + +#### Desenvolvido por Lucas Filipe From 1cfc2952de894001f104fd0590c8d0f259ef6b1d Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Thu, 20 Oct 2022 01:39:57 -0300 Subject: [PATCH 07/10] obtendo e e exibindo nome do titular --- src/main.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/main.js b/src/main.js index 4ae1637..19120b0 100644 --- a/src/main.js +++ b/src/main.js @@ -103,3 +103,13 @@ addButton.addEventListener("click", () => { document.querySelector("form").addEventListener("submit", (event) => { event.preventDefault() }) + + +const cardHolder = document.querySelector("#card-holder") //seleciona elemento que tem o id: card-holder +//criando evento no input +cardHolder.addEventListener("input", ()=> { + const ccHolder = document.querySelector(".cc-holder .value") //selecionado elemneto nome do titular e seu valor + + ccHolder.innerText = cardHolder.value.length === 0 ? + 'FULANO DA SILVA' : cardHolder.value +}) \ No newline at end of file From 9c46d3379ffdd2339651d8333cc5790a26dee903 Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Thu, 20 Oct 2022 11:02:11 -0300 Subject: [PATCH 08/10] obtendo e exibindo numero do cartao --- src/main.js | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/main.js b/src/main.js index 19120b0..2f3b2f0 100644 --- a/src/main.js +++ b/src/main.js @@ -6,7 +6,7 @@ const ccBgColor02 = document.querySelector(".cc-bg svg > g g:nth-child(2) path") const ccLogo = document.querySelector(".cc-logo span:nth-child(2) img") //função para mudar backgroud do cartao -function setCard(type) { +function setCardType(type) { const colors = { visa: ["#436d99", "#2d57f2"], mastercard: ["#df6f29", "#c69347"], @@ -18,7 +18,7 @@ function setCard(type) { ccLogo.setAttribute("src", `cc-${type}.svg`) } -setCard("visa") +globalThis.setCardType = setCardType //criando mascara para input CVC const securityCode = document.querySelector("#security-code") @@ -112,4 +112,27 @@ cardHolder.addEventListener("input", ()=> { ccHolder.innerText = cardHolder.value.length === 0 ? 'FULANO DA SILVA' : cardHolder.value -}) \ No newline at end of file +}) + +//criando evento com imask do codigo +securityCodeMasked.on("accept", () => { + updateSecuryCode(securityCodeMasked.value) +}) + +function updateSecuryCode(code){ + const ccSecurity = document.querySelector(".cc-security .value") + ccSecurity.innerText = code.length === 0 ? "123" : code +} + +//criando evento com imask do numero do cartao +cardNumberMasked.on("accept", () => { + const cardType = cardNumberMasked.masked.currentMask.cardtype //seleciona tipo do cartao + setCardType(cardType) + + updateCardNumber(cardNumberMasked.value) +}) + +function updateCardNumber(number) { + const ccNumber = document.querySelector(".cc-number") + ccNumber.innerText = number.length === 0 ? "1234 5678 9012 3456" : number +} From 8162e3964c6f94dd10a22a2b15e97e79c054301c Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Thu, 20 Oct 2022 20:58:55 -0300 Subject: [PATCH 09/10] =?UTF-8?q?obtendo=20e=20exibindo=20expira=C3=A7?= =?UTF-8?q?=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/main.js b/src/main.js index 2f3b2f0..1a9de77 100644 --- a/src/main.js +++ b/src/main.js @@ -28,8 +28,8 @@ const securityCodePattern = { const securityCodeMasked = IMask(securityCode, securityCodePattern) //criando mascara para expiração -const experationDate = document.querySelector("#expiration-date") -const experationDatePattern = { +const expirationDate = document.querySelector("#expiration-date") +const expirationDatePattern = { mask: "MM{/}YY", //validando mes @@ -47,7 +47,7 @@ const experationDatePattern = { }, }, } -const experationDateMasked = IMask(experationDate, experationDatePattern) +const expirationDateMasked = IMask(expirationDate, expirationDatePattern) //visa //criando mascara para o numero de cartao visa @@ -136,3 +136,13 @@ function updateCardNumber(number) { const ccNumber = document.querySelector(".cc-number") ccNumber.innerText = number.length === 0 ? "1234 5678 9012 3456" : number } + +//criando evento com imask para data de expiração +expirationDateMasked.on("accept", () => { + updateExpirationDate(expirationDateMasked.value) +}) + +function updateExpirationDate(date){ + const ccExpiration = document.querySelector(".cc-extra .value") + ccExpiration.innerText = date.length === 0 ? "02/32" : date +} \ No newline at end of file From 4f8620cdbe33d2689e0151edf3f94b9cb7571bff Mon Sep 17 00:00:00 2001 From: lucasFilppe Date: Mon, 16 Jan 2023 13:36:47 -0300 Subject: [PATCH 10/10] atualizando CVC valido para tres numeros --- src/main.js | 47 +++++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/src/main.js b/src/main.js index 1a9de77..22fdf8a 100644 --- a/src/main.js +++ b/src/main.js @@ -10,7 +10,7 @@ function setCardType(type) { const colors = { visa: ["#436d99", "#2d57f2"], mastercard: ["#df6f29", "#c69347"], - default: ["black", "gray"], + default: ["black", "gray"] } ccBgColor01.setAttribute("fill", colors[type][0]) @@ -23,7 +23,7 @@ globalThis.setCardType = setCardType //criando mascara para input CVC const securityCode = document.querySelector("#security-code") const securityCodePattern = { - mask: "0000", + mask: "000" } const securityCodeMasked = IMask(securityCode, securityCodePattern) @@ -37,15 +37,15 @@ const expirationDatePattern = { MM: { mask: IMask.MaskedRange, from: 1, - to: 12, + to: 12 }, YY: { mask: IMask.MaskedRange, from: String(new Date().getFullYear()).slice(2), // pega a data atual e os dois ultmos numeros do ano - to: String(new Date().getFullYear() + 10).slice(2), //pega a data atual + 10 anos - }, - }, + to: String(new Date().getFullYear() + 10).slice(2) //pega a data atual + 10 anos + } + } } const expirationDateMasked = IMask(expirationDate, expirationDatePattern) @@ -64,32 +64,32 @@ const cardNumberPatter = { { mask: "0000 0000 0000 0000", regex: /^4\d{0,15}/, //expressao regular - cardtype: "visa", + cardtype: "visa" }, { mask: "0000 0000 0000 0000", regex: /(^5[1-5]\d{0,2}| ^22[2-9]\d| ^2[3-7]\d{0,2}\d{0,12})/, //expressao regular - cardtype: "mastercard", + cardtype: "mastercard" }, { mask: "0000 0000 0000 0000", - cardtype: "default", - }, + cardtype: "default" + } ], // - dispatch: function (appended, dynamicMasked) { + dispatch: function(appended, dynamicMasked) { const number = (dynamicMasked.value + appended).replace(/\D/g, "") - const foundMask = dynamicMasked.compiledMasks.find(function (item) { + const foundMask = dynamicMasked.compiledMasks.find(function(item) { return number.match(item.regex) }) //console.log(foundMask) return foundMask - }, + } } const cardNumberMasked = IMask(cardNumber, cardNumberPatter) @@ -100,28 +100,27 @@ addButton.addEventListener("click", () => { }) //é adicionado ao elemento addButton o evento addEventListener para "escutar" se o usuario ira clicar no botao, clicando no botao é disparado uma função //para nao recarregar formulario ao executar evento -document.querySelector("form").addEventListener("submit", (event) => { +document.querySelector("form").addEventListener("submit", event => { event.preventDefault() }) - const cardHolder = document.querySelector("#card-holder") //seleciona elemento que tem o id: card-holder //criando evento no input -cardHolder.addEventListener("input", ()=> { +cardHolder.addEventListener("input", () => { const ccHolder = document.querySelector(".cc-holder .value") //selecionado elemneto nome do titular e seu valor - ccHolder.innerText = cardHolder.value.length === 0 ? - 'FULANO DA SILVA' : cardHolder.value -}) + ccHolder.innerText = + cardHolder.value.length === 0 ? "FULANO DA SILVA" : cardHolder.value +}) //criando evento com imask do codigo securityCodeMasked.on("accept", () => { updateSecuryCode(securityCodeMasked.value) }) -function updateSecuryCode(code){ +function updateSecuryCode(code) { const ccSecurity = document.querySelector(".cc-security .value") - ccSecurity.innerText = code.length === 0 ? "123" : code + ccSecurity.innerText = code.length === 0 ? "123" : code } //criando evento com imask do numero do cartao @@ -142,7 +141,7 @@ expirationDateMasked.on("accept", () => { updateExpirationDate(expirationDateMasked.value) }) -function updateExpirationDate(date){ +function updateExpirationDate(date) { const ccExpiration = document.querySelector(".cc-extra .value") - ccExpiration.innerText = date.length === 0 ? "02/32" : date -} \ No newline at end of file + ccExpiration.innerText = date.length === 0 ? "02/32" : date +}