diff --git a/css/eventos.css b/css/eventos.css index 5e305ea..5247ebe 100644 --- a/css/eventos.css +++ b/css/eventos.css @@ -17,15 +17,104 @@ } footer { - padding-bottom: 50px; + display: flex; + align-items: center; + position: fixed; + bottom: 0; + height: 80px; text-align: center; margin-inline: 20px; + background-color: #fff; + } + + button { + font-size: 16px; + font-weight: bold; + width: 120px; + height: 40px; + margin-block: 15px; + border-radius: 5px; + cursor: pointer; + background-color: #734bd1; + color: #fff; + border: none; + transition-duration: 0.4s; + } + + button:hover { + background-color: #9466ff; } iframe { width: 100%; - height: 85vh; + height: 50vh; position: relative; margin: 0; border: none; } + + .modal-content { + display: none; + position: absolute; + z-index: 1; + background-color: #000; + opacity: 0.5; + height: 100vh; + width: 100vw; + bottom: 0; + } + + .form { + display: none; + position: absolute; + top: 30vh; + z-index: 2; + background-color: #fff; + border-radius: 10px; + border: 4px solid #734bd1; + min-height: 0; + width: 500px; + } + + .head-form { + display: flex; + align-items: center; + justify-content: space-between; + margin-inline: 10px; + } + + .form-title { + font-size: 25px; + font-weight: bold; + color: #734bd1;; + } + + .close { + font-size: 40px; + font-weight: bold; + cursor: pointer; + transform: rotate(45deg); + } + + form { + padding-left: 10px; + } + + input, select { + border: none; + border-bottom: 1px solid black; + outline: none; + width: 320px; + border-color: #996dff; + padding-left: 10px; + font-size: 20PX; + } + + select { + background-color: #FFF; + } + + td { + height: 40px; + font-size: 18px; + } diff --git a/paginas/eventos.html b/paginas/eventos.html index 5bf94ad..4ee0797 100644 --- a/paginas/eventos.html +++ b/paginas/eventos.html @@ -32,14 +32,68 @@ - + + + +
+ +
+ +
+ + Cadastrar evento + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + +
Título:
Data:
Capacidade:
Preço:
Categoria: + +
+ + +
+ +
+ + + - + diff --git a/script/eventos.js b/script/eventos.js index 0dd427c..f473cf4 100644 --- a/script/eventos.js +++ b/script/eventos.js @@ -1,19 +1,85 @@ -(() => { +// (() => { - const array = [{titulo: 'Prática na empresa', data: '2023-06-20', capacidade: 20, preco: 0.00, categoria: 'Visita técnica'}, - {titulo: 'Aula de ReactJs', data: '2023-07-08', capacidade: 100, preco: 30.00, categoria: 'Aula'}, - {titulo: 'Aula de lógica de programação', data: '2023-06-15', capacidade: 50, preco: 15.00, categoria: 'Aula'}, - {titulo: 'Jogo de Flamengo X Corinthians', data: '2023-08-23', capacidade: 100000, preco: 180.00, categoria: 'Jogo'}, - {titulo: 'Visita técnica na empresa Sitana', data: '2023-10-10', capacidade: 25, preco: 0.00, categoria: 'Visita técnica'}] - - array.map((obj,i) => { - const tr = document.getElementsByTagName('tr')[i+1] - Object.keys(obj).map((key,j) => { - const td = tr.getElementsByTagName('td')[j] - td.innerText = obj[key] - }) - }) - -})() +// const array = [{titulo: 'Prática na empresa', data: '2023-06-20', capacidade: 20, preco: 0.00, categoria: 'Visita técnica'}, +// {titulo: 'Aula de ReactJs', data: '2023-07-08', capacidade: 100, preco: 30.00, categoria: 'Aula'}, +// {titulo: 'Aula de lógica de programação', data: '2023-06-15', capacidade: 50, preco: 15.00, categoria: 'Aula'}, +// {titulo: 'Jogo de Flamengo X Corinthians', data: '2023-08-23', capacidade: 100000, preco: 180.00, categoria: 'Jogo'}, +// {titulo: 'Visita técnica na empresa Sitana', data: '2023-10-10', capacidade: 25, preco: 0.00, categoria: 'Visita técnica'}] + +// array.map((obj,i) => { +// const tr = document.getElementsByTagName('tr')[i+1] +// Object.keys(obj).map((key,j) => { +// const td = tr.getElementsByTagName('td')[j] +// td.innerText = obj[key] +// }) +// }) + +// })() + + +const sendData = (form) => { + + const formData = new FormData(form); + + if(!validator(formData)) { + return false + } + + const request = new XMLHttpRequest(); + + const precoFormatado = parseFloat(formData.get("preco").replace('.','').replace(',','.')) + + const obj = { + titulo: formData.get("titulo"), + data: formData.get("data"), + capacidade: parseInt(formData.get("capacidade")), + preco: precoFormatado, + categoria: parseInt(formData.get("categoria")) + } + + + alert(JSON.stringify(obj)) + +} + + +const validator = (formData) => { + + if(formData.get("titulo").length < 5) { + alert('O título deve possuir ao menos 5 caracteres!') + return false + } + + if(formData.get("capacidade").length === 0) { + alert('Informe a capacidade do evento!') + return false + } + + const date = new Date(formData.get("data")) + if(!isNaN(date.getTime())) { + alert('Data inválida!') + return false + } + + return true +} + + +const openCloseModal = (acao) => { + document.getElementsByClassName('modal-content')[0].style.display = acao + document.getElementsByClassName('form')[0].style.display = acao +} + + +const numberMask = (element) => { + element.value = element.value.replace(/\D/g,'') +} + +const currencyMask = (element) => { + var v = element.value.replace(/\D/g,'') + v = (v/100).toFixed(2) + '' + v = v.replace(".", ",").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + element.value = v +} \ No newline at end of file