Last active
November 10, 2020 15:57
-
-
Save luanpiegas/3ab7429e91ac8bd93de3cc747c2baef4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Instanciando em variáveis os elementos que vou precisar usar no rodapé. | |
| productBody = document.querySelector('body') | |
| productImageURL = document.querySelector('.product__image').src | |
| productNameText = document.querySelector('.productName').innerText | |
| buyButton = document.querySelector('.product__add-to-cart') | |
| productPriceText = document.querySelector('.skuBestPrice').innerText.split('R$ ')[1] | |
| // Criando os elementos que compõem o rodapé | |
| productFooter = document.createElement('footer') | |
| productFooterContainer = document.createElement('div') | |
| productContainerLeft = document.createElement('div') | |
| productContainerLeftImage = document.createElement('div') | |
| productContainerLeftText = document.createElement('div') | |
| productContainerRight = document.createElement('div') | |
| productImage = document.createElement('img') | |
| productName = document.createElement('h5') | |
| productPrice = document.createElement('p') | |
| productDiscount = document.createElement('p') | |
| productFooterButton = document.createElement('button') | |
| productCloseButton = document.createElement('button') | |
| // Configurando os estilos CSS dos elementos | |
| productFooter.setAttribute('style', 'position: fixed; width: 100%; padding: 10px; background: #fff; bottom: 0; box-shadow: 0 -10px 10px rgba(0,0,0,.1);') | |
| productFooterContainer.setAttribute('style', 'position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; width: 100%; max-width:800px; margin: 0 auto;') | |
| productContainerLeft.setAttribute('style', 'display: flex; flex-flow: row wrap; align-items: center; width: 100%; max-width: 450px;') | |
| productContainerRight.setAttribute('style', 'display: flex; flex-flow: row wrap; align-items: center; width: 100%; max-width: 350px;') | |
| productImage.setAttribute('style', 'width: 60px; height: auto; object-fit: cover; margin-right: 10px') | |
| productName.setAttribute('style', 'font-size: 17px; text-transform: uppercase; margin: 0') | |
| productPrice.setAttribute('style', 'font-size: 13px; font-weight: normal;') | |
| productDiscount.setAttribute('style', 'font-size: 13px; font-weight: normal;') | |
| productFooterButton.setAttribute('style', 'background: #000; border-color: #000; color: #fff; display: block; height: 40px; width: 100%; max-width: 400px; font-weight: bold; text-transform: uppercase;') | |
| productCloseButton.setAttribute('style', 'position: absolute; top: 5px; right: 5px; background: transparent; color: #000; font-weight: bold; font-size: 18px;') | |
| // Atribuindo os valores em seus respectivos elementos | |
| productImage.src = productImageURL | |
| productName.innerText = productNameText | |
| productPriceText = parseFloat(productPriceText) // o valor era uma string, agora foi convertido em float | |
| productPrice.innerText = `Preço: ${productPriceText.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}` | |
| productDiscountText = productPriceText - (productPriceText * .10) // calcula 10% do preço do produto | |
| productDiscount.innerText = `Preço com desconto: ${productDiscountText.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}` | |
| productFooterButton.innerText = 'Adicionar à Sacola' | |
| productCloseButton.innerText = 'X' | |
| // Ativando um trigger do clique do botão do rodapé para chamar a função do botão da página | |
| productFooterButton.addEventListener('click', function() {buyButton.click()}) | |
| // "Fechando" o <footer> com display:none; | |
| productCloseButton.addEventListener('click', function() {productFooter.style.display='none'}) | |
| // Colocando o rodapé dentro do <body> | |
| productBody.appendChild(productFooter) | |
| // Colocando o container dentro do <footer> | |
| productFooter.appendChild(productFooterContainer) | |
| productFooter.appendChild(productCloseButton) | |
| // E agora os elementos dentro do container do <footer> | |
| productFooterContainer.appendChild(productContainerLeft) | |
| productFooterContainer.appendChild(productContainerRight) | |
| productContainerLeft.appendChild(productContainerLeftImage) | |
| productContainerLeft.appendChild(productContainerLeftText) | |
| productContainerLeftImage.appendChild(productImage) | |
| productContainerLeftText.appendChild(productName) | |
| productContainerLeftText.appendChild(productPrice) | |
| productContainerLeftText.appendChild(productDiscount) | |
| productContainerRight.appendChild(productFooterButton) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment