Saia do Zero em JavaScript em uma aula! Isso mesmo! Preparei esta aula para mostrar a você que nunca viu JavaScript o que conseguimos fazer!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Fala Impressionadores! Hoje eu quero te mostrar como sair do zero em JavaScript. A ideia é te mostrar os primeiros passos em JavaScript, mesmo que você ainda não saiba nada.
Vamos aprender como é a estrutura de um site, como os elementos são dispostos, como seus atributos são modificados.
Vamos criar um projeto Web com JavaScript para que você consiga aprender o básico e já conseguir ter um projeto funcional.
Mesmo que você não saiba absolutamente nada, já vai conseguir ver tudo isso sendo construído do zero, então é muito interessante o resultado que vai melhorando pouco a pouco.
E aí, quer aprender como sair do zero em JavaScript e criar o seu primeiro projeto? Então, bora para a aula!
Vamos começar explicando alguns conceitos básicos:
Sempre que usamos o computador ou celular para pesquisar uma informação ou fazer uma compra, estamos usando a interface que determinado servidor oferece para nós (chamamos essa interface de Front-end).
Neste caso somos os clientes e o servidor é quem cuida de qual informação será entregue para cada um de nós, nele temos uma inteligência gerenciando os dados, verificando qual informação é relevante e faz sentido (chamamos essa parte de back-end).
Existe uma inteligência funcionando tanto no front-end quanto no back-and, o JavaScript é uma das ferramentas responsáveis por essa inteligência e dinamismo.
Nosso projeto depende de três tecnologias para existir, o HTML, CSS e o JavaScript, fazendo uma comparação, o HTML é como o esqueleto do corpo, a estrutura interna, o CSS é a aparência e o JavaScript a inteligência.
Para este projeto, além dessas 3 tecnologias, vamos usar também o Bootstrap:
O Bootstrap é uma biblioteca que através da aplicação do HTML, CSS e JavaScript disponibiliza recursos a fim de facilitar a criação de páginas web.
Conceito de <Div> – Saia do Zero em JavaScript
A div é um dos possíveis elementos que compõe o HTML, é um tipo de tag <>, este tipo específico <div> é o elemento mais comumente encontrado nas páginas web. Seu nome sugere uma “divisão” essencialmente, um retângulo que usaremos para delimitar áreas de interesse na página.
Podemos ter div dentro de div, imaginando cada elemento como um retângulo, podemos entender a interface como retângulos dentro de retângulos. A criação da página passa a ser então, sobre descrever como esses retângulos interagem entre si!
Esses retângulos podem ser diferentes em tamanho, cor, posição etc.
Os elementos estéticos que vamos manipular:
Tipo de display -> Temos o display flex que utilizamos muito, ele descreve o comportamento dos conteúdos presentes dentro da divisão de interesse.
Exemplo. Já aconteceu de você abrir uma página construída para celular no seu computador e ela aparece desconfigurada, as imagens não cabem na tela…
Para resolver este problema vamos usar o display flex, com ele esse ajuste é automático.
Mais definições – Saia do Zero em JavaScript
Espaçamento -> Muitas vezes faremos decisões de espaçamento entre os elementos.
Cores de texto e cores de fundo -> Recurso estético que usaremos para dar vida ao nosso sistema.
Posição -> Uma das nossas principais preocupações ao criar uma interface é descrever corretamente a posição de cada elemento presente.
Tamanho -> Vamos nos preocupar com a descrição correta do tamanho dos componentes da nossa interface.
Agora que vimos esses conceitos fundamentais, vamos à prática, abra o Visual Studio Code, caso você ainda não tenha instalado, clique no link da nossa aula de instalação do Visual Studio Code.
Abra o programa -> clique em Open Folder -> crie ou escolha uma pasta para guardar o projeto.
Comece criando a pasta do HTML -> Clique em New file -> escreva na barra o nome padrão desse tipo de pasta -> index.HTML
Criado o HTML escreva “!” e dê enter -> um código padrão para o HTML já vai surgir.
Observe que neste código temos mais tags, não apenas o <div> mas também a tag <head> e <body>.
A palavra body é bem intuitiva, esta tag delimita tudo que tem dentro do corpo do código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Observe também que as tags geralmente vêm em pares, por exemplo, se <body> é a tag de abertura, então </body>, com a barra, é a tag de fechamento. O mesmo modelo funciona para as demais tags.
Podemos começar escrevendo o corpo do nosso projeto, para isso vamos colocar dentro de body, 3 divisões (div):
Podemos também colocar dentro das divs um breve resumo do que vamos trabalhar em cada uma.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>Cabeçalho</div>
<div>Corpo</div>
<div>Rodapé</div>
</body>
</html>Para visualizar o código na web clique sobre o nome da pasta index.HTML e escolha a opção -> Open with Live Server
Observe que as informações que passamos na div já podem ser visualizadas em uma página da web!
Digite Bootstrap no seu navegador e acesse o primeiro link, para baixar as ferramentas do Bootstrap para o nosso código vamos precisar incorporar ao código dois links da imagem abaixo:
Vamos copiar e colar o primeiro link como último elemento do head e o segundo como último elemento do body.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div>Cabeçalho</div>
<div>Corpo</div>
<div>Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>Agora podemos usar recursos o Bootstrap no nosso projeto.
Como isso funciona na prática?
Na página do site da Bootstrap leia a documentação, nela estão todas as ferramentas que temos disponíveis.
Na página da documentação pesquise por background color, você já tem as possibilidades de cores que a ferramenta traz.
Observe que antes do nome de cada cor temos um ponto, este ponto não faz parte do nome, ele serve para o código identificá-lo como uma classe, mas não vamos utilizar o ponto no HTML.
O azul chama-se bg-primary, vamos colocar na div cabeçalho.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="bg-primary">Cabeçalho</div>
<div>Corpo</div>
<div>Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>
Perceba que agora o retângulo desta div pegou a característica de cor que colocamos no código.
Podemos colorir todas as divs acrescentando a elas uma class e cor.
Por que a cor não ocupa um espaço maior da tela? – Saia do Zero em JavaScript
Isso acontece porque todas as divs estão dentro do body, e o body por padrão delimita um espaço mínimo necessário para todo o conteúdo dentro dele.
Podemos alterar este tamanho dando classes ao body, a primeira classe será o d-flex, que determina o ajuste do tamanho e os elementos dispostos um ao lado do outro.
Não é só isso que queremos, por este motivo vamos colocar mais uma característica -> flex-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body class="d-flex flex-column">
<div class="bg-seconday-subtle">Cabeçalho</div>
<div class="bg-secondary">Corpo</div>
<div class="bg-seconday-subtle">Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>Além disso, vamos colocar no body um Style para definir o tamanho como 100dvh, na div “corpo” vamos acrescentar a característica flex-grow-1, que significa que esta div deve ocupar todo o espaço que ela puder na tela. Observe o código e o resultado:
<body class="d-flex flex-column" style="height: 100vh">
<div class="bg-seconday-subtle">Cabeçalho</div>
<div class="bg-secondary flex-grow-1">Corpo</div>
<div class="bg-seconday-subtle">Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
O corpo passou a ocupar quase todo o espaço com exceção do rodapé e cabeçalho como programamos.
Cabeçalho – Saia do Zero em JavaScript
No cabeçalho vamos retirar o nome “cabeçalho” e colocar um logo, como o logo da hashtag, para ficar mais visual e bonito.
Para isso vamos precisar criar uma pasta onde vamos colocar imagens, clique na pasta com o sinal de + e nomeie como Imagens.
Salve o logo da hashtag e arraste para a pasta imagens.
Para a imagem vamos utilizar uma tag específica, a tag img esta tag possui 2 propriedades importantes o src e o alt.
<img src=” ” alt=” “>
Src = esta propriedade diz onde está a imagem que vamos utilizar
Alt = Já aconteceu com você, de tentar carregar uma imagem com a internet lenta e aparecer um ícone no lugar da imagem? O alt serve para isso, podemos preencher com um texto o alt, e se a imagem não carregar o texto aparece no lugar.
Outro ponto importante é que se o site precisar descrever os elementos para pessoas com deficiência visual é através dessa propriedade (alt) que a descrição da tela é feita, portanto, é importante completar o alt.
<body class="d-flex flex-column" style="height: 100dvh;">
<div class="bg-seconday-subtle">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh"
/>
<div class="bg-secondary flex-grow-1">Corpo</div>
<div class="bg-seconday-subtle">Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>Observe que no código informamos o local da imagem, completamos o alt com a frase de descrição e usamos o Style para configurar o tamanho do logo.
ID – Conceito – Saia do Zero em JavaScript
O id é como se fosse a identidade da tag, é único e possibilita fazer referência aquela tag em outros programas.
Vamos acrescentar IDs em nossas divs:
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh"/>
<div id="page-body" class="bg-secondary flex-grow-1">Corpo</div>
<div id="page-footer"class="bg-seconday-subtle">Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>Input – Campo para pesquisa do site
Vamos colocar um campo para pesquisar as músicas na nossa página da web, para isso vamos pesquisar por input no site Bootstrap.
O site oferece várias opções de input, como você pode ver na imagem acima, só precisamos escolher uma delas.
Vamos escolher o primeiro exemplo, mais abaixo no site temos os códigos de cada exemplo, vamos copiar o primeiro da lista.
Feito isso, vamos colar onde queremos que a caixa apareça, neste caso logo abaixo da tag img.
Assim que colocarmos a caixa vai aparecer abaixo do nosso logo, queremos ao lado, então vamos colocar na div um d-flex.
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh"/>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div id="page-body" class="bg-secondary flex-grow-1">Corpo</div>
<div id="page-footer"class="bg-seconday-subtle">Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>Botão – Saia do Zero em JavaScript
Vamos acrescentar um botão ao nosso projeto usando o Bootstrap novamente, é só pesquisar por button.
Você pode escolher o que achar mais bonito, neste caso irei escolher o terceiro da lista “sucesso”.
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh"/>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<button type="button" class="btn btn-outline-success">Success</button>
<div id="page-body" class="bg-secondary flex-grow-1">Corpo</div>
<div id="page-footer"class="bg-seconday-subtle">Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>Vamos colocar logo abaixo da caixa de pesquisa.
Resultado até agora:
Já estamos vendo uma estrutura da nossa página, vamos fazer um ajuste. O “@” da caixa de pesquisa não faz muito sentido para nós, ele está sendo definido pela tag <span> como mostra a imagem abaixo, vamos excluir toda a linha.
Nossa caixa também possui um texto padrão “Username”, esse texto aparece quando não há nada escrito na caixa, vamos retirar o texto porque ele também não faz sentido para o nosso projeto.
Código -> placeholder=”Username” substitua por placeholder=”Quero essa Música!”
Dentro da nossa caixa de pesquisa vamos colocar um botão para efetuar a pesquisa, vamos copiar e colar a tag button dentro da div que corresponde a caixa de pesquisa.
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh"/>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Quero essa Música!" aria-label="Username" aria-describedby="basic-addon1"/>
<button type="button" class="btn btn-outline-success">Buscar</button>
</div>
<button type="button" class="btn btn-outline-success">Playlist</button>
<div id="page-body" class="bg-secondary flex-grow-1">Corpo</div>
<div id="page-footer"class="bg-seconday-subtle">Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>Resultado até agora – Saia do Zero em JavaScript
Ajustes de espaçamento – Saia do Zero em JavaScript
Observe que o logo está colado nas margens, os botões estão colados e desproporcionais, esses aspectos visuais devem ser tratados. Vamos ver como?
No display flex temos duas propriedades para tratar os elementos, uma trata na horizontal e outra na vertical, a primeira que vamos usar é o “align-items” (vertical) vamos procurar na barra de buscas do site Bootstrap.
Vamos escolher a terceira opção que esta alinhado ao centro e colocar o código correspondente no nosso projeto -> align-items-center
Observe que agora todos os elementos estão centralizados com exceção da caixa de pesquisa, isso porque a div que corresponde a esse item veio com um código que define sua posição -> mb-3, vamos excluir essa definição ou zerar -> mb-0.
Agora nossa caixa de pesquisa está alinhada ao centro, mas, observe que ela está ocupando todo o espaço disponível na tela, vamos tratar esse espaço?
Para isso, ajuste usando o “max-width” que é a largura máxima, vamos ajustar em 30%
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex align-items-center">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh"/>
<div class="input-group" style="max-width: 30%">
<input type="text" class="form-control" placeholder="Quero essa Música!" aria-label="Username" aria-describedby="basic-addon1"/>
<button type="button" class="btn btn-outline-success">Buscar</button>
</div>
<button type="button" class="btn btn-outline-success">Playlist</button>
<div id="page-body" class="bg-secondary flex-grow-1">Corpo</div>
<div id="page-footer"class="bg-seconday-subtle">Rodapé</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>Espaçando os elementos – Saia do Zero em JavaScript
Agora vamos a propriedade do d-flex que trata os elementos na horizontal -> vamos procurar por justify content no Bootstrap.
Vamos escolher a quarta opção e colocar o código correspondente no nosso projeto -> justify-content-between
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex align-items-center justify-content-between"></div>">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh"/>Por fim, vamos acrescentar uma margem para desgrudar os elementos das bordas.
Pesquise por margin no Bootstrap, vamos ter as opções de margem de 1 a 5, vamos ajustar no código, observe abaixo na tag img e button:
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex align-items-center justify-content-between"></div>">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh" class="mx-2 my-2"/>
<div class="input-group" style="max-width: 30%">
<input type="text" class="form-control" placeholder="Quero essa Música!" aria-label="Username" aria-describedby="basic-addon1"/>
<button type="button" class="btn btn-outline-success">Buscar</button>
</div>
<button type="button" class="btn btn-outline-success mx-2">Playlist</button>
<div id="page-body" class="bg-secondary flex-grow-1">Corpo</div>Ícones
Também podemos usar ícones na página web, é uma opção simples, porém, ótima, vamos aprender a utilizar:
Pesquise no Google por Bootstrap icons, no final da página vamos copiar o código CDN e colar no nosso projeto para utilizar os links.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>Feito isso vamos buscar o ícone de uma lupa para nossa barra de pesquisa, para isso vamos buscar no site por Search, copie o código do ícone e substitua no HTML pela palavra Buscar na tag button.
Vamos buscar mais um ícone para colocar no botão de pesquisa -> busque por music no site, copie o código do ícone e cole no HTML
Cole o código ao lado da palavra Playlist na tag button.
Como transformar uma linha em comentário? – Saia do Zero em JavaScript
A linha de código onde está o rodapé, vamos destacar, para isso, selecione a linha e clique em control + k + c, isso torna a linha um comentário e o código não lê esta linha, para tornar a linha legível ao código novamente, clique em control + k + u, mas, por hora vamos manter como comentário esta linha…
Corpo da interface
Agora vamos nos focar mais no corpo do projeto, o local onde vamos colocar nossas músicas em cards. Vamos procurar um modelo de card no site Bootstrap.
Vamos colocar de modo provisório esse card no nosso código HTML, porém a intenção é que ele seja removido depois e que o próprio JavaScript coloque o card para nós a cada nova música, assim teremos mais dinamismo na página.
Copie o código e cole no lugar da palavra Corpo no código HTML.
Vamos buscar no nosso computador as imagens dos cards e colocar na pasta imagens ou em uma subpasta.
Observe que o código do card tenta colocar uma imagem, mas não consegue, temos um ícone que costuma aparecer quando a imagem não consegue ser carregada.
Isso ocorre porque o código que copiamos do Bootstrap tem uma tag de imagem, mas ele não sabe qual o caminho para pegar a imagem nem o texto do alt, temos que fazer esse ajuste para a imagem e para o texto como fizemos no logo.
<div id="page-body" class="bg-secondary flex-grow-1"><div class="card" style="width: 18rem;">
<img src="/imagens/Covers/MUSICA3.png" class="card-img-top" alt="Capa do Disco.">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div></div>Resultado – Saia do Zero em JavaScript
Ajustes
O primeiro ajuste do card será centralizar o botão, vamos colocar o card como d-flex (display flex). Em seguida adicionamos mais um texto no card.
Vamos delimitar o tamanho do card e acrescentar uma propriedade que desloque o card para baixo caso não caiba no espaço da tela, vamos também modificar a frase do botão.
Código HTML
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex align-items-center justify-content-between"></div>">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh" class="mx-2 my-2"/>
<div class="input-group" style="max-width: 30%">
<input type="text" class="form-control" placeholder="Quero essa Música!" aria-label="Username" aria-describedby="basic-addon1"/>
<button type="button" class="btn btn-outline-success"><i class="bi bi-search"></i></button>
</div>
<button type="button" class="btn btn-outline-success mx-2">Playlist <i class="bi bi-music-note-list"></i></button>
<div id="page-body" class="bg-secondary flex-grow-1 d-flex flex-wrap"><div class="card d-flex flex-column align-items-center" style="width: 18rem; height: 30rem;">
<img src="/imagens/Covers/MUSICA3.png" class="card-img-top" alt="Capa do Disco.">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Nome da música</h5>
<p class="card-text">Nome do Album</p>
<p class="card-text">Nome do Artista</p>
<button class="btn btn-outline-success">Go somewhere</button>
</div>
</div>Resultado
Copie e cole o código responsável pelo card para criar vários cards na nossa tela como na imagem acima:
Código do card para replicar
<div class="card d-flex flex-column align-items-center" style="width: 18rem; height: 30rem;">
<img src="/imagens/Covers/MUSICA3.png" class="card-img-top" alt="Capa do Disco.">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Nome da música</h5>
<p class="card-text">Nome do Album</p>
<p class="card-text">Nome do Artista</p>
<button class="btn btn-outline-success">Go somewhere</button>
</div>
</div>Centralizando os cards
Dessa vez vamos utilizar o justify-content-center gap-2.
Código
<div id="page-body" class="bg-secondary flex-grow-1 d-flex flex-wrap justify-content-center gap-2"><div class="card d-flex flex-column align-items-center" style="width: 18rem; height: 30rem;">
<img src="/imagens/Covers/MUSICA3.png" class="card-img-top" alt="Capa do Disco.">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Nome da música</h5>
<p class="card-text">Nome do Album</p>Resultado
Parte superior fixa
Vamos fixar o cabeçalho da página para que ao rolar a barra para baixo o cabeçalho continue aparecendo, vamos procurar por Sticky-top no Bootstrap e acrescentar no código:
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex align-items-center justify-content-between sticky-top"></div>">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh" class="mx-2 my-2"/>
<div class="input-group" style="max-width: 30%">
<input type="text" class="form-control" placeholder="Quero essa Música!" aria-label="Username" aria-describedby="basic-addon1"/>
<button type="button" class="btn btn-outline-success"><i class="bi bi-search"></i></button>
</div>JavaScript – Saia do Zero em JavaScript
Agora vamos colocar inteligência no nosso projeto, vamos criar a pasta de JavaScript -> clique em New File -> Script.js (nome padrão)
Conceito de variável
As variáveis são como caixas que armazenam informações, essas informações podem ser números, podem ser textos (sempre os textos ficam entre aspas duplas ou simples), podem ser dados simples ou complexos.
Avariável não apenas armazena os dados, nós podemos identificar com um nome esta caixa e usar sempre que for conveniente.
Quando nomeamos uma variável colocamos as palavras grudadas sem espaço entre elas e é comum deixar maiúscula a primeira letra de cada palavra.
Em outras palavras, elas armazenam valores que são manipulados por nossos programas, permitindo que os algoritmos sejam implementados para dar a resposta esperada para o usuário.
Vamos começar o código JavaScript
Primeiro vamos criar uma identidade para cada música, nossa variável vai começar com a palavra const ou let, vamos começar esta, com a palavra const, que significa que não iremos manipular o conteúdo da variável. Dentro da variável temos informações que identificam a música.
const doIWannaKnow = {
id: '0',
songName: 'Do I Wanna Know',
artist: 'Arctic Monkeys',
album: 'AM',
coverFile: 'am.webp',
};
const theLessIKnowTheBetter = {
d: '1',
songName: 'The Less I Know The Bettter',
artist: 'Tame Impala',
album: 'Currents',
coverFile: 'currents.webp',
};
const liveForever = {
d: '2',
songName: 'Live Forever',
artist: 'Oasis',
album: 'Definitely Maybe',
coverFile: 'definitely_maybe.webp',
};Observe que todas as músicas estão recebendo uma identificação (id).
Feito isso vamos criar outra variável, porém do tipo Array, ser uma variável do tipo array significa que podemos armazenar nela muito mais conteúdo, por isso vamos criar a array para armazenar todas as nossas músicas.
const musicLibrary = [doIWannaKnow, theLessIKnowTheBetter, liveForever,]Uma das características da array é que você consegue acessar tudo que tem dentro dela usando o nome da array e referenciando o conteúdo escolhido através de um número que começa a partir de zero.
musicLibrary = [0] -> Neste caso estamos acessando a primeira música.
Como o JavaScript interfere na leitura do navegador?
O navegador faz uma leitura do código HTML e CSS e cria um documento (document), o JavaScript por sua vez consegue entender qual a leitura feita pelo navegador e influência nesta leitura, acrescentando detalhes que não estavam nos códigos HTML ou CSS, mas que o JavaScript consegue manipular.
Dito isso vamos fazer com que o JavaScript conecte os cadastros das músicas com os nossos cards. Para isso vamos criar uma variável que acessa este documento e busca o elemento que vamos manipular a partir do seu ID (getElementById).
const pageBory = document.getElementById('page-body');HTML
Vamos voltar um pouco para o HTML e excluir os cards que criamos, isso porque, vamos fazer com que o JavaScript faça esse trabalho de forma dinâmica. Vamos manter somente 1 card.
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex align-items-center justify-content-between sticky-top"></div>">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh" class="mx-2 my-2"/>
<div class="input-group" style="max-width: 30%">
<input type="text" class="form-control" placeholder="Quero essa Música!" aria-label="Username" aria-describedby="basic-addon1"/>
<button type="button" class="btn btn-outline-success"><i class="bi bi-search"></i></button>
</div>
<button type="button" class="btn btn-outline-success mx-2">Playlist <i class="bi bi-music-note-list"></i></button>
<div id="page-body" class="bg-secondary flex-grow-1 d-flex flex-wrap justify-content-center gap-2"><div class="card d-flex flex-column align-items-center" style="width: 18rem; height: 30rem;">
<img src="/imagens/Covers/MUSICA3.png" class="card-img-top" alt="Capa do Disco.">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Nome da música</h5>
<p class="card-text">Nome do Album</p>
<p class="card-text">Nome do Artista</p>
<button class="btn btn-outline-success">Go somewhere</button>
</div>
</div>
</div>
<!-- <div id="page-footer"class="bg-seconday-subtle">Rodapé</div> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>Resultado
Feito isso vamos voltar a nossa linha de código do JavaScript
const pageBory = document.getElementById('page-body');Esta linha está pegando um elemento do documento HTML, o elemento é informado entre chaves, neste caso o page-body.
Estamos pegando este elemento para executar com ele uma ação.
Mas como executar esta ação exatamente?
O que vamos fazer é simples, vamos criar uma função, nela teremos o passo a passo da ação que precisamos executar, depois só precisamos conectar a função sempre que precisarmos. De início vamos criar uma função que está zerando a biblioteca, quando executada ela deve apagar o card que criamos:
function loadLibrary() {
pageBody.innerHTML = '';
}
loadLibrary();Precisamos também, colocar no HTML um código que referencie o JavaScript, será o último elemento da tag body -> <script> src=”/script.js”</script>:
<!-- <div id="page-footer"class="bg-seconday-subtle">Rodapé</div> --> (linha comentada)
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
<script> src="/script.js"</script>
</body>
</html>Se executarmos agora, o card da nossa página web, sumiu, sinal que a função está funcionando. Agora que a biblioteca está zerada, podemos programar o JavaScript para se encarregar dos cards das músicas.
Estrutura de repetição
Você concorda que esta função vai ter que ler não só uma, mas para diversas músicas que vamos colocar no projeto? Para que a função execute várias vezes baseada em um critério, temos as estruturas de repetição, vamos usar a estrutura do FOR, essa estrutura exige 3 critérios.
Vamos começar explicando os critérios:
Função
function loadLibrary() {
pageBody.innerHTML = '';
for(let index =0; index < musicLibrary.length; index++)
}
loadLibrary();Observe que a função começa com uma variável vazia -> esta função se repete enquanto o tamanho (length) da nossa array (com 3 músicas) for maior que o index (que começa com 0) -> a cada vez que o for rodar vamos acrescentar 1 ao index.
Então a cada vez que o for rodar o índice recebe 1, até chegar a 3, valor igual ao tamanho da nossa array, que contêm 3 músicas, quando isso acontece ele compara e vê que 3 não é maior que 3, o resultado se torna falso e o for é finalizado.
Já conseguimos definir o laço de repetição, mas o que vai ser feito dentro do for a cada iteração vamos construir agora:
Código
function loadLibrary() {
pageBody.innerHTML = '';
for(let index =0; index < musicLibrary.length; index++) {
pageBody.innerHTML += (
<div
class="card d-flex flex-column align-items-center"
style="width: 18rem; height: 30rem;"
>
<img
src="/imagens/Covers/MUSICA3.png"
class="card-img-top"
alt="Capa do disco."
/>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Nome da música</h5>
<p class="card-text">Nome do Album</p>
<p class="card-text">Nome do Artista</p>
<button class="btn btn-outline-success">Go somewhere</button>
</div>
</div>
)
}
}Agora nossa função está acrescentando a cada música um novo card, observe que passamos para o corpo da função todo o código do card, vamos fazer uma pequena mudança neste código, vamos tirar ele de dentro dos parênteses e colocar entre aspas, como texto corrido, assim podemos mesclar a informação do texto com o conteúdo de variáveis, fazemos isso usando o símbolo -> ${}
function loadLibrary() {
pageBody.innerHTML = '';
for(let index =0; index < musicLibrary.length; index++) {
pageBody.innerHTML += `
<div
class="card d-flex flex-column align-items-center"
style="width: 18rem; height: 30rem;"
>
<img
src="/imagens/Covers/MUSICA3.png"
class="card-img-top"
alt="Capa do disco."
/>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Nome da música</h5>
<p class="card-text">Nome do Album</p>
<p class="card-text">Nome do Artista</p>
<button class="btn btn-outline-success">Go somewhere</button>
</div>
</div>
`;
}
}
loadLibrary();
${} usamos este símbolo para acrescentar a variável
function loadLibrary() {
pageBody.innerHTML = '';
for(let index =0; index < musicLibrary.length; index++) {
pageBody.innerHTML += `
<div
class="card d-flex flex-column align-items-center"
style="width: 18rem; height: 30rem;"
>
<img
src="/imagens/Covers/${musicLibrary[index].coverFile}"
class="card-img-top"
alt="Capa do disco."
/>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Nome da música</h5>
<p class="card-text">Nome do Album</p>
<p class="card-text">Nome do Artista</p>
<button class="btn btn-outline-success">Go somewhere</button>
</div>
</div>
`;
}
}
loadLibrary();Agora o código lê a capa de acordo com o índice:
Vamos fazer o mesmo para o nome da música, nome do álbum e nome do artista:
Código
function loadLibrary() {
pageBody.innerHTML = '';
for(let index =0; index < musicLibrary.length; index++) {
pageBody.innerHTML += `
<div
class="card d-flex flex-column align-items-center"
style="width: 18rem; height: 30rem;"
>
<img
src="/imagens/Covers/${musicLibrary[index].coverFile}"
class="card-img-top"
alt="Capa do disco."
/>
<div class="card-body d-flex flex-column">
<h5 class="card-title">${musicLibrary[index].songName}</h5>
<p class="card-text">${musicLibrary[index].album}</p>
<p class="card-text">${musicLibrary[index].artist}</p>
<button class="btn btn-outline-success">Go somewhere</button>
</div>
</div>
`;
}
}
loadLibrary();Resultado
Vamos ajustar agora este botão, que além de não ter propósito ainda está com um texto que não tem sentido para este projeto.
Vamos colocar um ícone de adição ao invés de um texto e procurar esse ícone no Bootstrap icons.
function loadLibrary() {
pageBody.innerHTML = '';
for(let index =0; index < musicLibrary.length; index++) {
pageBody.innerHTML += `
<div
class="card d-flex flex-column align-items-center"
style="width: 18rem; height: 30rem;"
>
<img
src="/imagens/Covers/${musicLibrary[index].coverFile}"
class="card-img-top"
alt="Capa do disco."
/>
<div class="card-body d-flex flex-column">
<h5 class="card-title">${musicLibrary[index].songName}</h5>
<p class="card-text">${musicLibrary[index].album}</p>
<p class="card-text">${musicLibrary[index].artist}</p>
<button class="btn btn-outline-success"><i class="bi bi-plus-circle"></i></button>
</div>
</div>
`;
}
}
loadLibrary();Resultado
Filtragem da Música
Vamos criar mais um array que vai iniciar igual ao anterior com todas as nossas músicas, porém este array vai estar conectado a busca (dinâmico).
const musicLibrary = [doIWannaKnow, theLessIKnowTheBetter, liveForever,]
let songs = [...musicLibrary];Observe que este array se inicia com let, isso porque seu conteúdo pode ser alterado, entre as chaves também temos o nome da primeira array com três pontos antes do nome, estes pontos sugerem uma cópia, porém nela a ordem dos itens pode ser modificada.
Vamos trocar no código que estava associado a musicLibrary por songs
<div class="card-body d-flex flex-column">
<h5 class="card-title">${songs[index].songName}</h5>
<p class="card-text">${songs[index].album}</p>
<p class="card-text">${songs[index].artist}</p>
<button class="btn btn-outline-success"><i class="bi bi-plus-circle"></i></button>
</div>
</div>Vamos acrescentar um id na tag input, assim identificamos nossa caixa de pesquisa -> id=”search-term”
E outro para o botão na caixa de pesquisa -> id=”search-button”
JavaScript
No JavaScript criaremos referencias para essas tags através dos IDs, assim vamos trazer inteligência a nossa caixa e botão de pesquisa.
Criando variáveis com novos IDs:
const pageBory = document.getElementById('page-body');
const searchTerm = document.getElementById('search-term');
const searchBtn = document.getElementById('search-button');Evento
Em JavaScript temos os eventos, os eventos são estímulos que resultam em uma ação, um bom exemplo disso é o clique, quando clicamos em um botão este é um evento, o botão te levar a uma página ou resultado é uma ação.
Podemos fazer com que esse tipo de evento seja percebido pelo JavaScript e vamos associar a ele uma função, ou seja, uma ação.
Nosso objetivo agora é associar o clique no botão de pesquisar a pesquisa da música!
Para isso vamos programar a função com uma condicional (if), ela vai executar apenas se houver algo escrito no campo de pesquisa, se não, return (encerra)
Logo abaixo vamos colocar que a filtragem da música só será feita se o nome da pesquisa pertencer aos valores que temos.
function searchClick() {
if (searchTerm.value === '') return;
songs = songs.filter((song) => song.songName.includes(searchTerm.value))
loadLibrary();
}
searchBtn.addEventListener('click', searchClick);
loadLibrary();Vamos fazer um teste, se pesquisarmos agora por uma letra, só vai aparecer as músicas que contém a letra da pesquisa.
Agora nós conseguimos filtrar, mas não conseguimos retornar ao formato original, para isso criaremos uma função para retornar, vou chamá-la de resetFilter.
Essa função vai se guiar pelo evento input, ou seja, se houver uma mudança no input e a caixa de pesquisa estiver vazia, todas as músicas retornam.
function searchClick() {
if (searchTerm.value === '') return;
songs = songs.filter((song) => song.songName.includes(searchTerm.value) || song.album.includes(searchTerm.value) || song.artist.includes(searchTerm.value))
loadLibrary();
}
function resetFilter() {
if (searchTerm.value !== '') return;
songs = [...musicLibrary];
loadLibrary();
}
searchBtn.addEventListener('click', searchClick);
searchTerm.addEventListener('input', resetFilter);
loadLibrary();Obs. Também acrescentamos que a pesquisa pode ser feita por álbum ou pelo nome do artista, não só pelo nome da música, para isso usamos o “ou” -> ||. Observe no código acima!
Feito isso podemos apagar o último código de card que temos no HTML, pois todos estão sendo colocados pelo JavaScript!
Adicionando músicas ao botão dos nossos cards e uma lista de músicas ao botão de playlist.
Vamos pesquisar por Modal no Bootstrap
Código
<body class="d-flex flex-column" style="height: 100vh">
<div id="page-header" class="bg-seconday-subtle d-flex align-items-center justify-content-between sticky-top"></div>">
<img src="/imagens/logo - hashtag music.png" alt="Logo da Hashtag Music." style="height: 5vh" class="mx-2 my-2"/>
<div class="input-group" style="max-width: 30%">
<input id="search-term" type="text" class="form-control" placeholder="Quero essa Música!" aria-label="Username" aria-describedby="basic-addon1"/>
<button type="button" class="btn btn-outline-success"><i class="bi bi-search"></i></button>
</div>
<button id="search-button" type="button" class="btn btn-outline-success mx-2" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Playlist <i class="bi bi-music-note-list"></i></button>
<div id="page-body" class="bg-secondary flex-grow-1 d-flex flex-wrap justify-content-center gap-2"
></div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>Vamos mover as propriedades do botão da documentação para o botão que já tínhamos, com isso podemos excluir o novo botão que veio no código.
Vamos também retirar a parte do código que equivale ao rodapé e alterar o nome.
Código
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Sua Playlist</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<!-- <div id="page-footer"class="bg-seconday-subtle">Rodapé</div> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
<script> src="/script.js"</script>
</body>
</html>Neste modal, as músicas devem aparecer à medida que clicamos nos cards.
Novo Array – JavaScript
const musicLibrary = [doIWannaKnow, theLessIKnowTheBetter, liveForever,]
let songs = [...musicLibrary];let playlist = [doIWannaKnow, theLessIKnowTheBetter, liveForever,]
Vamos também acrescentar a tag <p> com o nome da música e banda para aparecer no modal e acrescentar um botão para remover o nome da música do modal.
Código
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Sua Playlist</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Do I Wanna Know - AArctic Monkeys</p>
<button>Apagar</button>
...
</div>
</div>
</div>
</div>Vamos acrescentar 2 tags <p> para testar músicas no modal, acrescentar bordas personalizadas, um ícone para o botão apagar e ajustar o alinhamento, observe no código:
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Sua Playlist</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="d-flex justify-content-between border-top border-bottom align-items-center">Do I Wanna Know - AArctic Monkeys <button class="btn btn-outline-danger"><i class="bi bi-trash-fill"></i></button></p>
<p class="d-flex justify-content-between border-top border-bottom align-items-center">The Less I Know the Better <button class="btn btn-outline-danger"><i class="bi bi-trash-fill"></i></button></p>
<p class="d-flex justify-content-between border-top border-bottom align-items-center">Do I Wanna Know - AArctic Monkeys <button class="btn btn-outline-danger"><i class="bi bi-trash-fill"></i></button></p>
...
</div>
</div>
</div>
</div>Resultado
Conseguimos colocar a lista com o efeito desejado, porém tudo foi feito no HTML e para se tornar dinâmico devemos passar essa tarefa para o JavaScript.
Já vimos que a estética ficou boa, então vamos apagar 2 das 3 tags <p> e trabalhar essa aplicação no JavaScript usando como base a única tag <p> que restou, teremos que copiar o código <p> e usar no JavaScript.
Para isso vamos a uma nova função -> loadPlaylist() e acrescentaremos um ID no HTML
<div id='playlist' class="modal-body">Código
let playlist = [doIWannaKnow, theLessIKnowTheBetter, liveForever,]
const pageBory = document.getElementById('page-body');
const searchTerm = document.getElementById('search-term');
const searchBtn = document.getElementById('search-button');
const playlistElement = document.getElementById('playlist');
function loadLibrary() {
pageBody.innerHTML = '';
for(let index =0; index < musicLibrary.length; index++) {
pageBody.innerHTML += `
<div
class="card d-flex flex-column align-items-center"
style="width: 18rem; height: 30rem;"
>
<img
src="/imagens/Covers/${musicLibrary[index].coverFile}"
class="card-img-top"
alt="Capa do disco."
/>
<div class="card-body d-flex flex-column">
<h5 class="card-title">${songs[index].songName}</h5>
<p class="card-text">${songs[index].album}</p>
<p class="card-text">${songs[index].artist}</p>
<button class="btn btn-outline-success"><i class="bi bi-plus-circle"></i></button>
</div>
</div>
`;
}
}
function loadPlaylist() {
playlistElement.innerHTML = '';
for(let index = 0; index < playlist.length; index++){
playlistElement.innerHTML += `<p id= ${playlist[index].id} class="d-flex justify-content-between border-top border-bottom align-items-center">${playlist[index].songName} - ${playlist[index].artist} <button class="btn btn-outline-danger"><i class="bi bi-trash-fill"></i></button></p>`
}
}
function searchClick() {
if (searchTerm.value === '') return;
songs = songs.filter((song) => song.songName.includes(searchTerm.value) || song.album.includes(searchTerm.value) || song.artist.includes(searchTerm.value))
loadLibrary();
}
function resetFilter() {
if (searchTerm.value !== '') return;
songs = [...musicLibrary];
loadLibrary();
}
searchBtn.addEventListener('click', searchClick);
searchTerm.addEventListener('input', resetFilter);
loadLibrary();
loadPlaylist();Resultado
Vamos tornar o botão de remover funcional? Embora o model esteja funcionando corretamente o botão de excluir não está, precisamos de uma função para guiar essa ação, esta função vai se chamar -> removeFromPlaylist()
Esta função também precisa de um parâmetro para funcionar e este parâmetro vai ser a música que será removida.
Função
function loadPlaylist() {
playlistElement.innerHTML = '';
for(let index = 0; index < playlist.length; index++){
playlistElement.innerHTML += `<p id= ${playlist[index].id} class="d-flex justify-content-between border-top border-bottom align-items-center">${playlist[index].songName} - ${playlist[index].artist} <button class="btn btn-outline-danger onclick="removeFromPlaylist${playlist[index].id}"><i class="bi bi-trash-fill"></i></button></p>`
}
}
function searchClick() {
if (searchTerm.value === '') return;
songs = songs.filter((song) => song.songName.includes(searchTerm.value) || song.album.includes(searchTerm.value) || song.artist.includes(searchTerm.value))
loadLibrary();
}
function resetFilter() {
if (searchTerm.value !== '') return;
songs = [...musicLibrary];
loadLibrary();
}
function removeFromPlaylist(songId) {
playlist = playlist.filter((song) => song.id !== songId);
document.getElementById(songId).remove();
}
Fizemos a função para remover da playlist agora faremos a função para adicionar (addToPlaylist) usando todos os conceitos que já vimos nesta aula:
function addToPlaylist(songId) {
if(playlist.find((song) => song.id === songId)) return;
const songToAdd = songs.find((x) => x.id === songId);
playlist.push(songToAdd);
playlistElement.innerHTML += `<p id= ${songToAdd.id} class="d-flex justify-content-between border-top border-bottom align-items-center">${songToAdd.songName} - ${songToAdd.artist} <button class="btn btn-outline-danger onclick="removeFromPlaylist('${songToAdd.id}')"><i class="bi bi-trash-fill"></i></button></p>`;
}Memória
Um tema importante que podemos implementar no nosso código é sobre a memória, o que usamos na nossa página web não fica salvo para uma próxima vez que abrirmos a página.
Podemos adicionar memória a página, para isso vamos usar o armazenamento próprio do navegador e fazer uma função que guarde a informação de busca -> (updateLocalStorage):
Essa função vai pegar o armazenamento local do navegador que o JavaScript conhece e salvar as informações.
Código
function removeFromPlaylist(songId) {
playlist = playlist.filter((song) => song.id !== songId);
document.getElementById(songId).remove();
updateLocalStorage();
}
function addToPlaylist(songId) {
if(playlist.find((song) => song.id === songId)) return;
const songToAdd = songs.find((x) => x.id === songId);
playlist.push(songToAdd);
playlistElement.innerHTML += `<p id= ${songToAdd.id} class="d-flex justify-content-between border-top border-bottom align-items-center">${songToAdd.songName} - ${songToAdd.artist} <button class="btn btn-outline-danger onclick="removeFromPlaylist('${songToAdd.id}')"><i class="bi bi-trash-fill"></i></button></p>`;
updateLocalStorage();
}
function updateLocalStorage() {
localStorage.setItem('playlist', playlist);
}
searchBtn.addEventListener('click', searchClick);
searchTerm.addEventListener('input', resetFilter);
loadLibrary();
loadPlaylist();Para visualizar melhor, clique em F12 no seu navegador
Feito a função, ela vai atualizar toda vez que alterarmos algo na nossa lista, seja colocando ou excluindo uma música, a informação fica salva no histórico do navegador.
A função playlist mostra as alterações, porém, perceba que o valor é ilegível, são vários object que aparecem na coluna a direita, isso porque essa aplicação não lida bem com valores não-textuais.
Então vamos fazer uma alteração no código para que os valores sejam considerados textos (mesmo que não sejam), usaremos o JSON.stringify
Código
function updateLocalStorage() {
localStorage.setItem('playlist', JSON.stringify (playlist));
}
Agora os valores estão legíveis…
Já estamos salvando o histórico, mas ainda precisamos decidir o que fazer com ele após salvar…
Vamos salvar o histórico na própria variável onde temos as músicas, porém usando o JSON para torná-lo uma array novamente.
O que acontece aqui é que o código vai ler a primeira linha de código, a parte do código que está antes do símbolo -> ??, aqui é feita uma verificação para ver se existem elementos salvos no histórico, se houver eles são transformados de texto para array novamente, se não, o código olha para a outra metade do código, a parte que está à direita do símbolo -> ??, e pega a lista padrão de músicas para usar.
Assim sempre haverá uma lista disponível para o código iniciar. Observe o código abaixo:
let playlist = JSON.parse(localStorage.getItem('playlist')) ?? [doIWannaKnow, theLessIKnowTheBetter, liveForever,]Este projeto termina aqui, acredito que avançamos bem partindo do zero, para quem fez o último projeto da playlist web, saiba que podemos unir o último projeto a este, e é isso que vamos fazer a partir de agora.
Se você NÃO fez o último projeto web – display personalizado, não tem problema, vou deixar aqui o link da aula para você!
Somando os projetos
Crie mais uma pasta para acrescentar o projeto anterior.
Arraste para a pasta nova -> Player os códigos, HTML, CSS e JavaScript do projeto web anterior.
Arraste também as músicas da pasta Song para dentro da interface musical do projeto de hoje.
Agora temos as músicas e códigos do projeto anterior inseridos no arquivo deste projeto, vamos agora conectá-los…
HTML do Player de Música – projeto 1
Ao abrir o HTML vamos acrescentar no final do código antes de -> /script.js um ponto “.”, como no código abaixo, assim ele passa a ler o arquivo atual, este é o primeiro ajuste.
<script src=”./script.js”></script>
</body>
</Html>Da mesma forma vamos fazer para o código que conecta o CSS ao HTML. Projeto 1
<link rel=”stylesheet” href=”./style.css”>
</head>
<body>
JavaScript, Projeto 2.Vamos acrescentar no player algumas funcionalidades, saber se a música foi curtida ou não (liked começando por = false) e saber onde está o arquivo da música (songFile).
Essas informações são importantes para o player de música, quando o array for recuperado essas informações tem que vir junto.
Código
const doIWannaKnow = {
id: '0',
songName: 'Do I Wanna Know',
artist: 'Arctic Monkeys',
album: 'AM',
coverFile: 'am.webp',
songFile: 'do_i_wanna_know.mp3',
liked: false,
};
const theLessIKnowTheBetter = {
d: '1',
songName: 'The Less I Know The Bettter',
artist: 'Tame Impala',
album: 'Currents',
coverFile: 'currents.webp',
songFile: 'the_less_i_know_better.mp3',
liked: false,
};
const liveForever = {
d: '2',
songName: 'Live Forever',
artist: 'Oasis',
album: 'Definitely Maybe',
coverFile: 'definitely_maybe.webp',
songFile: 'live_forever.mp3',
liked: false,
};Na função initializeSong do projeto 1, vamos fazer um pequeno ajuste retirando o mp3 e ajustando o nome coverFile e songFile.
Também vamos acrescentar a pasta cover no local das imagens.
Função original
function initializeSong() {
cover.src = `images/${sortedPlaylist[index].file}.webp`;
song.src = `songs/${sortedPlaylist[index].file}.mp3`;
songName.innerText = sortedPlaylist[index].songName;
bandName.innerText = sortedPlaylist[index].artist;
likeButtonRender();
}Modificação
function initializeSong() {
cover.src = `/images/cover/${sortedPlaylist[index].coverfile}`;
song.src = `/songs/${sortedPlaylist[index].songfile}`;
songName.innerText = sortedPlaylist[index].songName;
bandName.innerText = sortedPlaylist[index].artist;
likeButtonRender();
}Ajuste no rodapé – Projeto 2
Lembra que deixamos o rodapé comentado? Vamos agora tirar essa linha do comentário e ajustar o rodapé, vamos fixá-lo, colocar como display flex, acrescentar um botão e um ícone, mudar o ID e criar umas const para ele no JavaScript
HTML
<div id="page-footer"class="bg-seconday-subtle sticky-bottom d-flex flex-row-reverse my-2">Rodapé</div>
<button id="start-player" type="button" class="btn btn-outline-success mx-2" > Tocar Playlist <i class="bi bi-play-circle-fill"></i></button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
<script> src="/script.js"</script>
</body>
</html>
JavaScript
const pageBory = document.getElementById('page-body');
const searchTerm = document.getElementById('search-term');
const searchBtn = document.getElementById('search-button');
const playlistElement = document.getElementById('playlist');
const startPlayerBtn = document.getElementById('start-player');Ainda em JavaScript vamos iniciar uma função (startPlayer) – projeto 2
function startPlayer() {
location.href = '/player/';
}
searchBtn.addEventListener('click', searchClick);
searchTerm.addEventListener('input', resetFilter);
startPlayerBtn.addEventListener('click', startPlayer);
loadLibrary();
loadPlaylist();Esta última função dá a capacidade de navegarmos por outra url, feito isso nossos dois projetos já estão integrados, funcionais e dinâmicos!
Esta é uma aula começando do absoluto zero para quem não sabe nada sobre JavaScript, nela você vai ter uma idéia geral de como o JavaScript funciona.
Vamos mostrar diversas ferramentas e elementos comuns no dia a dia do programador e mais importante, construir um lindo projeto dinâmico e funcional!
Espero que você curta a aula!
Até a próxima! Abraço,
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Power BI e virar uma referência na sua empresa? Inscreva-se agora mesmo no Power BI Impressionador