Skip to content

Instantly share code, notes, and snippets.

@programadorabordo

programadorabordo/locadora-js-raiz.html

Created July 4, 2020 18:12
Show Gist options
  • Save programadorabordo/7dc02285bb2120bc892523db3afbe986 to your computer and use it in GitHub Desktop.
Save programadorabordo/7dc02285bb2120bc892523db3afbe986 to your computer and use it in GitHub Desktop.
Download ZIP
Código feito em JavaScript puro da Semana JavaScript Raiz - Coloquei todo o JS dentro do index.html
Raw
locadora-js-raiz.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Locadora Raiz | Semana JavaScript Raiz | Programador a A Bordo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-3">
<h2>Cadastro de filme</h2>
<form id="formulario_filme">
<div class="form-group">
<label for="titulo">Título</label>
<input type="text" name="titulo" class="form-control" id="titulo">
</div>
<div class="form-group">
<label for="imagem">Foto</label>
<input type="text" name="imagem" class="form-control" id="imagem">
</div>
<div class="form-group">
<label for="categoria">Categoria</label>
<select name="categorias" id="categorias" class="form-control" multiple>
</select>
</div>
<button type="submit" class="btn btn-primary">Cadastrar</button>
</form>
</div>
<div class="col-sm-12 col-md-9">
<div id="cards_container" class="card-columns">
</div>
</div>
</div>
</div>
<script>
const filmes = [
{
titulo: 'Filme XPTO',
imagem: 'http://lorempixel.com/300/150',
categorias: ['001', '003'],
},
{
titulo: 'Filme XYZ',
imagem: 'http://lorempixel.com/300/150?2',
categorias: ['001', '003', '004'],
},
{
titulo: 'Filme Raiz',
imagem: 'http://lorempixel.com/300/150?3',
categorias: ['003', '004']
},
{
titulo: 'Filme A Bordo',
imagem: 'http://lorempixel.com/300/150?4',
categorias: ['002', '003', '004']
},
{
titulo: 'Filme TOP',
imagem: 'http://lorempixel.com/300/150?5',
categorias: ['001', '002', '003', '004']
}
];
const categorias = [
{ id: '001', titulo: 'Drama' },
{ id: '002', titulo: 'Suspense' },
{ id: '003', titulo: 'Nacionais' },
{ id: '004', titulo: 'Documentário' },
];
function pegaCategoria(catId) {
return categorias.find(function(categoria) {
return categoria.id === catId
})
}
function CardComponent(props) {
return `
<div class="card">
<img class="card-img-top" src="${props.imagem}" alt="">
<div class="card-body">
<h3 class="card-title">${props.titulo}</h3>
<p class="card-text">
${props.categorias.map(function(catId) {
return `<a href="#" class="badge badge-secondary">
${pegaCategoria(catId).titulo}
</a>`
}).join(' ')}
</p>
</div>
</div>
`;
}
function CardsComponent() {
return filmes.map(function(filme) {
return CardComponent(filme)
}).join('')
}
function SelectOptions() {
return categorias.map(function(categoria) {
return `<option value="${categoria.id}">${categoria.titulo}</option>`
})
}
document.querySelector('#formulario_filme')
.addEventListener('submit', function(event) {
event.preventDefault();
const titulo = event.target.titulo.value;
const imagem = event.target.imagem.value;
const categorias = event.target.categorias.selectedOptions; // Aqui eu troquei os options por selectedOptions, com isso não preciso mais filtrar pelas opções selecionadas
const categoriasSelecionadas = [...categorias]
.map(function(option) {
return option.value
});
filmes.push({
titulo,
imagem,
categorias: categoriasSelecionadas
});
document.querySelector('#cards_container').innerHTML = CardsComponent();
})
document.querySelector('#cards_container').innerHTML = CardsComponent();
document.querySelector('#categorias').innerHTML = SelectOptions();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment