diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b574ed6 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 zzmarques + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..201be80 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# card + diff --git a/css/media.css b/css/media.css new file mode 100644 index 0000000..a02a40d --- /dev/null +++ b/css/media.css @@ -0,0 +1,70 @@ +@media screen and (min-width: 992px) and (max-width: 1440px){ + + .cont { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + } + main { + background: url('../images/bg-main-desktop.png'); + background-repeat: no-repeat; + background-size: cover; + max-width: 400px; + height: 100vh; + } + #backCard { + top: 315px; + left: 260px; + } + + #frontCard { + left: 188px; + } + form { + height: 100%; + width: 370px; + margin-right: 330px; + } + div#completo { + margin-right: 330px; + } +} + +@media screen and (min-width: 412px) { + form label#cvc { + padding-right: 160px; + } +} + +@media screen and (min-width: 768px) and (max-width: 992px){ + .cont { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + #backCard { + top: 70px; + left: 320px; + } + #frontCard { + top: 160px; + left: 150px; + } + form { + width: 480px; + margin-top: 130px; + } + form label#cvc { + padding-right: 240px; + } + form input[type="text"]#anoCard, input[type="text"]#mesCard { + width: 15%; + + } + form input[type="text"]#cvcCard { + width: 59%; + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..293cf33 --- /dev/null +++ b/css/style.css @@ -0,0 +1,245 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +main { + background: url('../images/bg-main-mobile.png'); + background-repeat: no-repeat; + background-size: cover; + width:100%; + height: 250px; + position: relative; + z-index: 0; +} +#backCard { + background: url('../images/bg-card-back.png'); + background-repeat: no-repeat; + background-size: contain; + height: 200px; + width: 290px; + position: absolute; + top: 35px; + right: 13px; + z-index: 1; +} + +#backCard .cvcCar { + position: relative; + left:230px; + top: 72px; + color: #dedddf; + font-family: "Space Grotesk", sans-serif; + font-size: 11px; + width: 0px; +} + +#frontCard{ + background: url('../images/bg-card-front.png'); + background-repeat: no-repeat; + background-size: contain; + height: 200px; + width: 290px; + position: absolute; + top: 125px; + left: 15px; + z-index: 2; + +} + +#frontCard #cBig { + background-color: white; + width: 30px; + height: 30px; + border-radius: 50%; + margin-right: 10px; +} + +#frontCard #cMin { + border: 1px solid white; + width: 15px; + height: 15px; + border-radius: 50%; +} + +#selo { + display: flex; + align-items: center; + margin: 0px 20px; + padding-top: 15px; +} + +#cantainer { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + margin: 0px 20px; + font-family: "Space Grotesk", sans-serif; + color: white; +} + + +#cantainer #numberCard { + font-size: 18px; + letter-spacing: 1.9px; + padding-top: 30px; + padding-bottom: 16px; +} + +#cantainer #nameCard, #dateCard{ + font-size: 10px; + text-transform: uppercase; + color: #dedddf; + +} + +#nameCard { + position: fixed; + margin-top: 95px; +} + +#dateCard { + position: fixed; + margin-top: 95px; + margin-left: 225px; +} + +form { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + margin-top: 68px; + margin-left: 26px; + + font-family: "Space Grotesk", sans-serif; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 2px; +} + + +form input[type="text"] { + width: 93%; + height: 45px; + margin-top: 7px; + margin-left: 3px; + padding-left: 10px; + border-style: none; + border: 2px solid #dedddf; + border-radius: 10px; + letter-spacing: 2px; + +} + +input[type="text"].error { + border-color: #ff5252; + +} + +form label { + margin-top: 20px; + margin-bottom: 7px; +} + +form input[type="text"]:focus { + outline: none; + border-color: #600594; + border-radius: 10px; +} + +form input[type="text"]::placeholder { + font-size: 16px; + color: #dedddf; +} + +form input[type="text"]#anoCard, input[type="text"]#mesCard { + width: 20%; + +} + +form input[type="text"]#cvcCard { + margin-left: 15px; + width: 48%; +} + +form label#mes { + margin-right: 19px; +} + +form label#cvc { + padding-right: 105px; +} + +.divs { + width: 100%; + margin-top: 15px; +} + +form button { + width: 93%; + padding: 15px; + color: white; + background: #21092f; + border-style: none; + border-radius: 10px; + margin-top: 20px; + font-family: "Space Grotesk", sans-serif; + +} + +div#completo { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 70px; + font-family: "Space Grotesk", sans-serif; +} + +div#completo img, p{ + margin-bottom: 30px; +} + +div#completo h1 { + font-size: 2.5em; + font-weight: 500; + margin-bottom: 10px; + color: #21092f; + letter-spacing: 4px; +} + +div#completo p { + color: #8e8593; +} + + +div#completo button { + width: 90%; + padding: 20px; + background: #21092f; + color: white; + border-style: none; + border-radius: 10px; + font-family: "Space Grotesk", sans-serif; + font-size: 1.1em; + +} + +span { + display: block; + color: #ff5252; + text-transform: none; + font-size: 11px; + margin-left:3px; +} + + + + + + + diff --git a/images/bg-card-back.png b/images/bg-card-back.png new file mode 100644 index 0000000..dca5d33 Binary files /dev/null and b/images/bg-card-back.png differ diff --git a/images/bg-card-front.png b/images/bg-card-front.png new file mode 100644 index 0000000..aa5f3cc Binary files /dev/null and b/images/bg-card-front.png differ diff --git a/images/bg-main-desktop.png b/images/bg-main-desktop.png new file mode 100644 index 0000000..a79b30a Binary files /dev/null and b/images/bg-main-desktop.png differ diff --git a/images/bg-main-mobile.png b/images/bg-main-mobile.png new file mode 100644 index 0000000..d9c5385 Binary files /dev/null and b/images/bg-main-mobile.png differ diff --git a/images/card-logo.svg b/images/card-logo.svg new file mode 100644 index 0000000..0f2cd9e --- /dev/null +++ b/images/card-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon-complete.svg b/images/icon-complete.svg new file mode 100644 index 0000000..ed755e9 --- /dev/null +++ b/images/icon-complete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..aaedf5e --- /dev/null +++ b/index.html @@ -0,0 +1,66 @@ + + + + + + + + + + + Card + + +
+
+ +
+
000
+
+
+
+
+
+
+
+
0000 0000 0000 0000
+
Jane Appleseed
+
00/00
+
+
+
+
+
+
+ + +
+ +
+ + +
+ +
+ + + + + +
+ + +
+ + +
+
+ + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..161ea5a --- /dev/null +++ b/js/main.js @@ -0,0 +1,187 @@ + +const inpust = document.querySelectorAll('input'); +const inputNameCard = document.getElementById('nameCard2'); +const inputNumCard = document.getElementById('numCard'); +const inputMes = document.getElementById('mesCard'); +const inputAno = document.getElementById('anoCard'); +const inputCvc = document.getElementById('cvcCard'); +const numCvc = document.querySelector('.cvcCar'); +const nameCard = document.getElementById('nameCard'); +const numCard = document.getElementById('numberCard'); +const dateCard = document.getElementById('dateCard') +const btn = document.getElementById('btn'); + +inpust.forEach((inpust) => { + inpust.addEventListener('change', () => { + const spn = document.querySelector('span'); + + if(inpust !== '' && spn) { + inpust.classList.remove('error'); + document.querySelector('span').remove(); + } + }) + }); + + +inputNameCard.addEventListener('input', () => { + if(inputNameCard.value.length >= 27) { + inputNameCard.value = inputNameCard.value.slice(0, 27); + } + nameCard.innerHTML = inputNameCard.value; +}); + +inputNumCard.addEventListener('input', () => { + + addSpace() + if(inputNumCard.value.length >= 19) { + inputNumCard.value = inputNumCard.value.slice(0, 19); + + }else if( isNaN(Number(inputNumCard.value)) ) { + notNum(inputNumCard) + } + + numCard.innerHTML = inputNumCard.value; + +}); + +inputMes.addEventListener('input', () => { + if(inputMes.value.length >= 2) { + inputMes.value = inputMes.value.slice(0, 2); + } + addData() +}); + +inputAno.addEventListener('input', () => { + if(inputAno.value.length >= 2) { + inputAno.value = inputAno.value.slice(0, 2); + } + addData() +}); + +inputCvc.addEventListener('input', () => { + if(inputCvc.value.length >= 3) { + inputCvc.value = inputCvc.value.slice(0, 3) + }else if( isNaN(Number(inputCvc.value)) ) { + notNum(inputCvc) + } + numCvc.innerHTML = inputCvc.value + +}); + + +btn.addEventListener('click', (e) => { + e.preventDefault() + const spn = document.querySelector('span') + if((inputNameCard.value === '') && (inputNumCard.value === '') && (inputMes.value === '') && (inputAno.value === '') && (inputCvc.value === '')) { + valiTd() + }else if(inputNameCard.value === ''){ + validacao(inputNameCard) + }else if(inputNumCard.value === ''){ + validacao(inputNumCard) + }else if(inputMes.value === ''){ + validacao(inputMes) + }else if(inputAno.value === ''){ + validacao(inputAno) + }else if(inputCvc.value === ''){ + validacao(inputCvc) + }else if(spn){ + return + }else { + complete() + } +}); + +function complete(){ + const myForm = document.forms['form']; + const container = document.getElementById('sect'); + const complet = ` +
+ +

OBRIGADO!

+

Adicionamos os detalhes do seu cartão

+ + +
`; + myForm.remove(); + container.innerHTML = complet; + + +} + +function valiTd(){ + const inpust = document.querySelectorAll('input'); + const spn = document.querySelector('span') + const msg = document.createElement('span'); + const text = document.createTextNode('Preencha todos os campos vazios'); + + if(spn){ + return + } + + for (const input of inpust) { + input.classList.add('error'); + } + + msg.appendChild(text); + inputCvc.insertAdjacentElement('afterend', msg); +} + +function validacao(input) { + const spn = document.querySelector('span') + const msg = document.createElement('span'); + const text = document.createTextNode('campo vazio'); + if(spn){ + return + } + msg.appendChild(text); + input.insertAdjacentElement('afterend', msg) + input.classList.add('error'); + +} +function addSpace() { + const cleandValue = inputNumCard.value.replace(/\s+/g, ''); + let formattedValue = '' + + for(let i = 0; i < cleandValue.length; i++) { + formattedValue += cleandValue[i] + if((i + 1) % 4 === 0 && i !== cleandValue.length - 1) { + formattedValue += ' ' + } + } + + inputNumCard.value = formattedValue +} + +function addData() { + const mes = Number(inputMes.value); + const ano = Number(inputAno.value); + if(!isNaN(mes) && !isNaN(ano) && mes !== '' && ano !== ''){ + const formattedData = `${mes}/${ano}` + dateCard.innerHTML = formattedData + }else if( isNaN(Number(inputMes.value)) ) { + const msg = document.createElement('span'); + const text = document.createTextNode('só é permitido númeors!'); + msg.appendChild(text); + inputMes.classList.add('error'); + inputCvc.insertAdjacentElement('afterend', msg) + }else if( isNaN(Number(inputAno.value)) ) { + const msg = document.createElement('span'); + const text = document.createTextNode('só é permitido númeors!'); + msg.appendChild(text); + inputAno.classList.add('error'); + inputCvc.insertAdjacentElement('afterend', msg) + } +} + +function notNum(input) { + const spn = document.querySelector('span') + const msg = document.createElement('span'); + const text = document.createTextNode('só é permitido númeors!'); + if(spn){ + return + } + msg.appendChild(text); + input.insertAdjacentElement('afterend', msg) + input.classList.add('error'); +} +