hcbarros
/
extincoes
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Criando formulário de eventos

master
Henrique Caetano de Barros 3 years ago
parent
d41713916c
commit
0a72ee945f
3 changed files with 229 additions and 20 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +91
    -2
      css/eventos.css
  2. +56
    -2
      paginas/eventos.html
  3. +82
    -16
      script/eventos.js

+ 91
- 2
css/eventos.css View File

@ -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;
}

+ 56
- 2
paginas/eventos.html View File

@ -32,14 +32,68 @@
</nav>
<iframe src="http://hcbarros.bootcamp.dev.netuno.org:20190/services/eventos" ></iframe>
<iframe srcdoc="<!DOCTYPE html><div style='heigth:50vh; font-size:40px; text-align:center'><div style='margin-top:150px;'>Carregando...</div></div>"
onload="this.removeAttribute('srcdoc')"
src="http://hcbarros.bootcamp.dev.netuno.org:20190/services/eventos" >
</iframe>
<div class="modal-content" ></div>
<div class="form">
<div class="head-form">
<a class="form-title">Cadastrar evento</a>
<a class="close" onclick="openCloseModal('none')" >+</a>
</div>
<form onsubmit="return sendData(this)" >
<table>
<tr>
<td>Título:</td>
<td><input type="text" name="titulo" minlength="5" maxlength="100" /> </td>
</tr>
<tr>
<td>Data:</td>
<td><input type="date" name="data" /> </td>
</tr>
<tr>
<td>Capacidade:</td>
<td><input type="text" name="capacidade" value="0" maxlength="7" onkeyup="numberMask(this)" onkeydown="numberMask(this)" /> </td>
</tr>
<tr>
<td>Preço:</td>
<td><input type="text" name="preco" maxlength="12" value="0,00" onkeyup="currencyMask(this)" onkeydown="currencyMask(this)" /> </td>
</tr>
<tr>
<td>Categoria:</td>
<td>
<select name="categoria">
<option value="1" selected>Aula</option>
<option value="2" >Jogo</option>
<option value="3">Visita técnica</option>
</select>
</td>
</tr>
</table>
<button>Enviar</button>
</form>
</div>
<button onclick="openCloseModal('block')" >Formulário</button>
<footer>Copyright © 2023 Extinções Company - Todos os direitos reservados</footer>
</div>
<!-- <script type="text/javascript" src="../script/eventos.js"></script> -->
<script type="text/javascript" src="../script/eventos.js"></script>
</body>
</html>

+ 82
- 16
script/eventos.js View File

@ -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
}

Write Preview
Loading…
Cancel
Save