Saia do ZERO em JAVASCRIPT em UMA AULA

Fala impressionador bem-vindo a mais um vídeo aqui da # programação e no vídeo de hoje eu vou te ensinar a fazer esse projeto aqui do Zero Isso que é uma interface de gerenciamento das minhas músicas e a gente vai aprender isso aqui mesmo que você não saiba fazer nada com JavaScript ainda Beleza então esse aqui pode ser o seu primeiro projeto web com JavaScript animado Isso aqui é uma interface com na qual eu consigo bom Tenho as minas tendo as minhas as músicas aqui cadastradas eu consigo pesquisar elas pelo nome da música nome da banda

aqui ó o vou clicar aqui vou pesquisar Putz legal né Aí eu consigo aqui por exemplo clicar aqui eu tô com uma playlist vazio ainda não montei a Playlist eu posso começar a montar eu quero botar essa quero botar essa quero botar essa aí eu tenho aqui uma playlist montada e a gente vai aprender a fazer isso tudo Aqui criar essa interface do zero gerenciar aqui a inteligência dela manter essa playlist aqui que olha eu vou atualizar aqui a página mantém ela mantém registrada ela não se perde Beleza então tem isso aqui que são coisas

muito bacanas que você vai aprender nessa aula aqui do zero Bora [Música] lá então para começar deixa eu te apresentar aqui alguns conceitos que são importantes e que eu acho que se você Tiver em mente Vai facilitar bastante a sua compreensão do nosso projeto como um todo beleza aqui vamos lá primeiro de tudo um pouco sobre a web um pouco sobre a web um pouco sobre como a Internet funciona um pouco sobre como os sites e os sistemas que rodam na internet funcionam vamos lá a gente tem essa interação a gente tem a internet funcionando

com base na interação entre cliente e servidor e o que que são cliente e servidor bom cliente é você Usuário mas especificamente é você através do seu dispositivo o seu computador o seu notebook o seu celular quando você Tá acessando um aplicativo ali ou uma página da internet você tá entrando ali numa interface que aquela que aquele sistema disponibilizou para você por exemplo Pensa numa rede social um Instagram da vida por exemplo você entrou ali naquela interface que o Instagram disponibilizou para você e ali tem as informações tem ali os Comentários as fotos tudo que

é relevante para você as mensagens das pessoas que conversam com você tá certo isso aqui você tá consumindo você é o cliente beleza mas quem tá te entregando essa informação quem tá gerenciando essa informação quem tá se entendendo que aquela informação puts Essa é a mensagem que eu vou entregar pro Daniel porque essa é a mensagem que mandaram pro Daniel e não a mensagem que mandaram Para outra pessoa e eu tô entregando pro Daniel por engano quem é responsável por esse pensamento inteligente é a programação que existe no computador lá da empresa responsável pelo sistema

isso é no servidor entendeu a gente chama dessa a gente chama essa inteligência essa inteligência lá nos computadores da empresa essa aqui que não acontece no nosso dispositivo de inteligência do backend ao passo que a Nossa interface o que a gente tá interagindo ali com é o frontend beleza e aí só que aqui um comentário eu falei da inteligência do Servidor isso aqui significa que o frontend não tem inteligência Não na verdade pelo contrário o frontend ele pode até ser uma interface mas ele não é estático ele não é parado e justamente porque o JavaScript

existe o JavaScript foi criado com essa finalidade foi justamente para dar as capacidade D Essas interfaces serem inteligentes ora basta você pensar você Tá acessando um site e tá vendo aqui um vídeo no YouTube nesse momento por que que você tá vendo um vídeo no YouTube porque tem nessa página a inteligência capaz de gerenciar a execução desse vídeo entendeu então existe inteligência tanto no front end e t quanto no backend e até uma curiosidade sobre JavaScript é que você pode usar ele para programar tanto a inteligência do cliente quanto a Inteligência do Servidor JavaScript é

realmente muito interessante nesse sentido em muitos outros sentidos também mas então fica com isso aqui em mente essa comunicação entre cliente e servidor beleza frontend e backend agora vamos falar aqui um pouco sobre as tecnologias da web E aí agora eu tô focando especificamente no frontend na criação de interfaces de páginas tá bom porque o nosso projeto é essencialmente isso eu não tenho um Computador remoto com o qual o meu sistema tá se comunicando eu vou fazer todo o sistema rodar aqui dentro do meu próprio computador e aqui dentro do próprio navegador Beleza então eu

tô só faz eu tô fazendo um projeto que é exclusivamente de frontend E aí quais são as tecnologias que regem esse sistema bom são três as principais o HTML o CSS e o JavaScript beleza e quais são Essas tecnologias pensa no seguinte pensa no corpo humano o corpo humano tem O esqueleto que define a estrutura dele o o corpo humano tem uma aparência né definida ali por pele por eh cabelo por olhos né assim por todos esses elementos que definem a nossa aparência e o nosso corpo humano porque somos vivos é capaz de desempenhar ações

essas ações bom ditadas pelo cérebro aqui é nos faz a nossa capacidade de desempenhar ações nos faz inteligentes certo beleza por que que eu fiz essa analogia Porque da mesma forma eu posso usar isso aqui para Descrever as interfaces as páginas de internet que a gente vai criar a página de internet ela é primariamente construída pelo HTML que define a estrutura da página define os elementos que vão existir na página ah existe um botão ali Putz esse botão tá definido no HTML ah existe um campo de t T ali para eu escrever um texto esse

campo de texto é definido ali no HTML beleza mas uma página HTML puro ela é uma página em branco com texto com botão ali é uma Página até meio esquisita O que define as páginas bonitas aqui com cor e com sabe com vida do jeito que a gente conhece né do jeito que a gente espera encontrar qualquer página hoje em dia é o CSS o CSS nos dá a capacidade de estilizar essas páginas anteriormente só preta e branco ali estático Beleza o CSS é o que é o recurso que permite a gente dar essa vida

às páginas Mas vida aqui só no sentido estético porque o responsável por dar inteligência e Interatividade pras páginas é o JavaScript é a gente que através do JavaScript vai dizer que ao clicar nesse botão clicou aqui no botão específico uma ação vai acontecer Entendeu essa ação tá programada por JavaScript Beleza agora pro nosso projeto a gente vai um passo além dessas três principais tecnologias a gente vai usar o Bootstrap e o que que é o Bootstrap pensa da seguinte forma páginas Elas têm algumas coisas em comum muitas vezes quantas Páginas você já não entrou que

tem assim um header um cabeçalho ali em cima ou um roda pele um corpo algumas estruturas em comum consegue imaginar Poxa por exemplo o Facebook se eu entrar no Facebook ele tem ali aquele cabeçalho Azul ali em cima ele tem sei lá tem ali um corpo tem uns cards assim toda a postagem fica parecendo como se fossem cartões assim e aí tem o nome de quem postou tem aqui o conteúdo da postagem e embaixo tem uma sessão de comentários tá vendo que assim São elementos que se repetem Pois é se você entrar no Spotify por

exemplo vai ter ali no rodapé um tocador Zinho de música Então você tem esses elementos que se repetem e assim no mínimo em conceitualmente esse repetem E aí entendendo isso um conjunto de desenvolvedores eh preparou já esses elementos que são comuns e reuniu eles numa caixa pra gente uma caixa de ferramentas o que a gente chama de uma biblioteca essa biblioteca o Bootstrap a Gente vai trazer pro nosso projeto para já partir da capacidade de usar isso que eles entregaram pra gente entendeu então isso Vai facilitar o nosso processo de criação de interfaces Porque a

gente já tem ali o o já tem ali elementos prontos que a gente pode simplesmente utilizar E aí organizá-los de acordo com o nosso os nossos interesses aí Alguns conceitos importantes a div a div bom é um dos possíveis elementos que compõem o HTML a Gente tem na div o elemento mais comummente encontrado nas páginas web Beleza então como eu disse para você o HTML é o responsável por definir a estrutura da página e aí ele vai ter vários elementos assim ele vai ter um botão ele vai ter um campo de texto ele vai ter

assim tudo vai tá descrito ali no HTML só que esses elementos HTML que T nomes diferentes e funcionalidades diferentes são vários um deles a div É genérico É muito genérico e muito Utilizado beleza e o seu nome sugere já o que a que que ele se propõe a div ele é uma divisão pura da tela imagina que você tem a tela que é uma página Até então em branco e você vai definir uma div ali no HTML você tá fazendo é um recorte retangular ali na tela e falando ó essa é minha área aqui e

aí tudo que eu botar dentro desse retângulo vai ser o conteúdo dessa área entendeu então É como se eu tivesse fazendo uma subdivisão E aí botando ali um conteúdo Dentro dessa subdivisão aí essencialmente um retângulo que usaremos para delimitar áreas de interesse na página Beleza então entendendo esse conceito Vamos dar um passo Aé se a div faz isso ela estabelece uma divisão se a gente vai pensar nos elementos aqui da página como como divisões como e retângulos eu quero que você pense também em dives dentro de dives e como é que elas funcionam ó se

você estruturando o nosso projeto 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 então a ser sobrescrever como esses retângulos interagem entre si entende então assim eu posso botar um retângulo e aí imagina que cada elementin ali da sua página é um é um retângulo Então eu tenho esse retângulo a Eu tenho esse retângulo aqui dentro do retângulo aí eu tenho um outro retângulo dentro do retângulo eu vou dizer assim Ah esse retângulo aqui tá posicionado aqui no canto superior esquerdo do retângulo maior puts

mas esse aqui tá no canto superior direito do retângulo menor e do retângulo maior e ele tem um outro retângulo dentro dele que tá Centralizado e assim eu vou organizando os meus elementos um relativo ao outro sacou eu posso montar eles assim e posso estruturar a minha interface dessa forma Lembrando que aqui esse retângulo é só assim eu tô enxergando de uma forma bem Abstrata Mas o que eu tô fazendo aqui é isso eu tô montando a minha interface com base em peças e eu eu tô entendendo que eu posso ter peças ali peças dentro

de peças e que eu posso customizar essas peças então aqui esses retângulos não estão do mesmo tamanho não é sem querer não o retângulo aqui ele pode ter um tamanho diferente ele pode ter uma cor diferente ele pode ter uma sée de características diferentes e é isso isso nós vamos Determinar Beleza então vamos lá para determinar para entender Quais são as características que a gente vai querer aplicar é importante que a gente entenda Quais são os elementos estéticos que a gente vai manipular beleza tipo de display tipo de display Na verdade é um conceito importante

display basicamente vai dizer o seguinte você vai dizer que um retângulo um retângulo uma di uma divisão dessas aqui ela tem uma uma propriedade display E aí você tem E aí Puts você pode dizer que ela ah ela pode ser um display do tipo a pode ser um display do tipo B Cada um com as suas características Qual é a relevância disso a gente vai usar Principalmente um tipo de display chamado display Flex e display Flex ele funciona com uma mentalidade Super Interessante que é de viabilizar a internet que reage a por exemplo o tamanho

da sua tela você já teve experiência lá no passado quando tava surgindo quando estavam surgindo os Smartphones de acessar uma página de internet que não era adaptada para você usar o smartphone usar no Smartphone Então quando você abrir ela ficava pequenininha assim você tinha ficar dando zoom a navegação era horrível Então é porque aquela página era estática ela não era responsiva ela não sabia interagir bem com o dispositivo que você tava utilizando sacou e o display Flex ou seja esse eu dar essa característica a uma divisão ali da Minha página significa eu já incorporei um

pouco essa característica eu já dizer para ele Ó organiza os elementos que estão dentro de você de forma que eles saibam reagir em relação ao espaço que existe disponível aqui então isso aqui pra gente é putz é é o é o que há é o melhor que tem então a gente vai usar esse display Flex muitas vezes para ditar isso aqui né como a gente quer estruturar o nosso retângulo estruturar o conteúdo dentro do nosso retângulo o Posicionamento deles a organização deles beleza tá tipo de display Então é isso foco no display Flex Porque ele

é o mais importante pra gente aqui nesse projeto espaçamento aí aqui espaçamento é o seguinte bom pensa no seguinte eu quero ah eu quero colocar esse elemento aqui e eu quero colocar esse elemento aqui mas eu quero que esse aqui não fique grudado com esse então eu tô me preocupando com o espaçamento entre eles Ah eu quero que esse retângulo aqui não fique colado Nessa borda aqui eu tô me preocupando com o espaçamento entre eles então você consegue ver como espaçamento é um é um conceito relevante aqui pra gente tá bom então aqui espaçamento também

é um conceito relevante cores de texto e cores de fundo orha se a gente tá querendo criar uma interface bonita assim elegante uma coisa assim agradável a gente vai ter que se preocupar em botar uma cor ali também né E aí puts pensa só não só uma cor de fundo Mas Vamos supor que eu botei sei lá um verde escuro e o meu texto continua Preto aquele verde escuro não vai ficar bom de ler no e no fundo e aquele texto preto não vai ficar bom de ler no fundo verde escuro sacou eu preciso me

preocupar em mudar também a cor do texto Então assim cores cores também são um critério pra gente posição dos elementos também é um critério pra gente eu quero que esse fique aqui eu quero que esse fique aqui poxa eu tava falando para você de Cabeçalho o cabeçalho tem que ficar onde no topo da página né eu não vou botar ele lá embaixo não faz sentido concorda beleza e por fim o tamanho dos elementos também é relevante olha pensa só eu posso botar aqui a imagem pá Só que a imagem é grandona Originalmente né o a

imagem que eu tô buscando eu vou botar ela vai ficar enorme na minha página eu não quero isso eu quero poder controlar isso para que ela fique num tamanho menorzinho Beleza então é esses são os Critérios que eu vou utilizar para escolher ali os elementos adequados para montar a minha interface beleza é isso sem mais delongas vamos lá pro vídeo abrindo o visual Studio code e se você não tiver o visual Studio code instalado Eu recomendo que você dê uma olhada no vídeo que a gente postou aqui no canal sobre como instalar o visual Studio

code e deixar ele preparado para você começar a desenvolver em JavaScript beleza é um vídeo curtinho um vídeo super prático Mas que eu recomendo porque o visual Studio code é uma ferramenta muito boa e que Vai facilitar muito o seu dia dia como programador Beleza então vamos lá aí aqui com visual de code aberto eu vou vir aqui nessa opção Open folder E aí eu vou aqui ó clicar aqui eu vou abrir aqui uma pasta e eu vou escolher aqui a pasta na qual eu quero colocar o meu projeto Tá bom eu já tenho aqui

uma pasta pronta Mas você poderia criar uma pasta para Isso aqui clicar com botão direito novo pasta beleza eu tenho aqui interface musical e eu vou selecionar essa interface musical beleza aí tá aqui vamos lá agora eu disse para você que a essas páginas web né essas páginas de internet elas são estruturadas com base em três principais tecnologias HTML CSS e JavaScript o Bootstrap que a gente vai usar aqui vai permitir que eu me preocupe muito pouco com CSS ou muito pouco em escrever CSS tá bom porque o Bootstrap Já escreveu bastante CSS para mim

eu vou começar escrevendo de qualquer forma eu vou começar escrevendo o HTML Então vamos lá cliquei aqui ó Nessa opção aqui New file e ele vai criar então o arquivo nessa pasta que vai ser a pasta base do meu projeto eu vou botar aqui index P HTML que é um nome padrão para sua página principal do seu sistema beleza index HTML Putz tá Daniel mas eu não sei nem como escrever não sei nem por onde Começar esse HTML Não se preocupa eu disse para você que sh code era uma ferramenta muito boa né Muito prática

para esse tipo de uso vamos lá aqui O primeiro exemplo disso é se você apertar exclamação e apertar enter ele já criou para você um conteúdo base de um HTML e isso é muito bom isso é muito prático que você geralmente teria que escrever esse tipo de coisa mas aqui ele já preparou para você não só isso mas aqui ele já pintou para você que tá vendo Isso pela primeira vez uma ideia de como é que funciona eu vou te mostrar tá vendo aqui que é cheio desses elementos aqui com menor q e maior q

com essas chavezinha tag tag e o HTML ele é composto por tags então quando eu dizia que o HTML descrevia os elementos da nossa página ele descreve através de tags E aí ele tem essa tag aqui R essa tag de R ela geralmente passa informações pro navegador que vai ler esse HTML certo o Navegador lê esse HTML e monta a página baseado no que tá escrito aqui e essas informações são informações para navegador se guiar então elas não vão traduzir e elas não vão traduzir informações na página elas não vão trir conteúdo na página o

conteúdo da página vai ficar dentro dessa tag aqui bar Como assim dentro da tag bar é simples você deve ter reparado que algumas tags dessas por exemplo a própria tag bar ela ela tem existe duas Vezes aqui com a diferença de que a segunda tem essa Barrinha a gente chama essa aqui a tag com a barrinha de tag de encerramento e a tag de abertura e essa aqui é a tag de abertura A tag sem a Barrinha quando existe uma tag de abertura e uma tag de encerramento significa que você tá dizendo que o conteúdo

do bar do corpo da sua página por isso que tem esse nome bar em inglês é corpo é é o inglês para corpo eh o conteúdo vai ficar delimitado entre Essas duas tags beleza e aí um exemplo disso é eu vou escrever aqui ó se você escrever div e apertar enter o visual Studio code ele cria para você uma div do jeito que eu aumentei E aí eu vou fazer o seguinte eu vou colocar três gibs Tá bom eu vou colocar três gibs e vou escrever aqui ó cabeçalho e eu vou escrever aqui no meio

corpo por fim eu vou escrever aqui roda pé beleza cabeçalho corpo e rodapé vou clicar aqui com o botão direito nesse Meu index P HTML e vou aqui ó Open with Light serber mais uma vez se você não tiver essa opção aqui aparecendo dá uma olhada no vídeo de como preparar o visual Studio como instalar e preparar o visual Studio code para você poder fazer os seus projetos web isso aqui é super simples é uma ferramenta muito bacana pra gente beleza Open with Live server eu cliquei aqui ele vai abriu aqui para mim ele abriu

aqui para mim olha só eu já tenho uma página aqui cabeçalho corpo E roda pé ela tá bom ela tá Branca ainda só com texto não tem nenhuma estilização que é exatamente o que eu falei né até então eu só fiz um HTML Então esse aqui é o contexto mas mas a gente já tem conteúdo aqui sendo traduzido em uma página de internet então Olha que bacana já é o princípio da sua primeira página legal né mas vamos além ó Isso aqui é uma div e esse aqui é o conteúdo dessa div isso aqui é

outra div e esse aqui é o conteúdo dessa div E se eu quisesse Colocar aqui ó corpo corpo corpo corpo eu tô repetindo essa div várias vezes você viu que eu coloquei aqui salvei já apareceu aqui na tela existe uma correspondência entre o que tá escrito aqui no HTML e o que tá e o que tá aparecendo aqui na minha página que é de fato o que tá acontecendo né porque o navegador tá lendo isso aqui e tá montando a página com base nisso beleza só que agora repara numa coisa eu tenho algumas dives que

tem aqui conteúdo Corpo corpo corpo o que que diferencia Essa divid de cima da essa div de baixo eles são o mesmo tipo de tag né porque aqui por exemplo essa tag Pelo menos é bar não é div mas essa aqui é div só que o conteúdo dela é diferente agora essa div aqui e essa div aqui de baixo Elas têm o mesmo conteúdo e elas são o mesmo tipo de tag existe alguma diferença entre as duas para responder essa pergunta eu vou te dizer o seguinte a gente pode dar informações adicionais Pra div para

especificar a gente quer que ela tenha um comportamento específico a gente quer que ela tenha uma cara em específico que ela cumpra uma funcionalidade em específico a gente tem como adicionar essas informações e fazendo isso eu consigo fazer com que essas duas dives apesar de serem o mesmo tipo de tag né os dois são divs e os dois ter o mesmo conteúdo a palavra corpo elas vão ser diferentes entre si tá bom E aí um exemplo é aqui ó por Exemplo se eu colocasse Style Style é uma é um atributo que me permite que me

permite estilizar A minha div tá bom Ó eu disse aqui Style background color red Beleza então o que que eu fiz eu disse que essa div tem a o recurso o recurso de o seguinte recurso de estilo ela vai ter o fundo vermelho e aí o que aconteceu foi isso o fundo dela ficou vermelho já não é mais claramente a mesma coisa tá bom Por quê Porque eu dei a ela uma informação adicional mas isso Aqui foi só para ilustrar eu quero isso na verdade eu V pesquisar aqui ó vai jogar aqui no Google Bootstrap

jog Bootstrap o primeiro que aparece é justamente que a gente quer boot Você clicou aqui e é super simples como que você faz PR incorporar o bootp no seu projeto para que você possa usar esses recursos que eu te falei que é uma biblioteca de recursos que tá lonta você utilizar você vai pegar esses dois links aqui ó nessa parte include via CDN Você Vai clicar nesse primeiro link E aí ele tá dizendo aqui ó você pega isso aqui e você vai colocar aqui ó você vai colocar no R tá bom esse primeiro esse primeira

tag aqui a tag de link que você copiou você vai colocar no Head por fim você vai copiar essa tag aqui também script essa aqui de baixo você pode copiar com CRL C você pode copiar do jeito que você quiser você pode clicar nesse botãozinho que ele já vai copiar para você e você vai colocar ela agora no final do Body Ele vai ser o último elemento dentro do bar essa tag tá bom salvei aqui beleza com essas duas tags eu já tenho a capacidade de usar os recursos do Bootstrap dentro da minha página Então

isso é super bacana vamos vamos ver como é que isso aí funciona na prática ó entrei aqui na página do Bootstrap na página do Bootstrap você vem aqui para essa página inicial e você pode clicar aqui ó read the Docs né Entrar na documentação aí tem exemplos aqui também Temem todo um conjunto de coisas eu vou clicar aqui né na documentação porque essa documentação é simplesmente o seguinte ele vai me dizer tudo que tá aqui como eu posso utilizar Quais são as ferramentas que eu tenho à minha disposição entendeu E aí a primeira delas é

a seguinte bom eu vou apagar isso aqui né porque eu não quero que tenha 40 corpos diferentes Na verdade eu botei isso aqui só de forma ilustrada para que a gente saiba que eu vou querer Criar um cabeçalho um corpo e possivelmente um rodapé também esse aí eu ainda vou decidir beleza aí lembra dos critérios que eu falei de estilização um deles um que chama bastante atenção é a cor cor de fundo que eu chamo de background color né em inglês background color é cor de fundo Então você v que é super fácil cliquei aqui

para pesquisar no boot Trap eu venho aqui pesquisei back já apareceu aqui para mim background background Color ele já me mostra assim ó o que eu tenho para você de background color aí ele me mostra você pode usar qualquer uma dessas cores erado muito bacana muito bacana mesmo beleza mas eu como é que eu faço como é que eu incorporo o que que é isso aqui tem esse nome beleza Tá vendo que todos esses nomes TM um ponto antes esse ponto é nomenclatura paraa seguinte é isso aqui é uma nomenclatura para classe classe e o

que que é classe é simples Class é mais uma Forma de você dizer uma característica específica daquela tag E é isso que eu V fazer eu vou dizer aqui que ó essa div ela tem a classe e aí aqui ó o ponto ele não é ele não faz parte do nome da classe ele é só um indicativo de que ó isso aqui eu tô falando de classes beleza tá aqui então Ó se eu pegar aqui esse nome então eu posso copiar esse nome aqui sem o sem o ponto aqui ó eu acabei copiando só o

tá aqui BG primary né que é esse aqui sem o ponto salvei E Aí eu disse ó essa minha div Faz parte dessa classe se ela faz parte dessa classe ela ganha a característica dessa classe e qual é a característica aqui bom a gente tá falando de cor de fundo se ela faz parte dessa classe classe você pode pensar aqui como um grupo E aí os elementos desse grupo tem as mesmas características aqui ó ele ganhou a cor de fundo primary que é essa aqui Azul Beleza então aqui eu já consegui deixar o meu cabeçalho

Azul Você viu que eu não Precisei escrever Style background Color er aquelas coisas que eu tinha escrito Originalmente né Eu só vim aqui e botei a classe que o Bootstrap icon ou desculpa que o Bootstrap eh que o Bootstrap definiu e me apresentou E com isso eu consegui economizar assim eu consegui economizar tempo eu não tive que pensar ali eu mesmo eu só vi aqui a cor que eu queria e botei a classe correspondente lá beleza eu no caso vou colocar essa aqui ó ao invés de botar Azul eu vou colocar essa aqui esse branco

aqui que não é super Branco tá bom botei aqui ó esse meu cabeçário ficou até difícil de ver porque ele é muito próximo de um branco de fato mas eu dei um zoom aqui eu acho que talvez você tenha conseguido ver em todo caso agora eu quero que o meu corpo tenha um fundo mais escuro eu quero que tenha esse cinza aqui eu vou botar aqui ó o corpo tá aqui ó classe background secondary Mas você vai tirar esse ponto Aqui porque esse ponto não faz parte do nome da classe é só um indicativo de

que isso aqui é um nome de uma classe salvei aí o corpo ficou aqui ó e o rodapé por sua vez eu quero botar no mesmo eu quero tá na mesma classe lá do do Topo tá bom do cabeçalho Aí salvei Mas por que que isso aqui tá assim ao invés de tá ocupando a tela inteira Putz a resposta para isso é isso aqui tá assim ao invés de ocupar a tela inteira porque todos esses elementos aqui esses três estão Dentro do bar tá vendo o bar e o Bari é isso ele define o tamanho

da sua página só que o Bari por padrão ele vai ter seu tamanho necessário para você para você poder exibir todo o conteúdo e o meu conteúdo não precisa de muito mais espaço do que isso mas tem como a gente alterar isso tem como a gente ir além uma boa forma da gente fazer isso é colocar isso aqui ó esse bar como ó a classe e o body também pode ter classe lembrando as tags elas podem ter classes Aqui o body também eu vou botar a classe dlex A classe dlex é ela estabelece um display

flex como eu tinha comentado com vocês aqui o display Flex ele tem uma característica engraçada que é por padrão ele entende que os elementos têm que ser dispostos na mesma linha não é o que eu quero né Eu quero que ele esteja uma coluna eu quero que esteja um em cima do outro então eu vou colocar uma segunda classe aqui mas isso aqui já tá indicando pro isso aqui já é indicando Para vocês que um elemento pode ter mais de uma classe isso é ele pode fazer parte de mais de um grupo beleza e aí

ele vai ter as características de cada um dos grupos que ele faz parte Ah Daniel mas como é que você sabe que o nome disso aqui é deflex como é que você sabe bom eu posso pesquisar aqui ó display Flex apareceu aqui para mim Flex aí você vai ver aqui ó classe Def Flex tá vendo tá aparecendo aqui é isso eu por acaso Já conheço porque eu já usei bo Trap bastante mas é só você pesquisar aqui o nome do que você tá querendo fazer que ele vai te dizer como fazer beleza voltando aqui ao

nosso problema o display Flex por padrão ele tenta colocar os elementos na mesma linha a gente vai dizer que não a gente quer usar o display Flex e colocando os elementos em coluna Então a gente vai colocar uma segunda classe aqui do boot Trap a flex colum que é uma classe que Já se encarrega de fazer isso ela pega um display que é Flex e diz que os elementos dele tem que ser dispostos em coluna Então tá aqui eles foram dispostos e olha só agora a gente voltou aquela estrut Inicial beleza isso aqui a princípio

resolve isso aqui a princípio resolve pra gente por porque com isso aqui eu consigo dizer que ó eu vou pesquisar aqui ó uma outra propriedade chamada Flex ó Flex grow 1 Flex grow eu vou colocar isso aqui no nessa minha div aqui corpo Beleza eu vou colocar essa essa aqui nessa minha div corpo e aí o que que ela vai fazer bom até Então nada mais o eu vou colocar aqui mais uma mais uma informaçãozinha no bar a informaçãozinha do bar ela é muito relevante aqui ó Style e aqui só uma informação eu disse eu

botei eu apresentei essa esse atributo Style inicialmente só que Depois eu tirei e falei que a gente ia usar a gente ia usar o boot Trap para isso né a gente ia usar o Bootstrap para estilizar a nossa página mas o Style eu vou usar assim de vez em quando para um caso específico que é o seguinte quando eu quiser determinar tamanhos pras coisas porque o Bootstrap ele não e ele não vai saber determinar tamanhos específicos pras coisas eu quero fazer isso eu mesmo então só no caso de determinados tamanhos eu quero que ele Seja

eu quero que ele seja usado então aqui ó eu vou fazer aqui o tamanho do corpo da página do height não o tamanho do bar vai ser isso Ó o bar que por sua vez é o que tá englobando isso aqui é o que tá englobando isso aqui né tudo é o que compreende a nossa página de fato o tamanho dele vai ser tamanho em inglês é height né altura vai ser 100 eu botei aqui sem dvh beleza dvh é isso aqui é hum unidade Significa viewport height viewport é aqui a sua janela height é

altura e o 100 aqui é para dizer que ela vai ocupar 100% da altura disponível na sua janela beleza e o o d é de dinâmico é só pra gente saber se responder direitinho caso você esteja usando num celular também mas isso aqui é um pouco de preciosismo da minha parte você poderia usar só o VH que é o viewport height com essa informação aqui que o Bari ocupa sem sem viewport height ele ocupa eu tô dizendo Que ele ocupa 100% do tamanho disponível na janela beleza e quando eu disse que o bar ocupa 100%

do tamanho disponível eu disse que também que essa div aqui que é corpo mas não confundi aqui com esse Bari aqui eu até depois vou colocar uma informação adicional aqui para deixar claro que são coisas diferentes mas eu quando eu coloquei aqui Flex grow 1 O que que significa isso um elemento dentro de um display Flex e aqui você tá vendo que o Bari é um Display Flex ou seja tudo que tá dentro tudo que tá imediatamente dentro do bar tá é um elemento de dentro do display Flex ele pode receber essa informação aqui Flex

grow 1 e o que que é essa informação é ocupa Todo o espaço que você puder é isso aqui que ele tô dizendo por exemplo eu vou tirar aqui ele voltou para esse tamanho original mas agora eu tô falando o Bari é o o corpo essa div aqui Corpo Pode ocupar o tamanho que o o tamanho que tiver Disponível pela div Pie ou pela pela tag Pie como a tag P era Bari é isso aqui como a tag Pie era bari e o Bari tava sendo definido para poder usar toda a janela ele Pode ocupar

quase tudo da janela a exceção do cabeçalho e do rodapé Beleza então tá bom só que agora a gente vai brincar um pouco mais com isso aqui eu quero fazer já uma interface mais bonitinha eu eu não quero que tenha cabeçalho aqui escrito eu quero só sei lá eu só botei cabeçalho Aqui para você ter ideia de O que que a gente onde é que a gente estava Mirando mas aqui por exemplo eu quero botar um logo o logo aqui do meu projeto né porque eu tô fazendo aqui o a plataforma de música da hashtag

então eu vou botar o logo da plataforma de música da hashtag beleza como todo Boom como Tod Boom empresa Você clicou aqui no Bootstrap por exemplo tem o logo do Bootstrap aqui você clicar no Facebook vai ter o logo do Facebook aqui e aí da Hashtag não vai ser diferente como é que eu vou fazer isso eu vou clicar uma eu vou criar uma pazinha aqui dentro da minha pasta do projeto ó Nessa opção aqui New Folder que é nova pasta eu vou escrever aqui images dentro dessa pasta images aqui eu vou colocar os recursos

de imagem que eu quero poder utilizar no meu projeto tá bom e eu já tenho eles separados aqui para mim ó eu vou aqui ó clicar aqui tá é review in file Explorer beleza aqui recursos Images Tá aqui eu vou botar aqui o logo images pronto # music Esse logo que eu quero utilizar esse logo que eu quero utilizar beleza aqui onde é que eu quero que ele apareça no meu cabeçalho Então deixa eu apagar esse na verdade não vou nem apagar ainda não eu vou deixar você ver como é que vai ser a interação

dos dois mas eu vou botar aqui já uma nova tag a tag IMG IMG aperto enter é tag de imagem é a tag que eu vou usar para colocar uma Imagem dentro da minha página E aí tem essas duas propriedades ela tem esses dois atributos aqui source e Alt e para que que serve o Source e o alt o Source primeiro ele vai te dizer onde tá a imagem que você quer Beleza Onde tá a imagem que você quer exibir E aí eu vou dizer isso aqui ó partindo da pasta base do projeto representada aqui

por essa barra eu vou pra subpasta images E aí dentro da subpasta Images eu tenho o logo.png eu vou salvar e você vai ver Que apareceu já aqui o logo a gente vai fazer uns ajustes nele mas deixa o foco aqui tem esse atributo aqui Alt e se a imagem apareceu se tá funcionando tudo certinho para que que o que que significa esse eh O que que significa esse al para que que ele é necessário claramente não foi necessário para botar a imagem aqui bom duas coisas a primeira delas é você já acessou uma página

Você já tentou acessar a internet com a sua conexão bem ruim e aí as imagens não Carregar direito aparecia um iconz de imagem quebrada Pois é quando aparece esse iconz de imagem quebrada se esse Alt tiver definido ou seja se tiver um texto aqui dentro logo da hash music logo da hashtag music botei aqui salvei se ele não conseguisse carregar essa minha imagem aqui o logo da #music ele ia mostrar esse texto alternativo beleza aí você talvez esteja pensando Daniel eu sou eu sou o rei da internet eu tenho uma internet muito Braba aí que

não falha nunca então eu não preciso me preocupar com um texto alternativo Não na verdade você precisa sim e é pelo seguinte e a internet ela é a nossa realidade ela é o nosso dia a dia todo mundo usa inclusive pessoas com deficiência E por que que eu tô dizendo isso aqui pessoas com deficiências visuais elas muitas vezes usam leitores de tela e o leitor de tela ele vai ler e descrever para ela ó tem esse elemento aqui agora tem essa imagem aqui ele Descreve por voz como é que é que a página tá construída

como é que ele sabe descrever o que que é imagem ao invés de simplesmente dizer aqui tem uma imagem como é que ele sabe simples Ele lê o conteúdo aqui dessa tag de atributo beleza dessa tag não desculpa dessa desse atributo dessa tag Beleza então quando você coloca isso aqui você tá se preocupando também com acessibilidade do seu projeto que é sempre uma preocupação importantíssima de ter tranquilo Então Tá aqui eu você tá vendo ó eu botei aqui ficou esse logo aqui enorme e o cabeçalho aquele texto aqui que eu ainda não apaguei ficou logo

embaixo eu já vou apagar mas antes como eu falei para vocês quando eu quiser manipular a altura dos meus elementos eu vou quando eu quiser manipular a altura dos meus elementos eu vou me permitir usar esse atributo Style aqui aí eu vou fazer isso aqui ó height ele vai ser 5vh tá bom 5 VH Ó 5vh ficou aqui bom ficou bom ficou bom eu gostei desse tamanho aqui tá bom para mim beleza agora por sua vez esse texto cabeçalho aqui esse aí já não faz o menor sentido para mim eu quero me livrar dele tá

aqui a gente já tá começando a ter algumas dives né a gente já tem é a gente já tem essa div a gente tem aquelas três mesmas dives mas na Medina que a gente for colocando mais elementos vão ficar parecendo mais dives aqui no HTML eu quero sempre poder identificar Quais são as minhas dives E para isso eu vou dar um outro atributo aqui que é super importante o ID ID pensa nele como identificador de fato por isso o ID né identificador essa minha div aqui essa primeira vai ser o page header tá bom page

header que é cabeçalho da página eu coloquei aqui esse nome em inglês porque é padrão você escrever e nomes em inglês é muito comum assim no dia a dia na programação Especialmente porque Programação assim é uma coisa que muitas vezes você tá fazendo com pessoas de outros lugares do mundo isso aí acontece então é comum as pessoas escreverem em inglês para se comunicar mas o ID aqui eu tô definindo o identificador da minha página e eu tô dando esse nome aqui para ele eu poderia ter colocado cabeçalho aqui eu vou botar cabeçalho desse jeito sem

caractere especial mas eu poderia ter colocado eu poderia ter colocado banana Se eu quisesse tudo bem Poderia sem o menor problema aqui eu Escolhi um ID que fizesse sentido né que fosse descritivo em relação a o papel que essa dívida ocupando mas e que também fosse bom em inglês por causa disso que eu tinha comentado Mas você pode botar o nome que você quiser só depois se você por acaso precisar referenciar Ah eu quero a que tem esse ID aqui que tem o ID tal você tem que ser coerente com o nome que você colocou

Originalmente Ah se você botou banana Você vai botar o AD do id banana Beleza então da mesma forma eu vou pegar isso aqui e vou colocar nessas duas outras divs aqui e vou colocar nessas duas outras divs aqui alterando lógico porque o identificador pensa nele como o CPF da div o CPF é único né não tem duas pessoas com o mesmo CPF da mesma forma eu não vou botar dois ids iguais aqui ó page Body e page footer Beleza então aqui eu botei header Body e foter né Então assim page header page bar e page

footer vai ser assim o cabeçalho o corpo e rodapé da minha página Tá bom então beleza agora eu vou colocar aqui outros elementos que eu gostaria que tivesse no meu cabeçalho especificamente E aí se você lembrar ali da introdução eu tinha um botão na qual eu consegui abrir a minha playlist eu e eu tinha uma barra de busca aqui para eu poder buscar assim quando entre todas as minhas músicas cadastradas uma música que eu gostaria De ter Beleza então vamos lá Primeiro de tudo eu quero botar a barra de busca e a barra de de

busca ela tem esse é tipo isso aqui ó ela tem esse campo aqui para eu escrever um texto ela tem esse campo aqui para eu escrever um texto é um campo que em inglês a gente chama de input input que é um campo de entrada Tá bom então eu joguei aqui no Bootstrap Icon no no Bootstrap e ele apareceu aqui para mim olha Basic example Então ele me D vários exemplos assim de como você pode botar essas caixinhas para inserir texto e até com estilo diferente forma diferentes aqui ele é super elaborado Mas eu só

preciso de um né eu só quero botar um desses aqui o que que eu vou fazer olha só aqui eu que eu comentei de como o Bootstrap ajuda a gente porque ele tá dando esses exemplos aqui né tá mostrando aqui ó funciona dessa forma e para funcionar dessa forma o código é esse Ele tá dizendo aqui pra gente o Código só que isso aqui é o código para você fazer todas essas caixas eu não quero todas as caixas Eu quero uma só eu quero uma só para em todos os efeitos eu vou pegar essa primeira

aqui então basta eu pegar essa div aqui isso isso aqui é o código HTML com as referências para as classes Bootstrap que determina essa div aqui que determina essa esse grupo de input aqui essa caixa de texto aqui eu vou pegar esse código e colocar lá no meu projeto ah onde é que eu quero que Ele fique bom eu quero que ele fique no header também né então eu vou colocar aqui ó page header essa div aqui tenho dentro do meu header a imagem e logo depois do meu header eu quero também o quê esse

input group coloquei aqui e olha só apareceu logo abaixo do meu logo só que pô logo abaixo do meu logo é eu não queria que ele fosse assim né Eu queria que tivesse um do lado do outro aqui eu vou mas aqui Você tá vendo que ele tá tentando ocupar um espaço grande Que não é não era necessário eu vou fazer o seguinte a gente já viu que quando display é Flex padrão Tenta colocar os elementos na mesma linha vamos fazer o seguinte vamos transformar o nosso header em um display Flex E para isso basta

eu vir aqui nas classes do meu page header e colocar aqui ó display Flex deflex né deflex ó já apareceu aqui então aqui tá uma caixinha igora de texto e aí por fim o que que eu queria também eu queria um botão certo eu Queria um botão aqui que eu vou clicar lá depois ele vai abrir a minha playlist vamos vir aqui e pesquisar Button tem examples aí tem aqui ó vários botões aqui do jeito que você do jeito que você quiser do jeito que você quiser e aí basta você pegar o código do botão

correspondente aqui eu quero pegar esse botão aqui que eu acho mais bonitinho mas is que escolho estética minha você pode pegar o que você quiser o que fizessem otido para você eu vou pegar Esse aqui ó esse aqui o verde aqui o que você passa o cursor em cima e ele fica com verde preenchido eu acho ele bem legal você tá vendo aqui que é o que tá escrito success dentro então eu já sei que o código é esse aqui ó porque esse aqui é o que tem o código escrito success aqui você já tá

até vendo que tem uma nova tag aqui em jogo que é a tag Button é a tag Button faz sentido né Eu tô querendo botar um botão vamos lá dentro ainda do header Não é dentro ainda do header mas fora do fora dessa div aqui dessa div interna porque essa div interna Foi a que eu copiei para pegar esse conjunto aqui de informações da esse conjunto aqui de da da minha caixa de texto Então vou botar aqui fora beleza apareceu um botão aqui sucess olha bem ou mal eu já tenho um pouco da minha estrutura

aqui beleza eu já tenho um pouco da minha estrutura agora vamos refinar essa estrutura Primeiro de tudo eu quero esse aroba Aqui eu não quero ele não faz o menor sentido para mim esse ara tá sendo definido aqui ó com essa tag mais uma vez é aquilo que eu comentei a tag ela vai ser ter como consequência um elemento correspondente ali na sua página apaguei essa tag porque eu não queria esse ar aqui então tá bom apaguei ficou só a caixa de texto ela essa caixa de texto ela tem o que a gente chama de

placeholder o que que é placeholder quando eu não escrevi Nada aqui dentro dessa caixa de texto ela tá parecendo Um textinho padrão aqui username mas eu não quero que que é nome do usuário né mas eu não quero que tenha esse texto padrão porque eu não vou usar essa caixa calidade eu vou usar assim nome da música não é isso eu vou usar para pesquisar aqui o nome da música ou assim o nome da música o nome da banda então eu vou pegar aqui ó você tá vendo input que é essa tag responsável por essa

caixa de texto aqui eu vou Pegar aqui esse placeholder que tá aqui username eu vou apagar ele e vou botar quero essa música beleza quero essa música por quê porque aí vou indicar pro meu usuário que quando ele quiser uma música específica ele vai clicar nessa caixa que tá escrito quero essa música e vai pesquisar o nome da música ou sei lá o nome da banda sei lá queer essa música da banda OAS E aí vai pesquisar Beleza você talvez não você Talvez já tenha lembrado que não só o nome da não só tinha a

caixinha de texto mas logo em seguida tinha um botão de pesquisa aqui E esse botão de pesquisa eu vou colocar também porque que não tem para isso eu vou simplesmente copiar essa tag de botão aqui padrão que eu peguei lá do Bootstrap icon e vou colocar de novo mas onde eu vou colocar bom essa botão de esse botão de pesquisa ele faz parte do conjunto ali de busca então se eu tenho essa div aqui que tá Englobando todo o meu conjunto de busca eu vou colocar dentro dessa div ou seja pensando mais uma vez na

div como retângulo Isso aqui vai ser o esse retângulo é o retângulo das informações de busca então o botão de busca também vai tá aqui dentro E no momento que eu coloquei olha só ele já at conectou aqui direitinho Beleza então eu vou só mudar o conteúdo mudar o nome desse botões né mudar o que que tá escrito nesses botões aqui o primeiro tem que virar buscar e o Segundo tem que virar playlist Beleza então tá bom olha eu já tenho aqui um header e esse header já tá um pouquinho mais com a cara que

eu gostaria mas é alg umas coisas que eu gostaria de mudar aqui né primeira delas é pô eu não gosto dessas coisas aqui super coladas nas bordas lembra aquilo que eu falei um critério pra gente também vai ser sempre de Espaçamento aqui por exemplo isso aqui não faz o menor sentido para mim é isso aqui essa caixa de texto não tá alinhada com os outros elementos ela tá colada assim no topo desse no topo do header isso aqui eu acho esquisito e esse botão playlist aqui também né ele tá maior do que esse botão aqui

por qu vamos lá o meu header ele já é um diss play flex não é e a o Flex dele e o Flex dele é de linha certo ele define os elementos numa linha O que significa que a dimensão Principal dele é horizontal e a dimensão secundária dele é a vertical quando eu quero organizar elementos na dimensão principal que aqui no caso é horizontal né ess esse retângulo Tá organizando os elementos na horizontal eu vou usar a propriedade justify com content eu vou usar a informação justify content E se eu quiser organizar na vertical eu

quero eu vou usar a propriedade align item beleza aqui ó eu vou pesquisar aqui no Bootstrap Justify content Aline item E aí aqui fica uma pergunta você acha que primeiro eu quero organizar esses elementos na horizontal ou na vertical eu quero organizar na vertical beleza por qu porque eu quero que eles estejam aqui ó na vertical eu quero que eles estejam centralizados aqui eu quero que eles estejam todo no meio aqui do do do retângulo beleza eu quero que trazer eles aqui eu quero gerenciar eles verticalmente E para isso como eu disse Já que a

vertical já que a coluna é a dimensão secundária eu vou usar a propriedade da dimensão secundária que é essa Aline items aqui ó Flex align items pesquisei aqui que que o Bootstrap me entrega disso align items ele tem aqui várias opções ó align items ele tem aqui se eu quiser lá no topo da div no lá na parte de baixo da div no meio da div no meio da div é o que eu quero tá aqui ó ele me deu aqui essa a terceira opção basta ter A classe align items Center Tá bom então vamos

fazer isso aqui já que a minha o meu header agora é um display Flex eu posso botar essa classe Aline item Center que é uma classe que só existe para display Flex coloquei aqui ajeitou beleza pô mas isso aqui ainda ó centralizou o botão centralizou aqui o # Music mas isso aqui ainda tá colado lá em cima e por que que ele tá colado bom isso aqui você vai ver se você dar uma olhada na própria div desse elemento Aqui a div desse a div dessa a div que tá responsável pelos elementos da busca ela

veio com essa classe aqui ó mb3 que que significa MB MB significa Margin margem né em inglês Margin Bottom ou seja na parte de baixo e aí três ele tem uma gradação de zero até 5 então se eu eu poderia aumentar a margem aqui aumentando esse número aqui para quatro por exemplo ou eu poderia botar isso aqui para zero e tirar a margem dele e no momento que eu tirei a margem dele Repara ele ficou Centralizado junto dos outros tá bom ou assim para botar a classe com margem zero é só eu não colocar classe

que não vai ter margem nenhuma se adicionada beleza isso aqui já tá controlado Ah uma outra coisa que eu quero que aconteça repara essa esse input aqui ele tá ocupando Todo o espaço que tem disponível de novo ele tá fazendo tipo aquele Flex grow lá que eu tinha comentado com vocês só que ele tem t ocupando Todo o espaço horizontal que Eu tenho aqui né ele tá fazendo tipo aquele Flex grow lá que eu tenho para vocês que eu comentei com vocês só que eu não quero que ele eu não quero que ele faça isso

eu quero que ele tenha um tamanho delimitado eu não quero que ele seja assim enorme esse campo de texto aqui beleza como é que eu vou fazer isso bom essa classe essa div aqui essa div é responsável por isso ela não tem essa classe Flex grow para eu tirar lá e desabilitar essa opção eu vou Simplesmente fazer o seguinte mais uma vez eu tô controlando o tamanho então eu vou colocar aqui ó Style eu vou colocar aqui Max withd Max width significa largura máxima Max é Max de máximo e with é de largura with é

essa palavra esquisita esquisita de pronunciar e que significa largura e eu vou botar aqui que é 30% de todo o espaço disponível beleza salvei aqui 30% bôa beleza bacana mas agora se você for ver então os elementos estão colocados Aqui um logo em seguida do outro eu quero espaçar eles Lembra que eu falei que no display Flex você vai organizar os elementos na vertical ou na verdade na na dimensão secundária com a propriedade align items e na dimensão principal com a propriedade justify content aqui a dimensão principal é a linha que é justamente onde eu

quero alinhar onde eu quero ajeitar né Eu quero que esses caras estejam melhor distribuídos aqui nessa linha né Na Horizontal então eu vou botar uma jfy content que me satisfaça eu vou pesquisar aqui no Bootstrap ó J content é nessa página aqui mesmo por isso que ele nem me redirecionou para outra coisa jy content eu tenho isso aqui ó é isso aqui que eu tenho nesse momento eu quero isso aqui não eu quero isso aqui ele vai centralizar mas ainda vai est todo mundo junto no centro eu não quero que fique todo mundo junto no

centro eu quero esse aqui esse aqui para mim tá Ótimo esse penúltimo na verdade não eu quero esse aqui ó eu quero esse aqui eu quero que os elementos das extremidades fiqu colado e eu quero que o elemento do Meio fique Centralizado é essa aqui ó between essa quarta opção tá vendo que ela tem aqui ó a classe justify content between é isso que eu vou colocar aqui justify content between eu vou botar aqui eu tô dizendo que o meu header vai Alinhar os vai ajeitar os elementos dentro de dentro dele na dimensão principal dele

que é uma horizontal de forma a ESP passar eles assim né que o primeiro esteja colado na extremidade esquerda o segundo esteja colado na extremidade direita e o do meio fica ali no meio Beleza já tá próximo do que eu gostaria por fim repara S uma coisa eu ainda quero que ele fique que esses todos esses elementos fiquem longe das bordas aqui ó borda esquerda tá muito Colado na esquerda aqui tá muito colado da direita eu vou adicionar uma margem exatamente como a gente tava comendo aqui para isso eu vou pesquisar aqui no Bootstrap Margin

E aí tá aqui ó espaçamento que lembra era um dos critérios que a gente usar para criar nossa interface Margin E aí aqui espaçamento Margin and pading Não se preocupa com pad a gente vai usar Margin então Margin aqui ó como é que você usa basicamente Ele tá te Dizendo o seguinte ó m para classes que definem margem tá bom m e o que mais você vai botar m a gente já viu que MB era uma das opções e é justamente isso né para Margin Bottom T pra margem top ou seja se você quiser colocar

uma margem acima do elemento você vai colocar MT ao invés de Mb você vai ter MS por exemplo por quê Porque ele não é construído inicialmente da esquerda pra direita você tá vendo aqui né Ele é lido da esquerda pra direita então s é de Start start que é do inglês significa início então aqui ó dá para botar uma margem no início do retângulo ou seja a esquerda do retângulo e também da mesma forma se esse é o início à esquerda o fim é a direita então aqui no fim end em inglês né é end

eu posso colocar margem também então tem MT MB MS e me Essas são as minhas opções mas muitas vezes eu quero botar margens simétricas né assim ó na horizontal eu quero que ele tenha margem tanto pra esquerda quanto pra Direita ou tanto para cima quanto para para baixo a gente vai colocar Então pode colocar mx x para horizontal e y para vertical MX e m Beleza eu vou fazer isso eu vou pegar esse # music aqui por exemplo que aqui ó tá aqui imagem eu vou pegar essa tag de imagem Vou botar aqui ó Class

igual a eu vou botar primeiro uma margem horizontal né MX eu vou botar aqui 2 Lembrando que esse é um número que vai de 1 a 5 2 de 0 a 5 n verdade né aqui ó tá escrito aqui de 0 a 5 Beleza x eu botei do Beleza já já descolou daqui da mesma forma eu quero até fazer isso com esse botão aqui também então deixa eu fazer isso aqui ó o botão aqui eu vou vir aqui nas classes desse botão e vou adicionar mx2 ele já descolou aqui também perfeito eu quero que ele

descol também da dos limites aqui do heer né então eu vou dar uma margem para ele aqui ó M2 Eu botei aqui M Y2 E no momento que eu coloquei m2 o que que ela fez ela expandiu o expandiu o header Para que houvesse essa margem que eu queria né porque já que eu fixei o tamanho da imagem e eu disse que a imagem tem que ter uma margem pro header a minha única coisa que não tava a única coisa que não tava fixa era o tamanho do header então o tamanho do heer expandiu para

contemplar essa margem que eu falei que essa imagem teria e beleza com isso aqui Eu resolvi isso tudo aqui o meu header ele já já tá bonitinho ele já tá bonitinho só que tem um detalhe e é um detalhe interessante é uma coisinha rápida mas é super bacana eu naquela interface que eu mostrei PR vocês na introdução do vídeo eu tinha ícones aqui ao invés de texto e achava os ícones super legais era uma coisa assim simples fácil de usar mas que é super bacana dá uma valorizada no projeto eu vou colocar eles para isso

eu vou pesquisar aqui no Google de novo boot Trap só que dessa vez bootp icons bootp icons E aí o que que significa fica da mesma forma que a galera do bootp disponibilizou pra gente um bando de recursos já eles pegaram depois e fizeram um design de vários ícones e disponibilizaram pra gente a gente pode incorporar esses ícones essa biblioteca de ícones no nosso projeto também a gente vai ver simplesmente aqui no final da página de novo em CDN e vai copiar Isso aqui vai copiar esse link Essa tag link aqui ó tá vendo e

vai colocar ela aqui no final do de novo coloquei isso é outra tag por a primeira era responsável por trazer para mim os recursos disponíveis na biblioteca Bootstrap padrão agora eu tô trazendo os recursos disponíveis na biblioteca Bootstrap icons ou seja os ícones prontos que existem nessa nessa biblioteca Bootstrap icons que por acaso foi feito pela galera do Bootstrap também beleza os caras são bravo com Isso você tem acesso aos ícones que eles fizeram aqui você pode utilizar então você vê aqui tem vários ícones legais aqui porque ícones até meio nada a ver eu acho

que eu passei por um Playstation aqui aqui ó Playstation tem bastante coisa tem realmente bastante coisa aqui ó Nintendo Switch aqui um chapéu de graduação Microsoft e você vai descobrir quanta coisa tem pesquisando isso aqui né clicando função dessa função dessa lista eu tô procurando coisas um Pouquinho mais específicas eu tô procurando a uma lupinha para colocar ali no meu botão de busca e essa lupinha geralmente ela é isso né ela é um uma um ícone associado a busca então eu vou escrever aqui inglês busca E já apareceu aqui para mim ó lupinha perfeito cliquei

aqui para você usar você vai diminuir aqui ó icon fonte nesse ponto aqui você vai clicar e vai copiar essa tag aqui i i de ícone né Beleza você vai pegar essa tag E aí o Que que eu quero fazer eu quero tip tirar esse texto buscar e eu quero que esse botão tem um Icone Zinho de uma lupa eu peguei aquela tag Vou colocar aqui ao invés do texto buscar eu vou colocar essa tag de ícone aqui que define essa busca ó que beleza ó Que bacana aqui eu quero fazer uma coisinha um pouco

diferente aqui eu ainda quero que tenha o texto playlist mas eu quero que seja seguido por um Icone Zinho que me sugira isso Sacou Então vou pesquisar aqui ó music que é música né música em inglês e olha esse l esse item aqui tá maravilhoso para mim music note list ou seja nota musical e lista isso aqui pô se isso aqui não dis playlist eu não sei o que que diz né Vamos lá pega esse código aqui eu vou pegar e vou colocar aqui ó playlist espaço e o código do ícone salvei pô ficou bem

legal vai então tá aqui beleza a princípio a gente terminou o nosso header não a funcionalidade Deles mas assim na construção da interface tranquilo combinado eu vou dar uma segurada agora nesse rodapé porque o rodapé pra gente ele não vai ter ele não vai ter utilidade nesse momento e aí para isso eu vou iluminar essa linha aqui no visual cod a linha da dívida do rodapé e vou pesquisar e vou apertar contrl KC beleza cont contrl KC control KC torna essa linha um comentário o que que é um comentário o comentário é uma Linha que

o o programa que tá lendo esse esse código aqui no caso o navegador que tá lendo o HTML montando a página vai ignorar ele essa linha aqui vai passar a ser ignorada pelo navegador porque ela agora é um comentário tá bom cont control KC faz isso e se você quiser tirar esse comentário é só clicar aqui na linha botar o cursor nessa linha e apertar control pressiona control aperta k depois u salvei aqui ó apareceu aqui de novo o rodapé então mais uma vez Contrl KC comentei control k o descente cont aqui porque eu quero

deixar comentado beleza vamos focar aqui no corpo da minha no corpo aqui da minha interface no corpo da minha interface eu quero lembra que eu tinha cards aqui uns cartõezinhos assim com a música com o a capa do disco com as informações da música e ali um botãozinho de adicionar playlist beleza Primeiro de tudo eu vou pesquisar aqui no Card porque era isso eu tava estruturando assim como todo um Conjunto de cards beleza aqui ó C tá aqui você vê que é bem uma coisa nessa nessa pegada aqui aí eu vou te fazer uma pequena

provocação que é seguinte você poderia colocar aqui pô sei lá seis cards né eu tinha acho eu acho que eu tinha seis músicas no HTML mas isso aqui vai deixar Marret Isso aqui vai deixar Marret eu não quero que fique marrado eu quero que fique uma coisa dinâmica e ó quando eu tô falando De projeto web e eu tô falando que eu quero que uma coisa Seja dinâmica o que você tem que escutar é eu quero que o JavaScript cuide disso porque o JavaScript dá dinamismo ali pra página Isso é se eu cadastrar uma nova

música eu Eu não quero ter o trabalho de ter que colocar o Card dela aqui também no HTML eu quero que o JavaScript pegue saiba que pô tem uma nova música cadastrada e eu vou lá e coloco e vai lá e atualiza a minha interface com essa Música também sacou beleza só para você saber que o que eu vou fazer aqui agora é temporário isso aqui não vai ser a versão final mas é só pra gente poder ter uma visualização de como tá ficando a nossa interface depois eu vou tirar isso da interface porque quem

vai colocar isso na interface de novo vai ser o JavaScript beleza tá só para dizer que esse código desse Card que é isso aqui ó vim aqui o Card eu vou pegar o código e vou copiar ele ele não Vai ficar no HTML Apesar de eu colocar ele agora apesar de colocar ele dentro do HTML agora ele não vai ficar dentro do HTML ele vai ser colocado depois pelo JavaScript de forma dinâmica de acordo com as músicas que estão cadastradas beleza mas já que eu tô querendo que isso aqui seja já que eu tô querendo

que isso eu tô querendo visualizar como é que tá ficando isso aqui eu vou colocar aqui alguns cards tá bom aí coloquei aqui primeiro de tudo Lembra que eu te Falei que eu quero ter no meu projeto as imagens eu quero ter eu tenho que ter no meu projeto as imagens que eu vou utilizar Isso inclui as capas dos discos que eu vou utilizar para isso bom eu também já separei aqui ó eu vou pegar essa pasta aqui covers covers que são capas né capas de disco ã nessas covers eu tenho aqui as capas dos

discos e que cujas músicas eu vou cadastrar Tá bom então botei aqui e aí você vai pegar lá as capas dos seus Discos você eu aqui tenho uma estrutura de PES seg seguinte eu tenho imagens e dentro de imagens eu tenho images eu tenho dentro de images uma subpasta covers e dessa dessa subpasta eu tenho todas as capas de disco que eu vou utilizar Beleza então vamos lá mais uma vez repara aqui aliás é um grande exemplo daquilo que eu tava comentando ele tentou botar uma imagem aqui só que não conseguiu E aí ele mostrou

Um textinho Só que o textinho dele são três pontos por que isso se você dar uma olhada essa o código lá que eu copiei aí da do card ele tem isso aqui mesmo imagem aí tem aqui source três pontos ou seja não tem um caminho definido ali pra imagem ele não sabe da onde pegar então ele quebrou e aí o o alt tá aqui ó três pontos também se ao invés de tivesse se ao invés de se eu tivesse colocado Disk ah na verdade eu quero só colocar cover eu quero colocar em português isso Capa

do disco tá aqui esse aqui eu quero colocar em português capa do disco Então já apareceu aqui para mim o texto alternativo não consigu abrir a imagem aparece aqui texto alternativo é aquilo que eu tava comentando aqui da do atributo Alt beleza mas deixa eu botar aqui uma imagem só pra gente eu tô querendo aqui visualizar como é que tá ficando o Card images Lembrando aqui que esse caminho é barra né barra porque diretório o Diretório base do nosso projeto parte da base do nosso projeto images covers aqui no meu caso e aí eu vou

botar aqui am. webp essa imagem que eu quero que exiba e apareceu aqui beleza não é isso aqui tá legal só que eu quero fazer algumas coisas aqui com essa eu quero fazer algumas coisas aqui com esse Card primeiro eu quero que esse botão esteja Centralizado eu vou fazer o seguinte eu vou transformar o Card que você tá vendo aqui tem Uma tem uma div aqui que delimita ele a div tem até essa classe Card tá vendo eu quero que ela seja um display Flex Então vou colocar aqui ó deflex Tá bom display Flex beleza

na verdade eu vou até apaguei isso aqui você tá vendo ele tirou tudo eu vou botar de Flex eu vou botar aqui Flex eu vou botar aqui FX Aliás na verdade deixa eu fazer o seguinte deixa voltar com a classe Card Porque a classe Card era o responsável por definir esse fundo branco aqui que era o que eu queria usar beleza Tá eu eu beleza Def Flex Flex colum Ou seja eu transformei isso aqui no display Flex que organiza isso aqui em colunas a direção principal aqui desse display Flex aqui desse retângulo aqui que é

Flex é coluna ou seja empilhou imagem depois o título depois o texto depois o botão a dimensão principal é coluna a dimensão secundária é linha dimensão Secundária horizontal eu quero alinhar eles o quê aqui na aqui na vertical ou aqui na horizontal eu quero na horizontal né eu quero centralizando na horizontal então eu vou usar essa propriedade aqui Aline items Center porque a horizontal é a dimensão secundária aqui pessoal repara uma coisa eu botei esse align item Center mas ele não alinhou esse botão e por que que ele não alinhou esse botão a verdade a

resposta é curiosa é porque esse botão Aqui ó ele tá nessa tag a aqui que eu quero na verdade eu vou mudar ela eu vou ao invés de ser uma tag a eu quero que ela seja uma tag Button tá bom vai ser uma tag Button eu vou apagar esse href eu vou apagar esse href eu vou apagar eu vou essa tag tem que abrir e fechar com o mesmo nome né então se ela começou Button ela tem que terminar Button eu não quero que esse botão tenha essa estética aqui azul eu Quero que tenha

essa mesma estética aqui verde que eu escolhi essa estética verde se a gente for lá no noss dos nossos botões a gente pode ver que ele tem a classe btn outline success é isso aqui que eu quero eu vou colocar ele aqui então coloquei o botão ficou com a estética que a gente queria beleza mas por que que ele não tá Centralizado aqui na aqui na horizontal como eu queria é simples o AD o a div do cartão Ela tem os seguintes filhos a capa do Disc que é Essa imagem aqui ela tem o corpo

do cartão e pronto esse são os dois filhos Então quem ela tá organizando quem ela tá organizando são esses dois quem tá organizando onde o botão tá é o corpo do cartão Card bar aqui cardb ou seja o botão tá dentro do card bar então se eu quiser que o botão esteja Centralizado eu tenho que dar o bar a capacidade dele de gerenciar o filho dele sacou ó o conteúdo que tá dentro dele é isso então eu também vou pegar esse cardb ele Também vai virar um display display Flex virou um display Flex olha o

que aconteceu as coisas ficaram em linha né ou ficaram em linha que era o comportamento que a gente esperava a gente não quer a gente quer que ele seja coluna Flex colum e no Flex colum bom tá aqui e na verdade o botão já ficou Centralizado ele ficou Centralizado como maior mas para mim tá bom isso aqui beleza aqui ao invés de card title eu vou botar aqui só para ficar ilustrativo Nome da música aí aqui Você tá vendo que tem essa tag P aqui p de paragraph né de parágrafo ela vai ela é uma

tzin de texto né que ele tá usando aqui para botar esse textinho aqui eu quero ter duas dessas tag dessa tag aqui eu quero ter duas dessa tag aqui então vou copiar e colar ela apaguei uma delas eu vou colocar aqui nome do Artista na verdade nome do álbum aqui e por fim eu vou colocar aqui ó nome do artista Tá bom então tá aqui ó eu criei aqui o meu eu criei aqui o meu o meu card de música ele vai ter essa cara aqui aí só aqui um comentário não sei se você viu

mas o a tag de parágrafo ela por padrão eu já coloco um espacinho aqui nela por isso que existe esse espaço a div por exemplo que eu também posso usar para colocar Texto ela não colocava nenhum nenhum tamanho nenhum espaçamento já e não tinha nenhum nenhum espaçamento já carregado nela mas aqui a tag de texto tem beleza isso aqui não me atrapalha não mas tem uma coisa aqui eu não quero se você se você for ver esse cartão subiu um pouco ele cresceu um pouco de tamanho e ele cresceu por quê Porque eu não defini

nada sobre o tamanho dele o conteúdo aqui ficou maior Por que ficou maior porque agora ele tinha um Espaçamento aqui sendo incorporado da justamente da tag P que traz esse espaçamento aqui ent e traz esse espaçamento intrínseco a ela beleza o cartão expandiu Só que eu não quero que o cartão fique Fica expandindo não eu quero o cartão tenha um tamanho fixo então eu vou vir aqui se você for ver o pessoal do bot trp já teve essa iniciativa só que eles definiram só uma largura fixa é com essa unidade aqui 18r da mesma forma

eu vou botar aqui ó Ponto e vírgula no Style tem que ser ponto e vírgula se você quiser botar mais de uma informação se o o se a largura vai ser 18 RM a altura eu vou testar com 40 RM beleza 40 ficou grande você tá vendo aqui talvez 30 30 tá bom 30 tá bom gostei então isso aqui esse vai ser o meu cartão beleza e aí o que que eu vou querer fazer eu vou querer ter vários desses cartões e eu quero que cada um uma música Diferente concorda vamos lá ó isso aqui

seria o mesmo que eu copiar aqui essa divona grande aqui que é o responsável pelo cartão e botar aqui ó botei um segundo Epa mas ele tá tipo botando um em cima do outro botei um terceiro Epa tá botando um em cima do outro pô Não é assim não quero que seja assim então como é que a gente vai fazer tem que ver o cara que é responsável pelo cartão esse aqui ó esse peix bar aqui que é o Cara que tem todos os cartões dentro dele ele eu vou colocar ele então como display Flex

display Flex eu vou botar ele como Flex Row pessoal na verdade eu cometi um pequeno erro aqui que foi o seguinte quando eu fui copiar o cartão e reproduzir ele várias vezes eu acabei copiando junto a div que englobava o cartão que era o page bar tanto que Agora a gente tem várias div page bar aqui tá vendo ID page bar ID page bar a gente já sabe que isso aqui tá errado porque aquilo que eu falei né o PB Ele só pode o a o ID ele vai acontecer só uma vez Então deixa eu

tirar esse copiar aqui porque o que eu quero copiar não é o a div que engloba todos os cartões de música eu quero copiar só o cartão de música eu quero que o cartão de música aconteça várias vezes é esse aqui ó isto Aqui tá é esse aqui até aqui é isso aqui até aqui parece ser né Beleza ó tá tá tá certo eu não copiei nada de errado Não é isso aí e aí el continua empilhando como que eu vou resolver vamos vir aqui e vamos colocar isso aqui como display Flex O que é

o responsável por pegar todos eles beleza ó como dis Flex já Tent padrão colocar eles na mesma linha Olha que legal eu tené eles aquio Sora deixa eu colar um mais para Você já ver o seguinte Ah aqui ó para botar um cartão a mais eu vou só copiar isso aqui e vou colar mais uma vez agora o cartão você tá vendo ele tá diminuindo de tamanho aqui para caber na página pô isso aqui eu não quero que aconteça não eu não quero que ele fique que ele vá mudando o tamanho dele para se adequar

isso aí assim não é bem a minha intenção qual era a minha intenção é simples se não tiver tamanho aqui se não tiver tamanho nesse display aqui Para eu colocar nesse display para eu colocar os todos os cartões que eu tenho coloca na linha de baixo vai tipo vai ir colocando ele linha por linha até preencheu a linha bota a linha de baixo então é exatamente o que a gente vai fazer e como é que a gente faz isso é simples o display Flex ele tem um comportamento que descreve exatamente isso que é o Flex

wrapper Flex wrapper é isso é envolver os elementos rap é isso aí do inglês envolver E aí comess seu Comportamento Flex que viaria com eles dessa forma aqui page bu que já é o display Flex né que a gente colocou aqui e a gente vai botar Flex Wap tá aqui olha que legal agora eu tenho eles sendo colocados um em cima do outro e aí mais uma vez pô se eu ficar adicionando o cartão aqui Não importa quantas músicas eu tiver para adicionar ele vai ficar colocando na mesma linha enquanto tiver espaço não tem espaço

Bota na linha de baixo que já é um comportamento muito mais legal sacou beleza isso aqui é bem legal deixa eu tirar aqui eu não quero botar tanto cartão assim só porque acho que já tá ficando muito confuso tá destruindo um pouco o meu propósito vou deixar quatro aqui Opa verdade vou deixar esses cinco aqui beleza vou deixar esse CCO E aí aqui eu vou fazer o seguinte bom aqui repara eu eu quero que esses elementos sejam mais Centralizados eu quero que esses elementos estejam mais centralizados tranquilo para isso mais uma vez esse display esse

display aqui é Flex e a direção principal dele é linha ele pode até colocar os caras na linha de baixo Mas é porque acabou o espaço nessa linha ainda é a linha direção principal eu quero alinhar ele Justamente eu quero ajeitar ele justamente em relação à posição deles na linha né Eu quero Putz que eles não Fiquem um e que eles não fiquem um colado no outro todos no início então é dimensão principal dimensão principal eu quero posicionar eles lá é aquele justify content mais uma vez aqui justify content aqui ó justify content Eu tenho

esse comportamento aqui atualmente e eu quero alguma coisa próxima desse aqui ó que é esse justify content around Então esse é o comportamento que eu vou descrever aqui paraos meus cards tá bom Justify content around vamos lá lá justify round Cadê tá aqui ó display flat flx colum Não esse aqui é o meu Body eu quero o aqui page Body perfeito aqui tá nesse contto aqui J round aqui hum é verdade eu acho que ele ficou eu acho que ele ficou muito Espado meu gosto não é bem o eu queria fazer não eu vou fazer

o seguinte eu vou centralizar Todos esses elementos Beleza eu vou centralizar todos esses elementos só que eu vou fazer o seguinte eu vou eu vou centralizar todos esses elementos e vou usar uma propriedade interessante chamada gap gap é vão GAP é vão E aí eu tenho essa classe aqui que o botra me colocou se você pesquisar aqui por GAP você vai achar a classe que me diz assim vão entre os elementos eu quero colocar sal lá E aí mais uma vez De zero a c BP é toda padronizado em relação a esses tamanhos Vou colocar

aqui dois pronto aí deu uma espaçada legal então galera com isso aqui a gente Putz já tem uma interface aqui muito próxima do que a gente estava esperando o que eu acho muito legal tem só um pequeno ajuste que eu quero fazer nesse momento que é o seguinte eu quero que esse head esteja sempre presente e quando eu tô scroll aqui ele tá sumindo então o que que eu posso fazer Ó eu quero que ele esteja sempre na posição ali no topo né position top aí ele tá me dando aqui ó position top ele tem

duas opções Fix top Stick top eu vou clicar aqui no fake toop para ver o que que é e ele tá me dizendo aqui ó posicione um elemento no topo de uma viewport né de uma janela de lado a lado né from Ed to Ed be sure You Understand The ramifications of the Fix position in Project ou seja tenha certeza que você Entende as ramificações da posição de usar a posição fixada no seu projeto você talvez tenha que adicionar CSS adicional você puts isso aqui ele parece tá me dando muitos avisos né uma coisa meio

esquisita acho que eu vou partir pra solução de baixo aqui ó a solução de baixo no caso essa aqui é Fix de borom né o mesmo comportamento mas se eu quisesse fixar lá embaixo e esse aqui é Stick top Stick top position and Element at the Top of the viewport from to Ed But only After scroll P it o que que isso está dizendo coloc coloca um elemento lá no topo da vi o PTE de lado a lado mas só depois que você scrollar PR além dele é exatamente o que eu quero porque aqui ó

quando eu começo aqui no topo da página ele tá aqui quando eu scollo ele sai eu quero que ele não saia quando eu scrollar então eu vou botar esse Stick top aqui vou botar esse Stick top aqui no meu header aqui ó header cadê Aqui page Header tá aqui page header tá aqui eu vou tá a classe Stick top olha o que aconteceu Legal né ela se mantém aqui os elementos scroll por debaixo dela isso acho aqui muito legal beleza com isso aqui eu consegui resolver esse problema agora a gente até tem mais coisas para

fazer aqui no HTML mas eu quero já adicionar uma inteligência aqui a essa página até porque eu falei para você o seguinte eu Falei para você que isso aqui eu tava botando os Card já agora porque eu quero ar como é que eles estão se posicionando aqui em relação ao ao nosso display mas ele quem vai colocar ele de fato vai ser o JavaScript Então na hora da gente escrever o nosso JavaScript né então agora a gente vai criar o nosso JavaScript aqui beleza para isso eu vou clicar aqui nesse New file E aí nesse

New file eu vou colocar script.js que é o nome padrão paraum Arquivo de JavaScript aqui você poderia ter colocado outro nome mais uma vez você poderia ter colocado qualquer nome aqui que fizesse sentido para você desde que você use esse arquivo de forma coerente ou seja chamou isso aqui de banana PJS você precisa incorporar o arquivo banana PJS é isso assim tem que ser tem que tá condizente mas tá bom botei aqui meu script.js beleza vou começar escrever aqui o meu código JavaScript E aí primeiro de tudo Eu vou estab aqui com vocês o conceito

de variável que que é uma variável no JavaScript Pensa numa caixinha caixinha é essa que eu quero guardar informação e essa informação pode ser um número tá bom pode ser sei lá realmente um número aqui ó um número qualquer pode ser um texto e aí texto corrido aqui no JavaScript a gente costuma a gente representa com aspas pode ser aspas simples ou aspas duplas tanto faz mas Scrip a gente que quando quer representar texto tem que ser com texto tem que ser com aspas ou ou com crase mas aí a crase ela é para um

caso especial é para um tipo de texto especial e eu depois depois eu vou te explicar mas beleza eu podia est querendo guardar um texto corrido assim eu podia tá querendo guardar um um número eu podia tá querendo guardar toda uma gama de coisas ou até mesmo dados mais complexos e dados mais complexos o Que eu quero dizer a gente vai ver assim que tem estrutura aqui no JavaScript que são tipo uma carteira de identidade uma carteira de identidade sua que tem por exemplo seu nome seu CPF seu RG sua data de nascimento tem todo

um conjunto de dados num só documento não é da mesma forma a gente consegue estruturar dado no JavaScript dessa forma Independente se dados que a gente tá querendo guardar é simples ou composto ou complexo Esse aí que eu tô falando por exemplo o Documento de identidade de qualquer coisa você é um dado e a variável o que que ela faz ela cria essa caixinha na qual você armazena esse dado não só isso mas você bota uma etiqueta nessa caixinha com o nome ah sei lá vamos supor que são os meus dados eu vou botar o

nome da etiqueta Daniel e aí toda vez que eu quiser lidar com esses dados basta eu usar a variável através do nome dela que é essa nome que tá na etiqueta Daniel Sacou então o processo funciona da seguinte forma eu vou colocar aqui ó eu vou comear criando carteiras de identidade pras minhas músicas que é a minha forma de cadastrar essas músicas vai ser a minha forma de cadastrar essas músicas você já vai entender eu vou escrever aqui primeiro a minha primeira música Vai ser essa aqui ó do i w no Beleza do i é

isso aqui e aí aqui a gente só um detalhe você tá vendo aqui que era o Nome da minha música era essa do I Wan know E aí eu criei uma eu criei uma eu estou criando uma caixinha cuja etiqueta tem esse nome é um nome descritivo né já que eu vou guardar os dados dessa música aqui e aí começa como isso do I Wan know é mais uma palavra o que a gente costuma fazer é o seguinte quando tá nomeando uma variável nomeando uma dessas caixinhas a gente junta todas as palavras e bota as

iniciais de cada uma das palavras em maiúscula a exceção da Primeira Beleza então foi isso que eu fiz do i w know então isso aqui o que que ele tá fazendo ele tá criando a caixinha ele tá Tá criando a caixinha com Tá criando a caixinha com esse etiqueta aí eu boto um sinal de igual e aí depois eu vou colocar isso aqui essas chaves aqui abre e fecha Chaves beleza essa aqui esses abre e fecha Chaves ele é o sinal de que eu quero escrever esse dado assim esse dado com vários Campos que minha

carteira de identidade que Eu Mencionei beleza mas tem uma coisinha Só a mais quando eu tô criando a variável Eu também eu eu coloco a palavra const ou a palavra let dependendo do meu caso const ou let E quando é que eu vou usar cada uma delas simples aqui eu vou usar const e o que que significa const const significa que eu tô criando uma variável eu tô criando uma caixinha e eu tô falando eu não quero mexer no conteúdo dessa caixinha isso é eu não vou alterar o que tá aqui dentro saô eu não

vou Alterar o que tá aqui dentro então eu vou escrever aqui esse documento e aqui o código JavaScript você tá vendo eu vou quebrar ele em algumas linhas para ficar mais melhor escrito assim mais legível mas não importa isso aqui porque o código Tá Começando aqui e tá terminando no ponto e vírgula beleza aí aqui eu vou colocar os campos aqui com as informações que são pertinentes à minha música ó name botar aqui song name song name E aí Eu vou botar aqui dois pontos Esse vai ser o primeiro campo desse documento de identidade da

minha música Do I Wanna Know Beleza o segundo Campo vai ser Artist artista aí vai ser Arctic Monkeys Beleza o terceiro Campo vai ser a álbum eu vou botar aqui am am maiúsculo Esse é o nome desse álbum beleza por fim eu vou colocar algumas Informações que são relevantes aqui para mim a aqui vai ser ó Qual é o nome do arquivo que eu tenho aqui no meu projeto que tem a capa desse disco eu também vou colocar aqui dentro tá bom então eu vou colocar aqui ó ã cover capa né capa em inglês cover

file ou seja o nome do arquivo eu vou dizer que é am. webt beleza Esse é o o nome do arquivo desse arquivo aqui que tem a capa do disco Beleza então aqui eu criei meio Que um documento de identidade documento isso e eu tô chamando mais uma vez documento de identidade esse tipo de informação aqui que tá estruturado em vários Campos diferentes isso é um a gente chama isso de um objeto JavaScript beleza mas eu peguei aqui esse objeto JavaScript e tô guardando ele dentro dessa variável aqui do i w know Eu quero alterar

os dados dessa os dados dessa variável não então eu V colar aqui const beleza porque essa Variável não vai ter os dados alterados nunca esse igual aqui é o que a gente chama de operador de atribuição que que ele tá fazendo ele tá fazendo com que o que tá à direita dele ou seja esses dados sejam jogados no que tá à esquerda dele ou seja essa variável Então esse igual aqui ele pega e entrega sacou Ó você vai receber esses valores aqui e a partir de agora essa variável tá recebendo esses dados vamos lá da

mesma forma eu vou Criar aqui ó const ã The Less I know the better isso aqui é a minha outra música eu vou criar com o mesmo processo vou botar um ponto e vírgula aqui no final Para sinalizar aqui o término dessa instrução aqui porque o JavaScript ele tem instruções que são lidas pelo navegador de cima para baixo tá bom então assim Isso aqui é uma instrução só que termina aqui com esse ponto e vírgula beleza abri aqui as chaves e eu vou colocar ó os mesmos Campos né eu tô Criando um documento de um

documento de identidade da música também mas só que para uma música diferente então eu vou colocar os mesmos Campos e eu vou só alterar os campos aqui ó eu vou só apagar isso aqui beleza eu vou copiar isso aqui até já vou deixar isso aqui copiado porque esse aqui é o documento é o documento vazio padrão então eu vou só copiar ali paraas outras quatro músicas que eu vou escrever que eu vou escrever além dessa Aqui song name The Less I know the better beleza artista tem pala beleza álbum current currents e aqui cover file

é currents webp eu tô dando o nome aqui do o nome aqui da do da imagem o nome aqui do arquivo de imagem aí beleza Tá bom T criando aqui próximo con forever aí aqui ó eu já tinha copiado beleza forever é o nome da música nome Do artista ábum definit Maybe e aqui cover file vai ser cover file vai ser definit maybe p webp é esse é o nome que tá aqui ó é o nome desse arquivo aqui beleza agora eu tenho outras três músicas aqui que eu tinha colocado intencionalmente que eram músicas que

eu peguei lá da biblioteca de músicas gratuitas do YouTube E aí por causa Disso eu até Admito que eu não sei todos os os dados dessas músicas Não mas eh mas a gente mas a gente dá um jeito essa as You Então vamos lá Deixa eu aproveitar e já criar aqui as outras variáveis aí depois Eu preencho o Eu preencho os dados de forma adequada as You work aqui Boom Flick aí aqui const eu vou botar é qual é o nome do último música Hide esse aqui no caso tem que virar Isso aqui E esse

aqui no caso tem que virar isso aqui beleza então galera eu realmente eu pausei aqui para dar uma olhada no no nome dessas bandas para acertar aqui tudo certinho porque eu tinha pego essas aqui do YouTube mesmo e aí eu vou dizer aqui que essas bandas aqui em particular elas TM o o nome do disco é igual a o nome do artista Às vezes acontece mas nesse caso aqui vai ser exatamente o que eu vou dizer que aconteceu e aí bom o cover file vai ser Aqui 5 vai serp aqui o cover file vai ser

boomp aqui o cover file vai ser as webp o nome da música o nome da música Fli o nome da música aqui vai serde aqui eu vou te mostrar um negócio engraçado tá reparando aqui que bom no inglês a gente usa muitas vezes o apóstrofo como por exemplo aqui nesse caso n que é não po em inglês Não posso Ele tem um apof aqui só que eu tô usando esse apóstrofo essa aspa simples para eh eu tô usando essa aspa simples para descrever a min o meu texto então isso aqui ele tá entendendo como se

tivesse terminando o texto aqui e tá se embalan com esse resto como é que eu posso fazer a forma mais simples é eu pegar isso aqui e colocar em aspas duplas beleza porque eu posso colocar as aspas simples dentro da aspa eh eu posso colocar aspas simples dentro da aspa dupla E aí tá Dando certo Ele sabe que essa aqui não tá usando não tá sendo para abrir e fechar nenhum texto porque o texto aqui tá sendo aberto e fechado com aspas duplas é aquilo que eu falei que aspas simples ou duplas tanto faz e

no caso aqui a aspas duplas me permitir ISO fazer isso aqui de forma mais simples beleza Essas são as minhas músicas cadastradas Eu vou fazer uma coisinha aqui adicional e lá na frente ela vai se pagar eu vou adicionar um ID para essa Música um identificador para ela beleza então tem esse aqui ID zer aí aqui ó ider aqui vai um eu vou colocar um número de identificação dessa música tipo um CPF de fato imagina como já que eu tô fazendo aqui um documento de identidade PR música Deixa eu colocar aqui um número que identifique

essa música beleza isso vai se pagar lá na frente pronto salvei aqui T certinho Então agora eu tenho cinco dessas Variáveis beleza aí aqui eu vou fazer o seguinte ó const music Library music Library ou seja biblioteca de músicas vai ser igual Ou seja eu tô criando mais uma variável aqui só que aqui essa variável ela vai ser especial porque ela vai ser do tipo Array o que que é o Array o Array pensa nele se a variável é caixinha o Array é uma caixona ela é uma caixona Ela é uma Grande Caixa na qual

eu posso botar várias informações e é exatamente o que eu vou fazer eu vou ela é uma coleção saou ela é uma coleção aqui ó eu vou colocar aqui ó do i w know depois The Less I know the better Então você tá vendo aqui eu tô colocando cada uma das minhas variáveis dentro desse Array Quando eu falar de Array Pensa nessa caixona grande nessa coleção de variáveis de valores beleza better eu vou colocar aqui ó Live Forever vou colocar todas as minhas músicas aqui né tô cadastrando aqui a minha biblioteca de músicas Live Forever

aí aqui a próxima é as you a próxima Boom Flick e por último kde salvei aqui aqui ele Já ajeitou né colocou em várias linhas diferentes beleza Tá bom então eu tenho essa caixona aqui e aí como é que funciona isso bom o Array que é essa variável zona que vai ter uma coleção de informações ali dentro ele pode ser Acessado aqui ó music Library eu disse para você o seguinte se eu quisesse acessar o conteúdo dessa Se eu quisesse acessar os dados dessa música bastava eu fazer uma referência a esse nome aqui né que

é o nome da variável que é o nome da etiqueta que tá lá na caixinha aqui eu já que eu tenho uma caixa de uma caixa de caixinhas como é que eu vou fazer eu posso referenciar ela aqui ó o nome da Caixa music Library né biblioteca de músicas e aí qual das caixinhas de Dentro dessa caixona eu quero pegar simples ó eu quero pegar a primeira a segunda só que aqui tem um detalhe em particular a contagem começa do zero a contagem começa do zero então se eu ten que fazer isso aqui music Library

abre e fecha colchetes e aqui dentro zero ó zero pega essa primeira música Um Pega essa segunda música Dois pega essa terceira música Então aqui tem seis músicas Então beleza esse número aqui vai de zero a c ele vai até o tamanho Menos um porque começa no zero Tá bom então se eu botar aqui cinco ele vai pegar o último elemento Beleza então isso aqui é o Array o Array é essa grande variável assim que serve pra gente fazer uma coleção de dados e isso eu acabei cadastrando a minha bibl de música aqui dentro Beleza

agora um detalhe eu falei para você que o HTML e o CSS são lidos aqui pelo navegador né e o navegador lê eles e entende Qual é a página que vai Constuir a partir desse código que tá escrito aqui e como é que o JavaScript adiciona inteligência pra página o JavaScript consegue entender essa leitura consegue entender o que o navegador leu consegue entender o que o navegador leu e o que o navegador entendeu que ele tem que montar com base nisso e o JavaScript consegue influenciar isso aí pensa na seguinte na seguinte forma Ah imagina

que eu tô fazendo um bolo de laranja porque eu li Na receita eu decorei essa receita E aí agora eu tô fazendo bolo de laranja beleza aí um amigo meu que um belo dia tá me vendo fazer um bolo de laranja fala pô esse bolo de laranja é legal mas coloca um Moranguinho em cima coloca umas raspas de limão em cima que fica muito melhor e não tava na receita lá do livro mas eu olhei para ele e falei pô boa ideia vou tentar e eu coloquei e o resultado final o que que aconteceu o

resultado final passou a ser um bolo de Laranja com raspo de limão em cima ou comum Morão que fosse o que foi que ele me sugeriu e isso é diferente da Leitura original né é leitura original mais a sugestão do meu amigo o JavaScript faz isso ele faz as sugestões com o navegador coloca isso coloca aquilo tira isso tira aquilo Beleza então é isso aqui que o JavaScript tá fazendo e a gente vai usar essa estões para fazer aquilo que eu comentei por exemplo usar o JavaScript para ele mesmo escrever Esses cards ao invés da

gente escrever um por um lá no HTML sacou Então beleza aqui que que a gente vai fazer olha só eu consigo o JavaScript ele consegue olhar pro que o navegador entendeu ou pro que o navegador entendeu montando o lendo HTML o CSS e consegue fazer sugestões em cima disso como é que ela se manifestam bom elas se manifestam dessa forma aqui ó o JavaScript o navegador Ele vai construir um documento Um documento a partir do que ele entendeu do HTML do CSS e montou ali na interface e o JavaScript tem acesso a esse documento e

consegue fazer alterações nesse documento beleza e aí eu vou fazer exatamente isso basicamente o seguinte tá vendo aqui ó tá vendo aqui lembra aqui no nosso page bar a aqui ó no page bu que era essa div aqui que englobava todos os cards de música bom a gente tem essa div aqui eu posso fazer o JavaScript eu posso atavés Do JavaScript fazer o seguinte ó pegar esse cara aqui e falar ó Eu quero injetar cards de música aí dentro Mas quais B os que estão das músicas que estão castradas todas beleza é isso que a

gente vai fazer E aí como é que ele faz isso uma forma do JavaScript de fazer isso é o seguinte ó eu vou criar uma variável aqui const aqui page Body Beleza então aqui ó essa variável tem o nome page Body essa caixinha tem Etiqueta lá page Body aí o que que ela vai fazer document ou seja se o navegador lê o HTML o CSS e construi constrói um documento com o entendimento dele disso o o JavaScript Tá acessando esse documento e dentro da as opções que ele tem de manipulação desse documento ele vai fazer

o seguinte ó get elements by ID get elements by ID get elements by ID isso aqui é o seguinte eu estou acessando do documento a minha capacidade de recuperar um elemento em Particular a partir do id dele lembra aqui que o HTML a gente botou em algumas tags o ID aqui ó PB então eu consigo fazer o Java JavaScript pescar Quem é esse cara se eu informar qual é o ID dele sacou basicamente o JavaScript tá dizendo eu vou procurar no documento que esse mais uma vez documento é o que o navegador entendeu lendo HTML

CSS eu vou pesquisar no documento quem é o cara que tem esse ID aqui page bar e aí agora com isso aqui o javascrip tem uma referência Para esse page Bar ou seja tem uma referência para essa div que tem esse D eu tô é como se ele estivesse apontando Tá eu já tô de olho em você eu já tô de olho em você e se ele tem uma referência ele consegue então manipular isso aí daí ele consegue dizer Coloca aí card de música dentro desse cara aqui ó ah quais card de música pô os

card de música aqui das músicas que eu tenho cadastrado beleza tudo isso parte dessa capacidade do JavaScript de olhar esse documento Aqui e de fazer sugestões e de pegar referênci de lá e a gente vai tratar isso tudo então beleza eu tenho Essa eu tenho esse PEB aqui tranquilo Olha a gente já colocado vários cards aqui pra gente ver como é que ficava já essa interface com vários cards e já ia organizando ela certo beleza a gente já tinha feito isso só que eu te falei os cards eles não vão est registrados aqui no HTML

não vai ser o JavaScript que vai ser responsável por colocar tantos Quantos eu tiver músicas para para ter Card Beleza então o que que eu vou fazer deixa eu já apagar eu vou apagar toda essa leva aí de Car aí que eu botei aqui ó a exceção de um a exceção de um eu deixei um aqui e por que que eu deixei esse um aqui na verdade é porque esse código aqui ele é pronto o código de um card ou quase né Tá Marret isso aqui nome da música Não quero que apareça Isso eu quero

que apareça de fato o conteúdo mas o que que eu vou fazer aqui ó repare aqui e mais uma vez deixa só deixa eu só focar numa coisa aqui que é super importante que é o seguinte do documento o JavaScript foi executar uma ação recupere um elemento pelo id tá vendo aqui olha os termos que eu usei recupera um elemento é um comando aqui é uma ação Toda vez que você executar uma ação no JavaScript você vai ter aqui um Parênteses você vai ter esses parênteses aqui e dentro dos parênteses você vai passar qualquer informação

adicional que seja necessária pra execução dessa ação beleza aqui no caso era pô quero recuperar um elemento pelo id beleza Qual é esse elemento Ah qual é esse ID que você quer usar para achar o cara ah o ID é esse page bu Beleza e como era como eu o ID é um texto né eu passei em texto corrido aqui beleza Tá bom tá isso aqui é só para ficar ficar registrado Que a ação a a ação quando eu quiser executar ela eu vou colocar Geralmente os parênteses juntos para e para dentro dos parênteses informar

as informações que são necessárias para que essa ação seja executada beleza aqui ó function o que que é uma function isso aqui tudo são instruções certo são instruções ou seja aqui eu tô falando cria essa caixinha crie essa caixinha Cria essa caixinha beleza crie essa caixinha aqui eu tô falando e cria essa caixinha aqui page bar com a referência né Beleza a function vai ser um conjunto de código que eu vou deixar já pré-definido e que eu vou executar quando eu quiser pensa da seguinte forma se lembra quando você era pequeno e você assistia sei

lá aquele desenho do coiote e do Papa Léguas não sei se você lembra disso mas o Coiote ele tinha lá uma umas gavetas Chei de Planos Infalíveis ali de Como ele ia capturar o Papa Léguas ele tinha lá os planos já engavetados E aí ele pegar assim pô Hoje eu vou testar esse plano aqui pegava lá o plano olhava assim e a tinha lá passo um passo Dois Passo TR passo qu Beleza quando ele pega o plano Aí sim ele vai executar esse plano sacou quando ele pega o plano ele vai sim executar esse plano

aqui a gente tá fazendo a mesma coisa a function a gente tá definindo um plano A gente tá definindo um passo a passo que lá na Frente a gente pode executar quando a gente pode executar quando a gente quiser É sob demanda beleza e o o código aqui que eu vou executar é o load Library load Library load Library e aqui ó load Library é o nome da minha função que eu coloquei aqui que é significa do inglês carregue a biblioteca porque é justamente a função que vai vai lidar com esse comportamento aqui ó de

carregar a biblioteca aqui com as músicas que eu tenho cadastradas beleza Então carregar a biblioteca não é uma ação eu vou botar aqui esse eu tenho que botar aqui esse esses parênteses mesmo que ela não precise de nenhuma informação adicional eu vou botar esse parênteses no caso eles ficam vazios aí depois eu coloco essas chaves aqui e as chaves vão determinar onde começa onde termina a função e o que tiver dentro são as etapas dessa função mais uma vez a função é isso é o plano infalível do Coyote que ele tem deixou lá registrado E

quando ele pegar para executar ele vai seguir o passo a passo beleza aqui o que que eu vou fazer eu vou ó page Body page Body beleza page Bu ou seja a minha referência a essa div aqui inteira a essa div aqui inteira essa div aqui né esse retângulo aqui inteiro que é onde ficam os meus cartões ponto ou seja as informações que existem dentro desse desse elemento PEB uma delas é ponto é o Inner HTML ou seja O HTML que existe dentro dele HTML que existe dentro dele tá bom HTML que existe dentro dele

eu vou dizer que é vazio que é vazio ou seja eu vou zerar o HTML que tá aqui dentro dele tá bom O que que significa zerar eu vou te mostrar aqui ó a aproveitando já aproveitando já eu como é que eu faço eu te falei que isso aqui é um plano né isso aqui é um plano do coiote ele tá lá como é que o coot vai fazer para depois Pegar esse plano e ler e executar aqui no caso da função é simples a função é esse a função tem aqui o nome dela depois

eu posso vir e e executar aqui ó load Library abre e fecha parênteses ponto e vírgula pronto eu chamei a função aqui pelo nome dela e mandaria executar aqui o que que significa isso aqui o JavaScript não tem o código lido de cima para baixo Beleza quando chegar no final do arquivo tem esse comando aqui ó Executa essa função ele vai executar essa função que tem como único tem como único objetivo nesse momento bom apagar o conteúdo aqui o Inner hml beleza apagar o inm apagar o HTML que existe dentro do page bu page bu

é aquela minha div eu vou mostrar um negócio para vocês mas antes Deixa eu só fazer o seguinte aqui esse esse código aqui esse código aqui JavaScript Ele ainda não foi incorporado ao meu HTML como é que eu faço isso eu Tenho que botar uma tag script e eu vou colocar aqui ó no final do bar script ó script eu vou escolher essa segunda opção aqui ó script do P src por quê Porque ele já tem essa propriedade aqui esse atributo aqui source e nesse source eu vou botar bom da onde tá vindo o meu

código JavaScript que ele tem que que ele tem que trazer aqui pro HTML que ele tem que trazer pra minha página tá Aqui Opa tá aqui pronto e aí se você reparar olha só a imagem Sumiu por que que a imagem sumiu porque no momento que a página carrega Ele executa esse código JavaScript aqui E esse código JavaScript ele faz isso tudo e ele termina apagando todo o conteúdo daquela div todo o conteúdo daquela div ou seja Zerou a biblioteca beleza Olha isso é sinal de que isso aqui tá funcionando bacana tá e eu realmente

quero que ele Apague a Biblioteca mas eu quero que ele Apague a biblioteca porque a biblioteca estando zerada ele aí sim vai se encarregar de montar a biblioteca com as informações que estão aqui cadastradas beleza então vamos lá as informações que estão aqui C estradas vamos lá ã vamos lá agora como é que eu vou fazer isso aqui para fazer esse cadastro eu vou fazer o seguinte ó eu tenho os elementos aqui todas as minhas músicas cadastradas e eu quero Percorrer uma por uma aqui né Eu quero percorrer uma por uma aqui desse desse desse

Array lembra que é a coleção das minas que é a coleção dos dados das minhas músicas e eu quero montar cards baseado nisso tá bom no JavaScript a gente tem uma coisa chamada estrutura de repetição O que que é uma estrutura de repetição é o seguinte quando eu quero fazer o mesmo o mesmo procedimento algumas vezes eu vou e defino uma estrutura de repetição que é faz esse Código aqui para isso faz esse código para isso faz esse código para isso até chegar na condição que para mim é satisfatória fala não Não beleza aqui já

deu nesse caso é muito nítido eu quero repetir isso aqui eu quero construir cards para cada uma dessas músicas até eu terminar as músicas cadastradas Beleza então para isso eu vou usar a estrutura do for for é um laço de repetição laço de repetição do JavaScript E aí você vai botar aqui a Palavrinha for abre e fecha parênteses e o for ele tem três condições separadas ele tem três ões separadas ele tem três informações separadas na verdade três informações separadas a primeira delas é bom a segunda é a segunda informação vamos começar pela segunda é

onde é que ele vai parar de repetir já que ele vai ficar repetindo o código daqui de dentro ele vai ficar repetindo até essa condição aqui já ter acabado e a terceira é o que que ele faz o que que Ele faz quando termina uma volta beleza a primeira me permite adicionar qualquer coisa que me seja útil para esse processo e eu vou te dar um exemplo eu vou botar let index igual a zero Ou seja eu defini uma variável do tipo e com um número com um número ela começa com o valor zero e

ela é pode ter o valor dela alterado Beleza então eu botei aqui let index igual a z0 por qu Essa é a minha chamada de controle por que que eu tô fazendo Isso porque com ela eu vou fazer o seguinte eu vou dizer que a minha condição de parada de parar repetição vai ser o quando o índex for eu vou na verdade condição de parada não desculpa eu quis dizer condição para continuar a minha condição de continuar vai ser essa aqui ó Enquanto essa variável index for menor do que eu ten tenho aqui ó a

minha coleção de música que é o Music Library como o Music Library é uma coleção ela tem essa Informação adicional aqui nela o length length é comprimento beleza ele tem aqui o comprimento da minha biblioteca de músicas e é isso aqui que eu vou fazer então eu vou criar essa variável aqui que vai começar com esse valor aqui zero e enquanto ela enquanto esse valor dessa variável for menor do que o tamanho desse meu Array aqui eu vou continuar repetindo isso aqui e ao término de cada repetição index mais mais eu vou aumentar um no

valor dessa Variável Ou seja a primeira vez que eu executar aqui o o código que eu vou colocar dentro desse laço de repetição a primeira vez que eu for executar o código que eu vou colocar dentro desse laço de repetição ele vai estar com o valor zero Aí terminou ele vai passar aqui ó vai incrementar aqui aí vai virar um aí ele vai tentar começar o segundo laço mas para antes de começar o segundo laço a segunda volta ele vai verificar um é menor do que aqui no caso seis Músicas né então menor do que

seis é então eu posso executar o segundo laço E aí terminou Aí terminou vai incrementar mais uma vez Agora é dois agora é dois aí dois é menor do que se é então eu vou executar o terceiro laço e assim sucessivamente até que o o último no último laço no sexto laço ele vai ter o índex vai valer cinco cinco é menor do que seis é ele vai executar o último laço e terminando o último laço a última volta ele vai virar aqui e vai adicionar Mais um nesse índex agora o index vale seis seis

é menor do que se não se é igual a se se não é menor do que se então eu parei de repetir e vou embora é assim que funciona o laço de repetição beleza e aí agora o que tá dentro dessas Chaves aqui é o que eu quero que seja repetido todas essas vezes vamos lá o que eu quero que seja repetido todas essas vezes e essa aqui é uma viagem super legal page Body page Body Ou seja eu voltei aqui e Peguei aquela referência lá da div da div ponto Inner hml vai ser igual

a aí o que que eu vou fazer Olha que doideira Olha que coisa maluca que eu vou fazer aqui nesse momento eu vou pegar aqui eu vou pegar aqui o código do meu Card tá vendo o código do meu Card que começa aqui e termina aqui e vou acrescentar ele no meu Inner hml sacou então para cada volta dessas eu vou adicionar um card Desses essa é a loucura que eu vou fazer só que bom aqui isso aqui ele não acrescenta exatamente ele sobrescreve né ele sobrescreve toda vez que ele passar aqui ele vai pegar

o conteúdo do Winner hml e vai fazer ele esse conteúdo virar isso aqui eu quero não eu quero que ele vá adicionando tem um card passou ali na volta bota mais um card bota mais um card bota mais um card bota mais um card beleza como é que eu faço isso eu posso botar isso aqui ó que o page bar. winer Hml é igual ao que ele já tem mais essa mais esse conteúdo aqui beleza eu poderia fazer isso só que existe uma forma mais simples Até mais elegante de você escrever exatamente isso aqui ó

mais igual esse mais igual faz Exatamente isso ele pega esse conteúdo e ele pega esse conteúdo e joga dentro do Inner hml beleza tipo pega esse conteúdo incrementa assim acrescenta o que já existe aqui no inal não sobrescreve acrescenta tá bom é isso Que a gente vai fazer aqui tem um detalhe eu vou apagar esses parênteses aqui esses parênteses aqui não são o que eu quero o que eu quero é lembra que eu falei para vocês que nas as aspas são uma forma diferente de escrever texto tá as aspas são uma forma diferente de escrever

texto e aqui eu vou fazer e eu vou te mostrar o porquê as aspas são uma forma diferente de escrever texto aqui ó eu vou botar isso aqui ó isso aqui para cá eu vou botar isso aqui para Cá eu tô só organizando aqui o meu texto para que ele fique para que bom eu consiga ter uma noção assim de quem tá dentro Quem que tá fora beleza tá aqui ó isso aqui Aqui tá eu disse que tudo isso aqui é um texto eu vou acrescentar isso aqui dentro do dentro do meu elemento dentro do

meu HTML dentro do da div Page by como texto mas não é um problema não não é um problema não agora mais uma vez qual é o O que que tem de tão especial Aqui o você definir texto corrido com aspas simples quando você define texto corrido com aspas você pode fazer uma mesclagem esperta entre o texto que tá aqui esse texto aqui fixo e o conteúdo de alguma variável o conteúdo de alguma variável Então olha só o que eu vou fazer Olha que doideira Isso aqui Isso aqui é uma doideira muito legal eu tô

dizendo aqui nessa tag HTML nessa tag HTML né de imagem que a imagem vai vir da onde daqui né A propósito deixa só te Mostrar uma coisa antes de eu fazer isso aqui ó Isso aqui é o código sendo executado nesse momento ele tá rodando seis vezes e para cada uma das seis vezes aqui ó ele tá rodando seis vezes esse laço e para cada uma das vezes ele tá adicionando um card você tá vendo né funcionou ele adicionou ele só não adicionou o Card certo por quê Porque essa informação ainda tá marretada mas ele

adicionou seis vezes por que seis vezes porque já que eu tinha seis Músicas cadastradas aqui nesse meu Array o tamanho dess era seis que fazia com que esse laço que é o responsável por adicionar um card aqui nesse page Body aconteça seis vezes Beleza seis vezes agora Vamos ajeitar isso aqui de uma forma super inteligente por muito legal eu disse que o as aspas botar texto corrido entre aspas me permite misturar esse texto com conteúdo de variável aqui no caso que eu quero fazer é o seguinte Olha Só cifrão abre e fecha Chaves isso aqui

é o que eu quero di isso aqui é exatamente como eu fao para botar conteúdo de uma variável aqui no meio aqui é justamente aquele lugar da t imagem no qual eu coloco Qual é o bom oin da imag asas estão todas da mesma pasta só muda de uma música para outra só muda o nome do arquivo o nome do arquivo da capa do disco né beleza nome do arquivo da capa do disco que eu tomei o cuidado de colocar aqui Nesse Campo cover file certo cada uma dos dos documentos da música tem esse campo

aqui cover file e todos os documentos da música estão dentro desse music Library Então o que eu vou fazer é o seguinte music Library Ou seja eu tô pegando o Array Eu vou acessar um elemento específico do Array ou seja uma das músicas eu poderia por exemplo botar aqui a música Dois Sei lá uma música dois E aí a música dois então eu tô Acessando aqui ó o conteúdo Lembrando que o começa a ser contado do zero então a música dois vai ser essa aqui a terceira E aí eu tô acessando esse documento aqui esse

documento tem esses vários Campos aqui eu quero pegar que Campo o campo com o nome do do arquivo da capa é o cover file ponto cover file você vai ver apertei aqui para salvar olha o que aconteceu Ele atualizou com as capas dessa com a capa cadastrada nesse documento aqui beleza isso é legal Isso já dá um indício do que eu quero fazer mas ainda não tem ainda não tá 100% Por quê Porque que ele tá repetindo outra capa seis vezes mas ainda é tá repetindo eu não quero que ele repita o que eu vou

fazer é o index ele não tá variando para cada uma das repetições Não começa em zero e termina em cinco na última repetição Olha que perfeito eu vou pegar aqui e vou dizer que é o index E olha que beleza cara isso isso é muito lindo isso é muito legal porque aqui o JavaScript cuidou para mim ele já preencheu aqui essa biblioteca preencheu essa biblioteca com as capas corretamente ele veio aqui ah na primeira repetição é para eu adicionar essa música aqui essa música aqui que tem essa capa aqui ó ah que tem essa capa

aqui a m. wep aí depois na segunda repetição ele tem esse valor do Index igual a 1 então eu vou tentar acessar o Array com esse número aqui com essa variável aqui agora que na nesse momento Guardo o número um ele vai acessar a Segunda música Bota o capa da segunda música na na na terceira repetição esse valor do índex vale dois ou seja eu vou acessar com o índice dois que é a terceira música 3 4 não aqui 2 3 4 e 5 Olha que legal então dessa forma eu consigo determinar de uma forma

dinâmica o preenchimento das músicas beleza isso aqui é muito maneiro já é o JavaScript fazendo isso aqui da forma dinâmica que Eu tinha prometido tanto para vocês agora tá se cumprindo ó da mesma forma eu vou pegar eu vou pegar aqui ó onde tem esse card title nome da música Eu não quero que ele escreva nome da música Eu quero que ele escreva o nome da música de fato que a gente já viu que é music Library a música da vez vai ser music Library index ponto aqui eh album Artist cover file id song name

song name eu botei aqui ó nome da música da mesma Forma ali digas passagem eu botei aqui já salvei ele já atualizou aqui ó ó o nome da música aqui aparecendo certinho isso é muito legal Da mesma forma a gente vai fazer isso aqui ó vai botar o conteúdo vai colocar dinamicamente esse conteúdo music Library aqui também mesma coisa aqui a mesma coisa só que aqui no caso eu quero botar o o nome do álbum e o nome do artista não é isso nome do álbum E nome do artista salvei monha um de meso nome

Moreira Hide Hide Olha que legal ele preencheu aqui pra gente isso aqui é bem legal e tá bem do tá bem onde a gente estava Mirando V fazer uma pequena alteração aqui no negócio esse botão aqui por sua vez ele não fazendo nada ele não tá fazendo nada e ele ainda com esse texto Aqui go some Primeiro de tudo eu quero mudar esse texto eu quero botar isso aqui ó um sinal de porque quero queele seja o botão adicionar a música Minha play então aqui ó vou botar e vou ver aqui Quais são as opções

decone de de adição que eu tenho na documentação do Bootstrap icons aí aqui ó esse aqui me serve esse Plus Circle eu vou botar aqui ó esse Icone aqui eu V Botar ele no lugar desse go tá vendo aí aqui ó ficou esse maizinho aqui Eu adicionar a música beleza Ah então tá ficou esse maizinho aqui para eu adicionar a música e eu tenho outra coisa para fazer eu tenho algumas outras coisas para fazer na verdade agora eu tenho que adicionar as ações a esses botes né Nenhum deles na verdade desempenhando nenhuma ação a gente

até tem um conteúdo sendo carregado dinamicamente o que é irado Mas a gente quer poder adicionar as ações como é que a gente vai fazer isso bom primeiro de tudo Ah eu acho que eu vou começar pelo Eu acho que eu vou começar pela ação de filtragem da música Tá bom vou começar pela ação de filtragem da música e a ação de filtragem da música eu vou fazer da seguinte forma é simples Eu vou pegar isso aqui esse music Library e eu vou transformar ele em dois eu vou transformar ele em dois eu vou Pegar

a minha a minha music Library vai ser o meu Array de todas as músicas que eu tenho cadastradas e eu vou botar aqui ó songs eu vou criar esse segundo Array songs que vai começar igual ao music Library beleza que vai começar igual ao music Library por que que eu tô criando esse segundo Array por que que eu tô criando esse segundo Array porque ele vai ser simples eu quero ter sempre ali registrado quais são todas as músicas Que eu tenho cadastrada mas esses sons aqui vai ser outro Array vai ser o Array assim que

vai mostrar as músicas que T que ser exibidas na tela beleza porque por exemplo se eu tiver filtrando aqui eu vou pesquisar aqui ó ã L eu vou botar aqui l e vou apertar enter eu vou apertar enter não eu vou clicar aqui no botão de pesquisar cliquei aqui no botão de pesquisar eu vou pesquisar aqui ó essa aqui não tem l em nada nem no nome da música Nem no nome do álbum nem no Nome da banda Então essa aqui já ia desaparecer essa aqui tem ela se mantém essa aqui tem ela se mantém

essa aqui não tem essa aqui ia sumir sacou Essa aqui tem ia se manter essa aqui também tem por causa do nome do artista o que que eu tô querendo fazer eu tô querendo que os songs Então seja o meu Array a versão filtrada a versão filtrada aqui pelo meu termo de busca Beleza então ela vai poder variar o tempo todo porque eu quero que isso seja dinâmico eu quero Que ela responda ao que eu tô escrevendo aqui para pesquisar beleza ao mesmo tempo eu quero ter aquela referência lá super é sempre lá presente de

quais são todos os todas as músicas que eu tenho cadastrado Então vou manter esse Mica music Library aqui eu vou criar esse segundo Array songs aqui só que tem um detalhe mas eu vou copiar isso aqui de uma forma diferente por quê Porque o Array aqui pra gente fazer uma cópia certa no JavaScript a gente vai usar Esse procedimento aqui esse procedimento aqui o que que ele tá fazendo isso aqui é o operador de spread spread aqui do inglês significa espalhamento basicamente eu tô fazendo o seguinte eu tô pegando e espalhando olhando o ar não

é uma grande caixa com várias caixinhas dentro Eu tô pegando esse conteúdo essa grande caixa e tô virando ela no chão sabe separando ela tirando ela da grande caixa e quando eu coloco aqui dentro do então isso aqui esses três pontos antes Do Music Library faz eu tô pegando esse conteúdo espalhando no chão tirando da grande caixa só que aí eu tô vindo com uma outra grande caixa e colocando sacou então Esso aqui são dois arrays diferentes dois arrays diferentes que T os mesmos dados beleza essa é a forma certa de você copiar um Array

aqui essa é a forma certa de você copiar um Array aqui no JavaScript eu tô criando um novo Array mas dizendo que ele tem o mesmo conteúdo como simples tira o a o Invólucro do ara anterior você tem só o conteúdo do ara anterior Mas você coloca o invólucro novo é isso é isso aqui que eu fiz beleza só que agora repara só no que eu falei isso aqui é a minha referência de quais são as músicas que eu tenho cadastradas mas o songs vai ser o aray que vai ditar o que que eu quero

que apareça na tela Beleza então se isso é verdade nesse processo aqui nesse processo aqui eu quero eu não Vou construir a os cards Com base no Music Library eu vou construir com base no songs Porque se o som tiver filtrado eu quero que ele preencha a tela com menos coisa sacou então eu vou fazer isso aqui ó onde tinha referência music Library eu vou ter referência SS de início vai ser igualzinho mas isso vai ser igualzinho ó nem mudou nada na tela porque o sons não tá filtrado quando eu começar a filtrar isso vai

começar a mudar beleza para eu Começar a filtrar lembra que eu peguei a referência aqui ao contêiner que tinha todas as músicas a partir do id dele eu vou fazer a mesma coisa tanto pro input aqui quo PR esse botão aqui e você vai ver PR isso eu vou voltar lá isso aqui são elementos do header então aqui ó page header tá aqui ó input eu vou botar um ID nesse input input é esse campo aqui no qual escrevo texto né aqui ó eu vou botar aqui ó search ter termo de busca esse Aqui é

o nome do esse aqui vai ser o ID que eu coloquei para esse input aqui coloquei porque faz sentido né eu coloi porque esse nome faz sentido é de fato um campo de tex escever o o termo de busca aqui eu vou colocar nesse botão o ID de search Button né porque o botão não começ vai clicar quando você de fato quiser pesquisar uma música específico ou filtrar ali as músicas beleza filtrar As músicas aqui pelo termo que você colocou tá bom eu vou colocar esses dois aqui então esse esses eh essas tags Agora ela

tem esses Elas têm esses ids e consequentemente eu consigo criar referências para essas tags recuperando elas a partir do id aqui no JavaScript então aqui ó search term é igual a document.get elements byid opa Na verdade by ID é isso aqui é isso Aqui e da mesma forma ó eu vou copiar essa linha aqui vou colocar na linha de baixo eu vou colocar aqui ó search buttom vou botar search btn né BTL Button search Button botão de busca beleza aqui ó search ter e search Button então eu consigo recuperar as referências de esse aqui E

esse aqui tranquilo agora vem um pulo do gato vem uma coisa interessante o conceito de evento o é um evento pensa da seguinte forma imagina que bom eu tenho um Exemplo assim eu tenho um exemplo que eu às vezes uso imagina que você tá num churrasco e você tá morrendo de fome e você tá morrendo de fome só que aí você tá conversando um pouco longe da churrasqueira beleza tá conversando um pouco long da churrasqueira só que aí você sabe que você putz você sabe que daqui a pouco vai sair a carne ali na churrasqueira

você tem que correr rápido lá para pegar você tá morrendo de fome e aí você vira pro seu amigo que tá perto Ali da chasqueira e fala e manda uma mensagem para ele pô vem cá quando sair aí eh pão pão de alho Me avisa quando sair pão de alho me avisa e aí ele vai falar para você beleza no momento que sai o pão de alho ele vai gritar para você Daniel saiu o pão de alho e aí você vai correndo lá buscar o evento foi ele gritava para você ali que saiu o pão

de alho ou seja Na verdade o evento foi Saiu o pão de alho ele tava sendo anunciado para você E aí você estava preparado para reagir a esse evento Por que que isso aqui é relevante Nesse contexto porque o o JavaScript nas páginas de internet funciona dessa forma aqui quando você clica num elemento é anunciado que existe um clique nesse elemento e você pode falar aqui no JavaScript que o elemento tem que ficar de olho para Quando acontecer um Clique nele e quando acontecer você fala para ele agora você age de acordo Beleza então aqui

por Exemplo eu quero que quando ele clique aqui que ele pesquise a música de pesquise as músicas que correspondem ao termo que tá escrito aqui beleza então a gente vai usar isso aqui esse conceito de evento é super importante pra gente por causa disso porque a gente consegue fazer executar ações na medida em que ah o eventos acontecem Ou seja a gente não a gente agora não tá limitado à execução inicial do código né porque eu disse que esse código aqui vai ser interpretado Pelo navegador e vai ser interpretado pelo navegador assim que ou ele

for carregado e ponto você vê que carregou a biblioteca beleza mas como é que eu faço assim se eu quiser Executar a ação de pesquisar eu adiciono a ação de pesqu Eu associo a ação de pesquisar a esse botão a especificamente a um clique nesse botão e aí toda vez que eu ver um clique eu consigo Executar a ação beleza essa aqui é o Feeling do que a gente quer fazer vamos lá Ó function a ação aqui o plano o plano de ação vai ser definido dentro de uma função aqui function eu vou encar aqui

search Click Esse vai ser o meu plano de ação beleza aqui esse elemento aqui ó esse elemento aqui que eu recuperei que é o search ter se você for ver uma coisa eu vou te mostrar um negócio aqui bem rapidinho Olha search term aqui ó ele tinha isso aqui ó ele tem esse ele tem essa informação aqui de valor que eu não vou marretar aqui porque não faz o menor sentido mas você veria como eu você vai ver como é que vai ficar se se ficasse marretada marretada ó tá aqui é o texto é o

texto aqui que tá aqui dentro você já viu Então aqui ó no momento que eu escrevi isso aqui passou a existir aqui essa informação existe associada sacou então Toda vez que existe toda vez que eu escrever uma coisa aqui o que eu tô alterando é o campo valor dessa tag input é o atributo valor dessa tag input então eu vou pegar justamente isso aqui ó ponto value Beleza eu vou até fazer o seguinte esse aqui é um comando esse aqui é um comando console log que escreve escreve ã escreve é a mensagem que está dentro

Dos parênteses no console o que que é o console se você vir aqui na sua página e apertar f12 você vai ter aqui console aqui ó você vai ter essa aba aqui console E aí console o console log vai fazer com que o conteúdo que tá dentro dos parênteses seja escrito aqui nessa aba console beleza E por que que isso aqui é relevante já vou te mostrar mais uma vez Lembrando que essa tela aqui esse é essa janela aqui que eu acessei é acessada com f12 no navegador Tá bom mas Eu defini aqui uma função

que nesse momento tudo que ela faz é escrever no console o valor do search term P value Beleza agora o que eu vou fazer é o seguinte deixa eu fazer Eu Tô organizando meu código aqui nesse momento eu vou fazer isso aqui ó search Button ou seja o meu botão eu tenho a minha referência ao meu botão de pesquisar add event listener ou seja adicione a ele a capacidade de escutar um evento e Reagir de acordo que evento o evento de clique E aí como assim que evento Como assim que evento bom eu falei para

vocês ali que no meu exemplo do churrasco eu queria que o meu amigo Me avisasse quando saísse pão de alho mas se saísse sei lá coração de galinha e eu não gosto de coração de galinha ele vai me avisar ou eu vou perceber que saiu o coração de galinha e eu não vou me movimentar para ir lá pegar porque eu não gosto sacou então importa o evento não só é Importante Qual é a ação que você vai desempenhar Mas qual é o evento que tá acontecendo você quer desempenhar uma ação para um evento específico beleza

no caso aqui eu quero desempenhar ação para quando esse botão for clicado então eu quero executar uma ação para um evento específico qual evento O Clique nesse botão e aí eu eu vou Executar a ação Qual é a ação essa ação que eu defini aqui ó search Click aí eu vou botar aqui o nome dela ah você não vai botar Parênteses não Daniel não parênteses eu coloco quando eu quero que ele chegue nessa linha Leia isso e Execute não é o que eu quero o que eu quero é eu eu o que essa linha tá

fazendo não é executar essa função logo de cara é associar essa função a um clique nesse botão aí só quando o clique acontecer de fato que ela vai ser executada beleza Então tá bom eu fiz isso aqui Eu salvei eu vou aqui ó apertar aqui esse f12 ele escreveu no caso não tinha nada Escrito ele não escreveu nada né mas aqui ó e agora que temos algo escrito Beleza então aqui você já tá vendo ó aqui a gente já tá vendo uma ação aqui no botão uma ação aqui associada ao clique no botão e a

gente tá vendo aqui o conteúdo tá o conteúdo reagindo a isso tudo tudo coisas muito importantes são tudo elementos muito importantes aqui do desenvolvimento web beleza mas é óbvio que o que eu quero fazer quando clicar Aqui não é bom escrever essa informação ali no console isso aqui foi só para ilustrar que isso aqui podia ser de que isso aqui tava de fato respondendo D O Clique beleza que que eu quero fazer eu quero filtrar esses caras aqui então o que que eu vou fazer primeiro de tudo se ele não escrever nada repara só aqui

ó não escreveu nada né aqui tá vazio daqui tá vazio não tem nada escrito eu vou ficar apertando ele tá ele tá fazendo vários nada tá vendo ele Tá escrevendo aqui na tela vários nada aqui sete um indicativo de que ele tentou fazer essa ação sete vezes 8 9 10 11 mas não faz sentido né se eu tenho uma barra de busca e eu tenho aqui o botão de busca associado para executar Com base no texto que tá escrito se não tiver nenhum texto escrito eu não quero fazer nada repete essa frase comigo se eu

não tiver nenhum texto escrito eu não quero fazer nada mais uma vez se eu não tiver nenhum texto escrito eu não quero Fazer nada percebe que eu tenho uma condição exatamente a gente pode expressar isso em JavaScript E para isso existe a estrutura if if que do inglês é amente se e se Qual é o se aqui em questão eu tenho aqui o search term se e a gente já sabe que o velho representa o que que tá escrito nele se eu não tiver nada escrito se eu não tiver nada escrito ou seja se isso

aqui for igual e para você fazer uma comparação lembrando um igual só pega o Conteúdo da direita e joga no cara da esquerda três iguais compara para ver se os dois são iguais para ver se os dois são iguais o cara da esquerda e o cara da direita Isso aqui vai ser uma comparação então isso aqui vai retornar verdadeiro ou falso Ou seja é igual ou não é se isso aqui for igual a uma a um texto vazio tá vendo aqui eu abri o texto e fechei o texto né abri aqui a aspa e fechei

a aspa se isso aqui fo igual a um texto vazio ou seja se isso Aqui não tiver nada escrito eu vou só retornar da minha min função isso é eu vou matar a minha função eu vou matar a minha função sem fazer nada aí depois simples se ele passar desse ponto se ele vai passar desse ponto lembrando o return ele mata a função return é essa palavrinha especial ela mata a função se eu passei por aqui sem executar o return é porque ele tinha alguma coisa de fato escrito então tendo alguma coisa de fato escrito

eu posso mandar por ex exemp Agora é escrever na tela escrever na tela não escrever no console e vai ficar tudo certinho ó apertei aqui f12 beleza quero executar aqui tá escrevendo alguma coisa não tá ó não tá aparecendo nada aqui mas e agora agora tá Por quê Porque eu tenho de fato o texto ali mas agora não tenho mais tirei Beleza então a gente tá evitando aqui que o código desnecessário seja executado com esse return aqui isso Aqui é legal isso aqui é bem bacana pra gente beleza feito isso o que que eu tenho

que fazer aqui ó songs beleza songs aquele que a gente tem lá em cima ele vai ser atualizado ou seja Vou botar aqui um novo valor nele e que valor vai ser esse o próprio songs o próprio songs ponto Filter ou seja songs pega aquele pega as Músicas que estão sendo que estão sendo exibidas na tela e filtre elas filtre elas e esse Filter aqui ele tem uma regra de execução específica ele tem uma regra de execução especial assim ele tem um jeito de escrever especial como é que é isso simples aqui ó filtra filtra

segundo uma regra Qual é a regra de filtragem né eu tenho que diz qual casos ele vai manter deixar passar aqui no filtro qual ele vai reter no filtro beleza eu quem é que eu quero Então eu quero todo toda música toda a música que eu vou colocar aqui como song ou seja toda música tal que tal que essa música aqui ó s tal que o nome dela e isso aqui é texto né o nome é texto a gente sabe disso aqui ó tá aqui é texto texto e texto você pode fazer isso aqui no

JavaScript você pode botar ponto Includes para verificar se esse texto inclui algum outro texto Beleza você pode vericar se o texto inu algum outro texto sacou Então a gente vai fazer isso aqui song song name includes isso aqui Ah includes o search ter. value Beleza então assim filtra com base nessa regra de filtragem qual a de que toda a música vai passar no filtro se o nome da música incluir o valor que tá Escrito aqui nessa caixinha beleza é isso aqui que a gente tá fazendo com isso Beleza isso aqui tá atualizando aqui o songs

tá atualizando songs mas eu tenho que executar mais uma vez o load Library depois disso porque é o load Library a função que é responsável por desenhar aqui todos os cards das músicas que tão que são apropriadas então eu vou botar aqui ó load Library beleza Vamos tentar vamos vamos testar vamos fazer isso aqui eh eu disse Eu dei aquele exemplo lá do L né aqui ó ã L Vou pesquisar aqui pesquisei e só essas duas apareceram beleza Tá vendo então isso aqui funcionou e Olha que bacana o songs esse Array aqui que tem aray

que tinha essas músicas Originalmente cadastradas agora só tem duas músicas cadastradas Mas a gente não perdeu nada porque as músicas originais ainda estão cadastradas no Array original Tranquilo então beleza por isso aqui relevante Porque ó agora até então eu não conseguindo mais fazer essas músicas recarregarem corretamente agora eu vou consertar isso aqui porque a gente pelo jeito conseguiu filtrar mas a gente não CONSEG mais desfiltrar e eu quero que isso aconteça eu quero poder filtrar de novo como eu vou fazer isso aqui eu vou pegar aqui ó search ter eu vegar o o texto a

caixa de texto e eu também vou adicionar um event L nela ou seja eu Também quero escutar eventos coisas que estão acontecendo nela e se aqui nesse botão eu escutava o evento de clique aqui eu vou escutar o evento de input Ou seja eu vou ficar de olho para toda vez que alguém escrever alguma coisa aqui mudou uma letra Isso aqui vai apitar beleza e aí eu vou executar um procedimento que eu vou chamar de reset Filter tá bom o meu reset Filter eu vou escrever agora deixa eu já adiantar aqui o que que eu

tô fazendo É o meu reset Filter vai ser uma função vai ser uma função então function palavra-chave function reset Filter abre e fecha parênteses esse aqui é o padrão para você escrever uma função abre e fecha Chaves tá aqui ele é uma função só que o que vou quer que essa função faça que ela resete a configuração paraa configuração que engloba todas as músicas beleza E quando é que eu vou querer que eu faça Quando é que eu vou querer que faça isso quando o cara Apagar toda apagar aqui o termo de filtragem beleza quando

o cara apagar o termo de filtragem eu quero que isso aconteça então para isso o que que eu vou fazer eu vou se eu vou fazer na verdade o caso contrário agora se o search term p value não estiver vazio e isso aqui é o sinal de diferente ó exclamação igual igual é o sinal de diferente tal qual o três iguais era o sinal de comparação para Ver se era igual esse aqui a comparação para ver se é diferente se o search term não tiver vazio eu não quero eu não quero executar nada então return

é você vê que é análogo né você vê que aqui eu tô fazendo aqui para avaliando se é igual aqui eu tô avaliando se é diferente mas caso essa caixa aqui esteja de fato vazia Ou seja caso eu registre uma variação aqui no que tá escrito e a variação do que tá escrito e o conteúdo Passou a ser vazio ou seja basicamente o cara pagou tudo que tava escrito aqui eu quero voltar com as músicas originais Beleza e como é que eu vou fazer isso bom vou volar com as músicas originais vai ser songs recebendo

abre e fecha abre e fecha colchetes TR P Library music Library né music Library music Library e por fim load Library que vai carregar essa biblioteca aqui que tá sendo exibida só Que com a valor atual de songs que já foi atualizado então com isso aqui eu tenho ó eu vou botar aqui o l de novo beleza B legal mas agora eu não quero mais isso paguei voltou voltaram todas as músicas maneiro não é isso É Super Legal tem só um detalhe aqui nessa filtragem que eu acho que a gente podia adicionar e que vai

deixar muito legal é o seguinte aqui a filtragem tá sendo feita para caso o nome da música tenha a letra ali tenha o Termo que a gente colocou ali na barra de busca mas a gente podia pesquisar por mais do que só o nome da música né A gente podia pesquisar se o nome da música ou o nome do álbum ou o nome do artista porque às vezes você não lembra de um mas lembra do outro e como é que a gente vai fazer isso é simples ele tá avaliando aqui o que eu tô dizendo

é o seguinte a música vai permanecer vai sair do filtro né vai passar pelo filtro se se o nome dela incluir o search term Pon value né Se ela incluir o nome é o search term pon velho eu vou colocar um que um ou e esse ou aqui do JavaScript é expresso com essas duas barras aqui ou eu tenho aqui ó song ponto álbum ponto ou seja se o nome do álbum ou se o nome dolum incluir o ou se o nome dolum inclui o sech ter ou se o nome do artista inclui o sech

ter aqui ó Beleza então caso um dos três seja Verdade essa música merece sobreviver ali no filtro beleza sobreviver passar ali pelo filtro Tá bom eu deixei aqui o meu filtro mais bacana mais robusto aqui ó Ahã aqui ó eu vou pesquisar aqui por D aí aqui eu pesquisei por D maiúsculo né Então tá aqui ó do i w know tem esse D maiúsculo e o Eis Aqui a o nome da música o nome do álbum definitely maybe tem esse D maiúsculo Aqui também tá vendo eles dois permaneceram aqui eu vou Apagar e voltei aqui

ao normal aqui eu vou apagar e voltei ao normal Beleza então a gente já tem a parte da filtragem concluída e a parte da filtragem concluída é super legal também que agora a gente além de tudo pode apagar aqui o pode apagar aquele Card que tá aqui no no HTML né porque ele não ele agora tá sendo colocado pelo JavaScript de fato o que era tudo que a gente queria que era tudo que a gente queria o HTML ficou mais enxuto JavaScript ficou puts dinâmico isso é super legal beleza mas agora eu quero duas coisas

eu quero um poder adicionar músicas à minha playlist e eu quero que ao clicar aqui nessa nesse botão aqui de playlist apareça um modal para mim com a lista das músicas que eu tenho cadastradas beleza é isso que a gente vai fazer para isso eu vou pesquisar aqui primeiro modal aqui ó Modal eu ten aqui ó um exemplo de modal você pode até ó launch demo e demo Model tá vendo aqui ó e aqui ele abriu aqui um modal ó que legal beleza tá aqui e ele tem um outro modal aqui embaixo que só permite

só permite que você Feche não clicando fora mas clicando aqui no x ou clicando aqui no close E aí para você e aí tanto faz qual que você vai utilizar assim usa o que o que fizer mais sentido para você eu sou meio desajeitado então assim para clicar fora do modal e e sem Querer fechar é muito fácil para mim então eu vou clicar eu vou escolher esse aqui esse aqui só vai fechar quando eu clicar especificamente no botão de fechar beleza e aí se você for ver o código do modal aqui ele envolve duas

coisas primeiro um botão que faz o modal acontecer e o que faz o modal aparecer e o modal propriamente dito que aparece os dois poderiam ser colocados aqui no nosso bar eu vou colocar e vou te mostrar ó aqui no nosso bar tá vendo Oki aqui no final Olha o que apareceu tem esse botão aqui que eu vou clicar apareceu aqui o modal tranquilo só que eu não quero esse botão aqui porque eu não preciso dele eu já tenho esse botão aqui que eu quero usar com essa finalidade o que que eu vou fazer eu

vou tirar esse botão tá eu vou tirar esse botão aqui ó ele chama de buttom Trigger Model o modal que dispara o o desculpa o botão que dispara o Modal ele dispara com base nessas propriedades aqui ó data BS Toggle modal data BS target static backdrop ou seja aqui ó o modal que tem o ID static backdrop vai ser é é alvo desse botão aqui E esse botão aqui é um botão que dispara modal eu vou pegar essas duas propriedades e botar lá no meu e botar lá no botão que eu já tinha para isso

aquele do header olha aqui ó esse aqui é o botão de busca né esse aqui é o botão de busca esse aqui que é O botão do esse aqui que é o botão de da playlist cliquei aqui apareceu um modal beleza legal então esse botão já tá funcionando eu não preciso mais desse botão aqui esse botão aqui não tem razão de existência salvei desapareceu beleza cliquei aqui e apareceu um modal apareceu modal eu também não quero se você for ver o modal tem um rodapé aqui também para mim não é necessário esse rodapé não tá

bom para mim não é Necessário essee rodapé não então eu vou fazer o seguinte ó Bottle fooder eu vou tirar ele daqui esse Model agora ele tem só um título e um conteúdo Ah eu o título desse modal vai ser sua playlist e aqui não tem muito mistério sua playlist beleza sua playlist o que que ele tem que mostrar aqui ele tem que mostrar as músicas na medida em que eu for adicionando elas tranquilo faz sentido eu não quero que ele mostre três Pontinhos aqui eu quero na verdade que ele mostre um vazio se não

tiver nada não tem nada certo então a gente vai ter que E aí olha que legal a gente vai dinamicamente adicionar os conteúdos aqui nesse modal com o JavaScript beleza mais uma vez isso eu vou deixa eu ver aqui eu vou criar um novo Array aqui no meu um novo Array aqui no meu código JavaScript ele vai ser o playlist beleza esse playlist playlist é Esse que eu vou começar com valor aleatório mas é só pra gente poder construir esse processo de abrir o modal Tá bom a gente vai construir o processo de abrir o

modal mas esse mais esse playlist ele vai ser atualizado pelos cliques em cada um dos botões Ou seja eu quero adicionar as músicas a aí sim eu vou e eu queroo adicionar as músicas para aí sim ela aparecer aqui nesse Array playlist Tá bom eu vou colocar só uns valores temporários aqui vou botar Essas três primeiras músicas vou dizer que essas três primeiras músicas são as que vão fazer parte da minha playlist da minha biblioteca eu escolhi essas três criei esse terceiro Array lembrando esse Array eu vou usar para gerenciar minha playlist Não a minha

biblioteca tá certo ah tendo essa playlist eu posso fazer uma coisa muito parecida na verdade deixa eu fazer primeiro aqui o seguinte esse é o corpo do modal eu vou colocar a tag P eu vou colocar a tag P E aí Vou colocar aqui a seguinte vou colocar aqui o seguinte ah nome da música né Aí vou botar aqui ó só para ver como é que ele fica né só para nome da música espaço if nome da banda tá bom Parece isso aqui do i w know Artic monkey beleza aqui no caso eu também quero

que cada linha L dê a capacidade de clicar num botão para clicar num botão para Apagar a música para apagar a música da lista né remover ela da playlist Beleza então eu quero ter um botãozinho aqui de deletar a música da playlist Tá bom então eu vou botar aqui ó um but aí se lá botar aqui ó apagar a puts primeiro de tudo esse camarada aqui ele não tá do jeito que eu queria né Eu queria que tivesse da mesma linha eu Posso botar aqui dentro aqui do do parágrafo né eu posso aqui botar dentro

do parágrafo vai ficar o texto e logo depois o botão de apagar e como é que fica isso texto e depois o botão de apagar beleza é o que eu queria é tá na mesma linha tá é feio horroroso feio horroroso que que a gente vai fazer a gente vai fazer vai dar a esse elemento paragraph o a condição de display Flex a a condição de display Flex e a Gente vai bom ele por ele como display Flex por padrão já vai tentar já vai tentar colocar todos na mesma linha que que você vai fazer

você vai já que a linha tá sendo então tratada como a dimensão principal você vai botar justify content botar essa classe jfy content E aí Aqui você pode dar uma olhada aqui caso você não lembre jfy content o que que eu quero eu quero que Um fique num canto Outro fique no outro justify content between justify content bit me resolv aqui justify content bit aqui beleza eu tenho isso E aí se eu tivesse sei lá três músicas cadastradas seria dessa forma aqui ó seria dessa forma ah botar aqui sei lá vou dar o nome da

música tá aqui beleza isso aqui tá legal eu acho até que eu vou só colocar uma coisinha aqui Para deixar um pouco mais bonitinho essa coisinha vai ser o seguinte aqui tem um outro elemento que pra gente é interessante que é borda você tem como definir a borda assim deixar ela explícita a borda do retângulo e aqui eu vou simplesmente pegar isess aqui ó eu quero botar uma borda em cima e uma borda embaixo de cada linha beleza a classe que bota borda em cima é bord top e a classe que bota embaixo é border

Bottom aqui então eu vou botar aqui em Cada linha B top E aí depois B Bottom beleza aqui mejor coisa aqui mejor coisa então como é que fica OK Tá OK eu quero apagar esse botão aqui eu quero apagar esse estilo aqui ó eu quero apagar esse botão aqui que Pô parece um botão esquisitão né Eu quero usar um botão mais bonitinho na verdade eu vou usar um ícone de deletar aqui no lugar do texto apagar Ó tem aqui umas latinhas de lixo Podia usar latinha de lixo eu podia usar latinha de lixo aí ao

invés do botão de apagar ao invés o texto apagar eu vou vou colocar o código da latinha de lixo e aí ficou aqui ó é beleza isso funciona por fim eu daria uma olhada no seguinte Será que eu não consigo fazer um um botão mais bonitinho não tipo esse Aqui de Danger tipo esse aqui de Danger aqui ó BT outline danger aqui ó Bottom eu vou pegar isso aqui ó eu vou pegar esse cara aqui o visual Studio code ele tem um recurso super bacana que é o seguinte se você seleciona um texto em específico

e aperta contrl D você consegue ver a próxima ocorrência desse texto e iluminar ela já aqui ó contrl D eu selecionei a próxima ocorrência que no Caso já que eu tô selecionando uma tag inteira ele vai mostrar onde tá a próxima tag E aí não valeu a tag de encerramento porque a tag de encerramento ela tem uma barrinha aqui né mas outra tag aqui é beleza e aí eu consigo botar um cursor em cada uma desses caras e aí control V aqui para mim copia em todos de uma vez saou e tem esse negócio super

louco assim de você conseguir botar vários cursores de uma vez só e isso é muito Legal olha aqui beleza eu tô satisfeito com isso aqui eu tô é acho que eu tô assim satisfeito com isso aqui talvez eu só centralize esse texto aqui porque esse texto ele tá parece um pouco mais colado em cima não é e já que isso aqui é o display Flex que tá organizando os elementos em linha a dimensão secundária é a coluna e a dimensão secundária eu quero centralizar os elementos na coluna eu vou só align item Center botar essa

Classe [Música] aqui é no caso eu botei só o primeiro e o primeiro ficou Centralizado o segundo o segundo e o terceiro não mas agora sim beleza cara então perfeito agora a gente tem aqui uma playlist agora a gente tem esse modelo da playlist acontecendo mais ou menos como a gente gostaria Tá certo com um com um detalhe com um detalhe isso aqui não isso aqui não não tá sendo gerado pelo JavaScript Isso aqui tá sendo gerado só no HTML eu fiz isso mais uma vez só pra gente ver a estética da coisa agora que

a gente já viu que a estética funciona vamos Apagar vamos apagar a gente vai deixar um só elemento vai deixar um só elemento vai usar esse elemento como base lá do JavaScript para que a função responsável por preencher a Playlist faça isso dinamicamente n então aqui ó fazer umaem ela vai ser bem parecida mesmo assim a ideia é a mesma né preencher Dinamicamente com JavaScript Então deixa eu fazer o seguinte load playlist a sua playlist ela vai tá vazia como é que eu vou pegar esse cara aqui como é que eu vou pegar esse cara

aqui porque aqui eu tinha o a referência do page bar aqui não aqui é o modal Body Tá certo eu posso botar aqui ó o ID vou botar aqui ID playlist beleza botei aqui o ID playlist nesse cara o que me o que me permite agora pegar esse cara com o JavaScript Já que ele tem o ID eu posso fazer isso aqui ó const playlist Element ou seja só para não confundir com essa playlist aqui o elemento playlist é igual a document PG elements by ID aí aqui ó playlist Esse é o ID dele ele

lá no HTML então eu consegui pescar ele agora eu tenho uma referência a ele beleza e aí mais uma vez playlist Element pml eu vou começar zerando aqui a Playlist zerando aqui a Playlist quando isso aqui foi executado ele vai zerar essa playlist e a prova viv disso vai ser isso aqui ó load playlist Zerou tá vazio é exatamente o que eu queria agora eu vou fazer um for que nem no outro exemplo for aí aqui let index igual 0 E aí aqui você talvez se perguntando pô Daniel eu posso fazer duas variáveis com o

mesmo nome já que eu fiz uma aqui e outra Aqui posso mas é porque essa variável tá sendo definida essa variável tá sendo definida dentro dessa função o que significa que ela vale só dentro dessa função ou no máximo dentro de uma função que pudesse ser definir dentro de uma função que eu fosse escrever dentro dessa função se eu fosse me meter escrever função dentro de função essa variável aqui também Valeria pras funções de dentro mas não para fora então basicamente esse índex aqui E esse Índex aqui não disputam o mesmo espaço não só isso

mas terminou a execução da terminou a execução da função a variável morre beleza e aí quando eu executo a função de novo ela começa do zero tá bom ela começa desse valor zero aqui aqui vai ser a mesma coisa vou usar o index para percorrer só que vou percorrer aqui agora o o Array playlist playlist né então assim eu tenho que fazer n Eu tenho que fazer n escritas ali no meu HTML só que as Minhas n escritas elas vão ser do tamanho v n ve é o tamanho de de músicas que eu tenho na

minha playlist e eu vou incrementar o índice o index toda vez que eu terminar uma repetição aqui eu vou pegar botar esse cara aqui mais igual eu vou botar duas crases vou pegar o código de o código que eu formatei aqui de um elemento um código de um elemento aqui aliás entre nós eu posso dar até cont Control x porque eu sei que eu não preciso dele no HTML o JavaScript que vai se encarregar de escrever esse cara coloquei aqui ó coloquei aqui o cara tem aqui esse cara só que a qual é o conteúdo

que eu quero que seja colocado dinamicamente isso aqui era o nome da música eu vou apagar e vou colocar aqui ó o nome da música da minha playlist nome da música da vez né Index tá bom playlist index ponto song aí aqui olha só eu consigo com essas com essas aspas fazer fazer texto que mistura aqui o valor de variável é o que eu tava comentando com vocês Só usando essa estrutura aqui também das aspas e do Cifrão com o e do Cifrão com o abre e fecha Chaves só que aqui eu consig meter um

texto aqui no meio então consigo deixar esse espaço if espaço e aí boto outra variável também que é Basicamente pega esse valor e coloca aqui dentro aí aqui ó playlist index e agora o nome da banda Opa index ponto agora o nome da banda arst beleza Esse é o cara que eu quero colocar eu vou fazer com que cada um desses elementos aqui ó p cada um dessas tags aqui p tenha um ID também o ID dela vai ser o id o id dela vai ser Playlist index ou seja música da vez ponto o ID

da música sacou eu vou fazer o ID da música ser igual ao ID do cara aqui na playlist beleza é isso aqui que eu vou fazer aí olha só tá aqui ele carregou dinamicamente aqui as minhas as minhas músicas da minha playlist com base do que tá cadastrado aqui nesse playlist aqui isso é errado né Eu acho isso muito maneiro ó Por exemplo se eu fosse colocar aqui um as you were se eu fosse colocar aqui mais uma música essa as you were eu vou atualizar aqui a página ele vai montar aqui ó as you

were track cara olha que legal isso aqui res pra gente tá vendo eu ao isso muito maneiro agora a gente tem que resver umais é o seguinte eu tenho quear nisso aqui e eu tenho que poder ess eu tenho que poder cara aqui eu quero poder um Elemento aar aqui nesse botão certo e a para isso que que eu vou fazer bom eu vou fazer uma função aqui ó function aqui remove from playlist Só que essa função ela vai precisar de um parâmetro ela vai precisar de uma informação adicional para saber funcionar que é qual

é a música que eu quero remover vai ser song ID eu vou dar esse nome aqui para o eu vou dar esse nome aqui pro parâmetro Beleza essa aqui é a informação que eu vou precisar para executar essa função e aí o que que vai acontecer bom a gente sabe que o as músicas que estão na nossa playlist são essas aqui que fazem parte desse Array que fazem parte desse Array e a gente sabe que desse Array é construído desse Array é construído essa esse modal aqui né com essa listagem aqui nesse load playlist certo

beleza então onde eu quero chegar com isso se eu remover uma música eu Quero que essa música saia do Array saia do Array e saia da playlist beleza faz sentido e sai aqui da do modal Então vamos lá primeiro de tudo como é que eu vou fazer isso aqui Vamos por partes eu vou pegar aqui ó o playlist ele vai receber aqui ó ele vai receber ele mesmo filtrado para toda a música tal que ela tenha um ID Diferente do ID que eu quero remover diferente do ID que eu quero remover faz sentido eu passei

aqui a informação Esse é o ID da música que eu quero remover E aí eu vou remover eu vou remover ali da playlist eu vou manter na playlist vou filtrar a Playlist mantendo todo mundo que não tem ess D sacou É por isso na verdade usando esse ID por isso que a gente tava colocando essa informação aqui quando a gente definiu o documento de cada uma das músicas beleza Aí vamos lá da mesma forma da mesma forma a gente precisa remover a música Ali da modal e como é que a gente Remove a música da

modal a gente sabe que essa mú representa uma representa uma tag paragraph né representa uma tag paragraph aqui uma tag P que eu quero que eu vou precisar excluir Não é isso lembra disso aqui que eu vou precisar excluir e como é que eu vou fazer isso bom eu vou fazer isso e eu vou pegar Aqui ó document P get Element by ID E aí se você for ver quando eu carreguei a Playlist quando carregar a Playlist aqui carregar todas essas tags paragraphs aqui eu dei para cada uma delas o ID igual ao ID da

música beleza igual ao ID da música aqui o que que eu vou fazer igual ao ID da música Então eu vou só botar aqui ó song ID com isso aqui eu já vou recuperar tag paragraph porque as únicas Tags e essas tags aqui são as únicas que tem esse id e cada uma tem um ID diferente um correspondente a uma música sacou beleza get elements by ID song ID então com isso aqui ele vai recuperar um elemento que nem a gente veio fazendo até então só que eu nem preciso guardar ele numa variável o que

eu quero é recupero esse elemento remove ele e é isso tá aqui recupero esse elemento remova ele é isso que eu vou fazer E aí repara só eu vou pegar essa função aqui Por sua vez remove from playlist e eu vou tá vendo aqui que a gente tem a tag do botão aqui que está sendo renderizado para cada uma dessas linhas né eu vou botar aqui uma nova propriedade nele um novo atributo aqui on Click tá bom um clique E aí você tá dizendo aqui qual é o comportamento que você quer que ele tenha no

momento que ele for clicado o botão você pode definir aqui qual é o comportamento que você quer que esse botão tenha quando Ele for clicado e aqui no meu caso faz todo o sentido porque o que eu quero que ele faça é executa essa função pro ID pro ID da música atual então saca só aqui no caso na verdade ele executou para todo mundo né eu fiz errado o que você tem que fazer é o seguinte você tem que botar isso entre aspas você pode botar isso em entre aspas E aí Beleza e não pessoal

aqui eu cometi um aqui eu cometi um erro eu esse cifrão aqui não tem que tá aqui não porque esse cifrão não tem que tá aqui não ele tem que tá aqui dentro ele tem que tem que mesclar só o conteúdo da só o conteúdo do id só o valor do id não o não tudo não a execução da função porque o que acontece quando você coloca isso aqui quando você coloca isso aqui isso aqui é uma expressão em JavaScript seja Sei lá uma função para ser executada ou uma operação de soma que seja ou

até mesmo aqui isso aqui que ele quer pegar um valor o que que ele faz ele resolve o JavaScript ali de dentro e aí depois ele resolve o JavaScript el de dentro e aí depois pega esse resultado E aí coloca ali junto do texto sacou coloca ali junto do texto só que como eu tava botando isso aqui englobando toda a função ele tava executando toda a função ele tava executando a função executar Função ele fazia com que aquele elemento fosse removido da playlist agora não agora tá tudo certinho com isso aqui eu tenho aqui a

minha playlist sendo montada se você for ver ó apertando aqui f12 apertando aqui f12 selecionando essa ponteira aqui e colocando nessa linha você consegue ver as propriedades dessa tag aqui e aí aqui ó a tag tem o ID zer tem aqui as classes que a gente colocou tá vendo aqui e quando você clica ela Some Beleza então tá aqui tá funcionando tá certo ó vou remover aqui da playlist tá funcionando isso aqui é muito legal só que agora a gente precisa fazer o comportamento de adicionar a Playlist também faz sentido vamos lá tá aqui se

a gente fez essa função aqui ó function remove from playlist aqui a gente vai fazer function add to playlist beleza e vai botar aqui o de novo porque a gente vai adicionar uma Música a partir do id dela a qual vai ser o processo o playlist você consegue fazer o seguinte você consegue usar esse método essa ação associada ao Array aqui push para colocar um elemento lá e colocar um elemento no fim do Array sacou então como isso aqui a gente consegue push botar aqui um elemento qual elemento Qual música Bom primeiro de tudo a

gente não vai ficar botando música repetida na playlist a gente não vai ficar botando Música repe na playlist se a música já estiver ela não precisa ela não deve estar lá de novo então o que que eu vou vou fazer eu Primeiro vou fazer o seguinte F se a Playlist se a Playlist aqui ó se ela tiver uma música tal que o ID da música seja igual a esse ID que eu passei aqui para essa Função se ela ou seja se essa música já já existir na playlist se já existe na playlist então eu vou

retornar eu não vou executar nada beleza caso contrário Ou seja caso a música não esteja na playlist eu vou pegar esse Array e vou colocar aqui ó push beleza aqui eu tô fazendo push eu vou botar essa essa música aqui aí qual vai ser qual vai ser a música que eu vou colocar bom então qual vai ser a música que eu vou colocar eu vou vir aqui vou Pegar as músicas que eu tenho disponível aqui as songs tá então eu vou adicionar aqui a música que música lá do meu Array de músicas disponíveis ali na

tela que é o songs eu quero achar a música x que tem a música x que tem o ID dela e igual a esse ID que eu vou passar aqui só que aí tem um detalhe esse ID que eu tô passando ele é um número Só que a gente registrou esse ID como a gente registrou esse ID como texto tá vendo a Gente registrou esse ID como texto muitas vezes o JavaScript sabe lidar com isso ele sabe se resolver com isso ele sabe assim pô eu tô comparando o número com Tex deixa eu converter um

para deixa eu converter um pro outro assim para poder fazer uma comparação igual porque eles são Dados diferentes sacou o texto zero é diferente do número zer e mas aqui não tá sendo caso aqui não é o caso Então o que eu vou fazer é o seguinte eu vou usar aquele esquema Esperto de aquele esquema esperto de escrever texto com aspas porque aqui dentro eu posso colocar o valor de uma variável aí eu coloco isso aqui isso aqui virou um texto com o valor dessa variável agora ele tá comparando as coisas certas beleza com isso

aqui ele consegue com isso aqui ele consegue adicionar a música Ali no Array de no Array das playlists e por fim ele vai fazer um processo muito parecido com essa aqui ó Com esse aqui do load playlist só que ao invés de fazer várias vezes né fazer repetição ele vai fazer uma vez só essa uma vez só vai ser para adicionar a música que ele acabou de colocar Então é isso aqui mais ou menos que a gente vai fazer isso aqui ó é isso aqui mais ou menos que a gente vai fazer a gente vai

pegar aqui vai adicionar Deixa eu fazer o seguinte Deixa eu guardar essa música aqui ó HST song to add né a música a ser adicionada eu vou colocar isso aqui numa variável E aí beleza eu vou achar ela né dentro do meu Array de músicas disponíveis e já vou guardar ela dentro de uma variável Beleza então aqui eu tenho uma música em específico aqui eu tenho uma música esp aqui eu tenho uma música específica Então vamos lá ao invés de fazer esse processo aqui eu fiz o processo fora eu já tenho guardado dentro de uma

variável Aí eu vou falar ó no meu Array de playlist adiciona essa música aí que eu já guardei dentro dessa variável que eu achei e guardei beleza e isso aqui vai ser relevante por quê Porque tendo essa variável aqui eu também vou fazer o seguinte agora eu vou adicionar as informações dela na minha listagem de playlist e vai ser M vai ser a mesma coisa só que ao invés de ser um Array aqui ó playlist index vai ser a minha variável song to add sacou porque aqui Eu já separei uma música específica aqui era a

música específica para cada uma das repetições lá do laço Então é só eu apagar isso aqui e colocar S toed Pronto agora eu tô adicionando essa música e eu tô adicionando esse elemento aqui essa tag lá na minha listagem com base com base nas informações da minha música que vai ser adicionada mesma coisa aqui ó todo lugar que tiver desse aqui playlist ind se eu vou apagar porque essa lógica não é válida para esse caso aqui que eu Quero adicionar uma música só aí eu apaguei troquei pra música ser adicionada isso aqui é o documento

da música Beleza isso aqui remove isso aqui resolve Tá bom agora então eu tenho uma função para adicionar essa música playlist mas como é que eu vou fazer para colocá-la de fato para colocar fala de fato na playlist eu vou pegar isso aqui essa função add to playlist e repara o que que eu fiz aqui quando eu tava carregando a Playlist eu não peguei O botão botei esse atributo aqui um clique E aí botei uma referência PR Nossa função né já indicando Ó você vai executar essa função pro ID da música que você tá carregando

ali a gente vai fazer a mesma coisa o mesmo processo só que no card Cadê load Library a gente vai fazer o mesmo só que no card tem esse botão aqui de adicionar música A gente vai pegar aqui ó on click a gente vai botar aqui add to playlist Cadê não é aqui add To playlist Edit playlist e aqui a gente vai fazer o seguinte cifrão abre e fecha aspas e a gente vai botar song index ponto ID com isso aqui a gente tem esse botão aqui cada um daqueles botões de adicionar música e tendo

essa informação aqui de que ao clicar nele você deve chamar essa função ads to playlist Só Que essa função sendo sendo executada pro ID da música é isso ele pega o ID da música ele avalia aqui ó ah das minhas músicas disponíveis Qual é que tem esse ID Qual é que tem esse D bom no caso ele faz antes uma avaliação Para ver se tem eh se essa música já existe na playlist se existir ele nem tenta executar nada mas se não existir ele vai ver das músicas que existem disponíveis Qual é a que tem

esse ID Ah tá é essa aqui aí já pegou e salvou numa variável song to AD Adicionou lá no Array playlist e também vai adicionar o elemento aqui beleza isso faz com que ó eu tenho a minha playlist aqui com essas quatro músicas se você for ver ar mon e track Dri eu não tenho essa aqui essa última por exemplo canide vou clicar aqui agora não tenho ainda aqui eu vou só colocar essas aspas aqui tá bom eu vou só colocar essas aspas porque aí e na verdade colocando essas Aspas eu nem preciso fazer isso

aqui porque eu já Estou passando esse parâmetro como uma string eu já tô passando esse parâmetro como texto texto em JavaScript se chama string tá bom e da mesma forma que eu tô tratando isso aqui como string que eu tô passando a versão texto dessa desse ID texto corrido desse ID já que eu botei ele entre aspas aqui tá vendo entre aspas eu vou fazer a mesma coisa com o botão com o botão de adicionar na playlist tá vendo ele tá chamando a função de adicionar na l e essa função Por sua vez tem que

passar a versão texto desse D passou aqui beleza salvei vamos lá aqui eu tenho essas quatro músicas aqui na minha playlist vou clicar aqui e pessoal só um comentário aqui eu tinha cometido um pequeno erro aqui que é o seguinte nesse ponto aqui quando eu faço esse playlist ponto eu não queria botar aqui Filter Eu queria botar find Porque como é que o find funciona Ele vai tentar essa música vê se essa música existe na Playlist E aí se ele conseguir ele vai entregar o documento da música Se ele não conseguir ele vai dar que

é falso e o falso bom Como é que o wif funciona o wif vai avaliar se isso aqui é verdadeiro ou falso se for falso ele não vai executar os comandos Associados a ele que no caso aqui é o return ele vai pular pros comandos que existem depois fora dele que são esses aqui se desse fora diferente de falso que era o caso ele ia só retornar aqui e a matar a Execução da função Beleza então o find é o que é o que se comporta do jeito que a gente quer que é Mata a

execução da função se essa música já existir na playlist beleza tá um outro detalhe é o seguinte aqui Você tá vendo que ó o processo de botar esse um clique no botão ele tem dois ele tem você tem que ter dois cuidados com ele um deles é o nome da função tem que tá entre aspas beleza nome da função tem que tá entre aspas só que o o meu o nome da minha Variável também tá entre aspas porque eu tô passando ela como texto né eu tô garantindo que ela vai aparecer não como número mas

como texto Então eu não posso botar ela eu não posso usar o mesmo tipo de aspa aqui ó eu tava usando aspas duplas aqui e aspas duplas aqui de novo se eu usar aspas duplas com aspas duplas ele vai achar que é uma que é um texto que começa aqui e termina aqui sacou eu tenho que tomar esse cuidado de usar aspas duplas E se eu quiser usar Internamente aspas de novo eu vou usar aspas simples é isso aqui beleza com isso aqui ajustado eu vou até dar uma olhada para ver se eu já cometi

esse erro em algum outro lugar aqui não aqui aspas duplas aqui aspas duplas aqui eu colocaria aspas simples e aspas simples também beleza aqui load Library aqui tá aspas simples né Deixa eu botar aspas duplas no externo sempre e aspas simples no interno sempre que eu acho que é bom padronizar que aí resolve O problema tá Eu tô adicionando essa funcionalidade no load Library no load playlist e no Edit playlist toda vez que eu crio um elemento com o JavaScript que tem um botão tá vendo eu tô criando um elemento que tem um botão junto

pelo JavaScript Eu tô tomando cuidado e São nesses três lugares né quando eu carrego a biblioteca que tem os cards que tem o botão de adicionar na playlist que tem eu tô quando eu carrego a lista lá da Playlist que tem o botão de remover o elemento da playlist e o a função que adiciona um elemento em particular a Playlist Beleza então tá bom isso aqui isso aqui deve me permitir com o seguinte deve me permitir que ó eu tenho aqui a minha biblioteca vou clicar aqui eu tenho quatro músicas aqui carregadas as quatro primeiras

eu vou clicar aqui ela veio para cá eu adicionei essa música E aí agora eu cliquei aqui e eu exclui essa música então beleza com isso Aqui eu tenho aqui o meu gerenciador de gerenciador de playlist eu tenho aqui a minha busca da música Eu tenho aqui toda essa estrutura O que é muito legal na verdade isso aqui tá bem bacana o único detalhe é o seguinte você tá vendo aqui eu adicionei todas as músicas eu vou atualizar a página e vou abrir aqui de novo Essas músicas não estão registradas por que isso porque o

porque isso aqui está sendo regido por inicialmente por esse Array aqui Play list e não é o que eu queria né Eu queria que ele tivesse memória que ele lembrasse disso felizmente tem um recurso muito bacana que a gente pode utilizar que é o seguinte o navegador ele tem um armazenamento próprio e esse armazenamento é o navegador tem um armaz armazenamento próprio e a gente pode usar esse armazenamento para eh a gente pode usar esse armazenamento para registrar essas músicas lá e deixar Elas salvas para que elas sempre sejam lembradas e como é que eu

vou fazer isso aqui então o que a gente pode fazer é o seguinte a gente pode usar esse armazenamento local do navegador que você vai acessar com f12 f12 vai abrir essas essa janela aqui o Dev Tools e aqui na São de aplicação você vai ter aqui ó local Storage Beleza então tem aqui ó chave e valor você consegue armazenar isso aqui isso aqui é um banco Zinho de dados do seu navegador beleza Aí eu vou fazer o seguinte ó eu vou fazer o seguinte no momento em que eu atualizar a minha playlist no momento

em que eu atualizar a minha playlist Ou seja no momento que esse Array for atualizado eu vou fazer isso aqui ó vou criar uma função function chamada de update local Storage beleza atualiz oaz local e aação vai fazer ointe amazenamento local que o que o JavaScript conhece tá aqui ó local Storage pon set item set item e ele vai fazer o seguinte ó eu vou dizer qual é o nome desse dessa informação que eu vou guardar lá nesse armazenamento do navegador eu vou chamar de playlist e o valor dele e o valor dele vai ser

a minha playlist atual Beleza então eu salvei aqui agora tenho essa função mas quando é que eu quero executar eu quero executar ela toda vez que a Playlist for atualizada e quando a Playlist é Atualizada quando eu adiciono ou quando eu removo um elemento concorda comigo então quando eu adiciono ou quando eu removo um elemento eu vou colocar aqui depois update local Storage e update local Storage Beleza só um comentário aqui uma coisa que é importante eu bot se você se você for ver eu escrevi update local Storage essa função aqui embaixo Mas eu tô

usando ela em funções que vem antes como é que isso é possível se o código é Lido de cima para baixo eu tô tentando executar uma função que tá mais abaixo ela ainda não foi definida Mas isso é porque o navegador Ele lê esse código mais uma vez a primeira vez ele assimila tudo quanto é função função ele sabe que essa aqui existe essa aqui existe essa aqui existe então quando ele tá tentando executar essa função aqui ele já sabe que essa local Store update local Store por exemplo tá aqui embaixo ele já conhece essa

definição beleza isso aqui É só para esclarecer essa dúvida essa possível dúvida Então tá agora eu fiz com que seja a função de remover uma música da playlist ou de adicionar uma música da playlist ela atualiza o esse cara no local Storage segundo isso aqui ó eu peguei o local Storage que é esse armazenamento do navegador e disse que defina esse item que vai ter esse nome aqui playlist e o valor dele vai ser just ente o meu Array playlist beleza vamos lá então vamos fazer o Seguinte tem aqui a Playlist de quatro elementos eu

vou excluir esse elemento aqui playlist só que aí tem um detalhe viu que aqui ó Object Object Object Pois é o local Storage ele não lida muito bem com essas informações estruturadas assim ele lida bem sabe com o quê com texto texto e ponto então eu vou fazer uma coisa aqui eu antes de guardar esse valor eu vou fazer isso aqui ó Jason pon string Fy json P string fy então eu dei um string F aqui que é esse essa função associada a isso aqui que é esse recurso Jon tá bom esse recurso Jon que

significa JavaScript Object notation ou seja anotação de objeto do JavaScript aqui eu tenho essa eu tenho essa função de string F ou seja transforme em string um objeto mais complexo uma construção mais complexa e eu vou fazer exatamente isso eu tô mandando ele transformar em texto string texto corrido E antes de salvar lá no local Storage beleza e aí fazendo isso aqui ó eu tenho aqui a minha playlist tá vamos lá Vamos alterar a Playlist de novo você tá vendo aqui olha aqui como local sor ficou bonitinho ele tá aqui com dado totalmente estruturado tá

vendo ele sabe se resolver muito bem com esse dado aqui quando esse dado aqui chega para ele como texto beleza e aí o único cuidado que a gente tem que ter é o seguinte bom A gente tá com isso aqui salvo a gente quer recuperar para utilizar né p a gente tá salvando ali tá fazendo um save dessas tá fazendo um save dessas informações onde é que a gente vai carregar elas é simples Quando a gente tiver lendo o JavaScript pela primeira vez o navegador ele vai começar Ele vai tentar construir esse Array aqui o

playlist E aí ele constrói com esse valor padrão aqui que a gente marrou vamos fazer o seguinte vamos botar isso Aqui ó local Storage pon get item beleza local Storage P get item e o que que ele faz então eu posso usar esse get item eu vou dizer aqui o nome do item que eu quero recuperar do armazenamento local do meu navegador aqui no caso ó vocês estão vendo aqui playlist é aqui o nome do item daqui a chave dele playlist O valor é isso aqui aí eu quero recuperar só que lembrando ele tá salvo

como um texto por mais que Tenha ali um texto com cara de Array ainda é um texto Então eu tenho que pegar isso aqui eu tenho que pegar esse cara aqui e eu tenho que fazer o seguinte ó Jason ppce parce é o oposto do string F se o string F transforma em string a partir de um dado estruturado o passe ele vai pegar a string e vai transformar num dado estruturado de volta Beleza então isso aqui vai me devolver um Array só que pode existir a possibilidade de eu Estar usando o sistema pela primeira

vez eu não ter ali registrado no meu no meu Storage no meu armazenamento do navegador nesse caso eu vou usar isso aqui ó essa interrogação Dupla ela faz Exatamente isso ela vai avaliar se isso aqui existe se existir beleza é isso que ela vai jogar dentro dessa variável aqui dentro desse Array se não vai se não existir ela vai pegar e vai jogar esse Array aqui então essa aqui é meio que a minha condição de segurança sacou o cara Não tem nada eu tentei recuperar o o o eu tenho que recuperar a Playlist dele lá

do armazenamento do navegador e ele não tem nenhuma playlist salva não tem problema Coloca essa playlist padrão aqui sacou beleza com isso você vai ver que ó vou adicionar aqui um elemento adicionei ele apareceu aqui já no local Storage abri aqui apareceu aqui can Hide né Você viu que esse aqui é o último agora eu vou até botar esse Boom back Flick aqui apareceu no navegador cliquei aqui na playlist apareceu aqui beleza é apareceu aqui tá certo eu vou atualizar cliquei aqui na playlist e ela continua atual maneiro não é com isso a gente conclui

esse projeto e Olha que bacana a gente tem aqui um gerenciador das nossas músicas com um criador de playlist uma barra de busca seu primeiro projeto feito com Bootstrap e isso aqui é muito bacana muito legal aí eu te peço para deixar o like se você gostou de fazer Esse projeto e se você quer ver mais projetos dessa natureza se inscrever no canal para não perder mais nenhum vídeo da #programa e se você por acaso for e se você por acaso assistir os vídeos da hash e se você por acaso tiver o hábito de assistir

os vídeos da hashtag e consequentemente já fez o outro projeto que eu ensinei que é o do tocador de música Bom eu tenho uma surpresa para você e eu tenho certeza que você tava Imaginando isso aqui ao longo desse projeto a gente pode unir os dois vamos fazer isso com um pequeno ajuste a gente consegue fazer uma coisa muito legal vamos lá Primeiro de tudo esse é e esse momento aqui é o momento para você que fez esse projeto então para você que não fez e tá animado para ver como é que ficaria isso Putz

fica aí a minha recomendação dá uma olhada no nosso minicurso de desenvolvimento web com JavaScript aqui da hashtag publicado no Canal do YouTube e o link tá aqui na descrição O link tá aqui na descrição desse vídeo beleza nesse você vai aprender a fazer um tocador de música inspirado no do Spotify E aí agora eu vou fazer o seguinte bom tô falando aqui do tocador de música mas vamos fazer o seguinte ó deixa eu abrir aqui Ah aqui file Explorer eu vou juntar os dois projetos porque o tocador de música combina parece combinar perfeitamente com

o com o projeto que a gente acabou De fazer para isso eu vou criar mais uma pasta aqui e essa pasta vai ser aqui ó Ahã Player Tá bom vou criar a pasta Player aqui dentro criando a pasta Player aqui dentro eu vou fazer o seguinte eu vou pegar o meu HTML o meu CSS o meu JavaScript e vou puxar para dentro dessa nova pasta aqui Player que eu criei tá bom ou então o eu tenho o HTML o CSS e o JavaScript do meu tocador beleza eu tenho aqui também CSS o JavaScript do meu

tocador vamos ver o Que mais eu preciso dele ah as as imagens as capas das músicas eu já tenho agora eu preciso das músicas beleza pras músicas eu já tinha salvado aqui as músicas que eu ia precisar então eu vou só colocar aqui ó trazer para cá aqui a a minha pasta de músicas aqui também não é verdade ela tem que ficar dentro da interface musical Pronto agora sim ela tá dentro da minha interface é dentro da minha pasta base interface musical beleza com Isso aqui eu consigo fazer o seguinte eu tenho agora as músicas

dentro do meu arquivo eu tenho as músicas dentro do meu projeto e eu tenho os arquivos originais que eu fiz lá no minicurso o do tocador de música aqui dentro de uma pasta Player dentro da pasta desse novo projeto Beleza então agora eu tenho que me preocupar em como é que eu vou conectar eles primeiro de tudo vamos lá no HTML do player de música no HTML do player de música você vai ver aqui ó Esse caminho aqui já não é mais o caminho do arquivo JavaScript do arquivo JavaScript O que que você faz eles

estão juntos na mesma pasta então ponto barra script.js por ponto significa no lugar atual no lugar desse arquivo aqui E esse HTML aqui o do tocador de música tá na mesma pasta que o arquivo do JavaScript do tocador de música da mesma forma você quer pegar o CSS mesma coisa pon s. CSS beleza aqui você garante que eles estão sendo importados corretamente Tá bom Agora vamos lár você vai vir aqui e a Você tá vendo que ele tinha aqui também uma definição de uma playlist bom a gente até salva Playlist da mesma forma que é

uma coisa muito legal porque ele vai tentar recuperar playlist só que como ISO aqui tá salvo no navegador com esse mesmo nome a Playlist que a gente fez lá a play que a gente fez lá vai Serv a Playlist lá da interface vai ser salva com esse nome Playlist e aqui ele tá tentando recuperar lá do navegador um objeto chamado playlist como ele consegue beleza maravilha eu vou fazer só umas pequenas adaptações aqui ó tá vendo que aqui no tocador de música A gente tinha informação de se a música tinha sido curtida ou não então

a gente tem que saber se essa música foi curtida ou não na interface musical a gente não tem isso a gente não tem isso até então vamos colocar Opa vamos colocar beleza com isso aqui a gente já tem o com isso aqui a gente já tem o nome a gente já tem se a informação de se a música for curtida ou não que é uma funcionalidade que a gente vai precisar lá no player uma outra coisa que a gente vai precisar é o seguinte aqui a gente tem o nome do arquivo da capa Mas a

gente não tem o nome do arquivo da música Então deixa eu botar aqui ó s file Todo mundo tem que ter o nome s file aqui agora beleza aí s file vamos botar aqui ó file vamos até ó vamos até fazer aquele tru lá que eu ensinei vamos até fazer aquele truque lá que eu ensinei porque aí eu posso copiar em todo mundo de uma só vez s file Pronto agora todo mundo tem oo s file eu só tenho que preencher aí aqui do Como que é o nome do arquivo aqui que eu deixi na

P de mú é do I Wan know pmp3 beleza aqui é The Less I know the Better MP3 aqui é Live Forever pmp3 aqui é as youw pmp3 também né então Deixa eu aproveitar aqui e já asber pmp3 aqui é boombet Flick pmp3 e aqui é CDE pmp3 beleza e aqui então eu tenho o eu tenho objetos mais completos aqui descrevendo agora também as músicas o nome do arquivo de música beleza por que que isso aqui é importante porque eu preciso dessa informação lá no player de música então quando eu recuperar essa o O array

da playlist playlist tem que ter essas informações aqui que são importantes lá pro tocador beleza no como é que o tocador funcionava ele carregava as informações ali da tela com base nesse documento aqui ó esse ponto webp e pon MP3 já não são mais necessários por outro lado eu não tenho um nome só file eu tenho o nome eu ten um nome mais elaborado esse nome mais elaborado vai ser cover file e file se eu não me engano aqui ó song File e cover file beleza aqui ó cover vai ser cover file song vai ser

song file song name ainda é song name song name ainda é song name e Artist ainda é Artist beleza bacana isso aqui já tá coerente show imag Ah aqui caso as músicas a capa do disco não fica em images fica em images bar covers barra Beleza então agora ela fica em images bar covers tranquilo agora isso aqui parece ser Todos os ajustes que a gente tinha que fazer lá no tinha que fazer lá no player agora a gente tem que fazer só um pequeno ajuste no nosso HTML aqui no nosso HTML a gente vai fazer

o seguinte lembra que eu tinha comentado um rodapé eu vou voltar com esse rodapé lembra que bom eu vou voltar com ele tá eu vou voltar com ele aqui page page fter Ele nem tá aparecendo aqui tá aqui O rodapé só que repara o rodapé Ele só tá aparecendo quando eu desço lá para baixo eu tive esse problema também com o heer lembra e eu coloquei essa e eu coloquei esse Stick aqui resolveu o problema para mim lembra disso aqui eu coloquei um Stick top da mesma forma eu vou colocar aqui no rodapé ó classe

Stick borom e com a classe Stick borom eu Garanto que o rodapé vai estar sempre aqui mas mais do que isso eu quero botar uma coisinha Só no rodapé na verdade eu quero que esse rodapé seja um display Flex porque eu quero organizar ele como display Flex e essa altura eu sei que você já tá craque você já sabe que o display Flex tende a colocar os elementos como como linha certo um logo depois do outro eu vou pegar um botão eu preciso de um botão aqui vou pegar esse aqui esse aqui Serve Vou botar

aqui ele tem que fazer parte do rodapé Beleza vou botar esse botão aqui na verdade ficou esse o botão de fechar né vou pegar outro botão aqui ó esse botão aqui pode ser esse aqui perfeito esse botão aqui ó ele tem o estilo já que eu gostaria tipo esse aqui do playlist Só que eu não quero que ele fique desse lado eu quero que ele fique desse lado o display Flex ele tem por padrão o comportamento de linha né de Botar os elementos em linha um depois do outro eu vou fazer o seguinte eu vou

fazer ele botar em linha mas numa linha reversa comeando da direita indo pra esquerda então aqui ó para isso eu vou botar a classe Flex Row reverse Flex reverse faz isso aqui eu vou dar uma Marinha aqui no rodapé aqui eu vou dar uma Marinha no rodapé E aí por fim Eu não quero que esse seja um botão de playlist né E nem sequer que seja um botão que abra modal qualquer coisa dessa natureza eu quero que se botão seja tocar playlist pode ser só que aqui não vai ser esse ícone aqui né esse Icone

da playlist eu vou pesquisar um ícone de play aqui que me seja agradável aqui Play pode ser isso aqui Play cirle você vai pegar esse ícone aqui vai copiar ele aqui vai colocar ele aqui Ó vai colocar ele aqui quando eu coloquei aqui ó esse botão aqui de tocar playlist maneza beleza maneiro tá bom com isso aqui eu consigo fazer o seguinte eu agora vou botar um ID nesse botão id e o meu ID desse botão vai ser start Player start Player e eu vou pegar esse ID a partir da minha eu vou pegar esse

ID a partir do meu JavaScript aqui ó mais uma vez Ah start Player Button ele vai pegar pelo id start Player agora eu vou fazer aa function start Player beleza function Player Eu vou acessar esse objeto location H Se você passar aqui em cima vai te dizer que é ess aqui é o objeto responsável pela URL P endereço que você acessando e a usado Navegar para outras URL Beleza eu vou usar isso aqui para então eu posso sobrescrever Ele para ir para outras URL E qual é URL para qual eu quero ir é essa aqui

ó barra barra que é o nosso é o nosso diretório padrão barra Player barra tá bom isso aqui e aí por fim eu vou pegar aquele start Player Button ponto listener clique E aí agora eu vou botar start Player que que isso significa significa que no momento que eu clicar naquele Botão a URL vai ser atualizada Ou seja eu vou PR outra página a página do meu navegador a página do meu navegador não a página do meu tocador de música só que eu vou já tendo habilitado aqui jáo habilitado aqui todas as minhas músicas na

minha Play ó vou até deletar esse objeto aqui a gente vai montar ele de novo isso aqui playlist tá aqui beleza vou adicionar aqui um elemento bom tá aqui vou adicionar outro beleza Olha só tenho aqui a minha playlist e a minha Playlist você pode ver ela tem até aquelas informações de Light s file Não é vamos clicar aqui ó tocar playlist E aí beleza só o último comentário eu aqui eu tinha cometido um pequeno erro que era o seguinte aqui eu não tinha ess essa barra aqui essa barra aqui precisava existir Beleza ela tendo

ela existindo eu tô dizendo aqui qual é o caminho pros arquivos isso no no arquivo de JavaScript do tocador de música Era uma pequena alteraçãozinha que precisava Ser feita agora tendo sido feita bom eu tenho aqui a minha playlist certo eu vou por exemplo tirar essa música aqui e aí tirando essa música aqui eu vou clicar para tocar tá aqui funcionando tá aqui funcionando tudo certinho a nossa playlist tá aqui funcionando então a gente conseguiu integrar o Nossa interface musical e o nosso gerenciador de playlist com o nosso tocador de música a gente fez o

Nosso próprio player de música Super completo beleza gostou isso aqui é para você que já assistiu aquele outro assistiu aquele outro vídeo aquela outra série de vídeo e tá assistindo esse aí agora é um negocinho legal assim Beleza Espero que você tenha gostado eu deixo não esquece de deixar o seu like se inscrever no canal e eu vejo você no próximo vídeo valeu