Entrar Ainda não tem acesso?
13
respostas

[Projeto] Dúvida projeto

por Jéssica
| 19.7k xp | 18 posts

Bom dia Alura. Estou elaborando um simples projeto contendo os arquivos HTML, CSS e JavaScript, baseado nos cursos Alura, de mesmo tema. Para gerar um site funcional. Por ser muito extenso e com muitos arquivos, não consigo enviar todos de uma vez pelo fórum, para poder tirar dúvidas e verificar se está correto e quais alterações a serem feitas. Enviarei cada arquivo com o mesmo tema, favor verificar se estão relacionados corretamente e sua funcionalidade. Segue o arquivo html principal.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Projeto Casulo</title>
        <link rel="stylesheet" href="styletestecasulo.css">
  </head>
    <body>
        <nav class="cabecalho__apresentacao__container">
        <h1 class="titulo-apresentacao" href="#">Temperos da Prima</h1>
            <div class="search-container">
                    <input type="text" placeholder="Pesquisar..." class="search-input">
                    <button class="search-button">Buscar</button>
            </div>
        </nav>
        <h2 class="titulo-destaque">Aqui tem sabores para todos os gostos!</h2>
        <header class="cabecalho">
            <nav class="cabecalho_menu">
                <a class="cabecalho_menu_link_navegacao" href="exploraritens.html">Explorar Itens</a>
                <a class="cabecalho_menu_link_navegacao" href="login.html">Login</a>
                <a class="cabecalho_menu_link_navegacao" href="carrinho.html">Carrinho</a>
            </nav>
        </header>  
        <main>  
            <section class="nossos-produtos">
                    <ol class="apresentacao-produtos">
                        <li>Dry hub</li>
                        <li>Mix de especiarias</li>
                    </ol>
                <img class="imagem-principal" src="temperoscaseiros.png" alt=" fotos dos nossos temperos">
            </section>
                <div        class="apresentacao-contatos">
                    <a class="link-contato-navegacao" href="https://wa.me/5521987809825" target="_blank"class="whatsapp-button"> Nosso Whatsapp</a>
                    <a class="link-contato-navegacao" href="https://instagram.com/jessi"> Instagram</a>
                </div>
    </main>
<footer class="rodape">
    <p class="descricao">Somos uma empresa de temperos caseiros, que chegam a sua casa para saborizar e dar vida a seu alimento.</p>
    <p>Desenvolvido por JessicaNV.</p>
</footer>
        <script defer src="script.js"></script>
    </body>
</html>

Atenciosamente, Jessica NV.

13 respostas
por Jéssica
| 19.7k xp | 18 posts

Ainda sobre a dúvida do projeto: segue o arquivo html - explorar itens:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explorar itens</title>
    <link rel="stylesheet" href="styletestecasulo.css">
     <link rel="stylesheet" href="styleexploraritens.css">
    <link rel="stylesheet" href="stylelogin.css">
    <link rel="stylesheet" href="stylecarrinho.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho_menu">
            <a class="cabecalho_menu_link_navegacao" href="exploraritens.html">Explorar Itens</a>
            <a class="cabecalho_menu_link_navegacao" href="login.html">Login</a>
            <a class="cabecalho_menu_link_navegacao" href="carrinho.html">Carrinho</a>
        </nav>
        <main>
            <section class="nossos-itens">
                <input type="checkbox" id="checkbox-1"/>
                    <h2> 1) Dry hub</h2>
                        <div class="descricao-itens">
                            <p>Tempero seco, que combina ervas e especiarias; é composto por: páprica doce, defumada e picante, açafrão, açúcar mascavo, sal, chimichurri, lemmon pepper, sazón bacon, cominho.</p>
                        </div>
                        <img class="imagem-itens" src="Dry rub.jpg" alt="dry rub">
                        <p>100g R$ 5,50</p>
                        <a class="cabecalho_menu_link_navegacao" href="carrinho.html">Adicionar ao carrinho</a>
                <input type="checkbox" id="checkbox-2"/>
                    <h2>2) Mix de especiarias em grãos</h2>
                        <div class="descricao-itens"></div>
                            <p>Composto por: pimenta do reino preta, pimenta do reino branca, pimenta rosa, pimenta jamaica, cominho, sal rosa do himalaia, coentro e cominho. </p>
                        </div>
                        <img class="imagem-itens" src="Mix de Especiarias.jpg" alt="mix de grãos">
                        <p>100g R$ 7,50</p>
                        <a class="cabecalho_menu_link_navegacao" href="carrinho.html">Adicionar ao carrinho</a>
            </section>
        </main>
    </header>
    <footer class="rodape">
     <p class="descricao">Somos uma empresa de temperos caseiros, que chegam a sua casa para saborizar e dar vida a seu alimento.</p>
        <p>Desenvolvido por JessicaNV.</p>
    </footer>   
</body>
</html>
por Jéssica
| 19.7k xp | 18 posts

Ainda sobre a dúvida do projeto, segue o arquivo html - login:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add ao carrinho</title>
    <link rel="stylesheet" href="styletestecasulo.css">

</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho_menu">
            <a class="cabecalho_menu_link_navegacao" href="exploraritens.html">Explorar Itens</a>
            <a class="cabecalho_menu_link_navegacao" href="login.html">Login</a>
            <a class="cabecalho_menu_link_navegacao" href="carrinho.html">Carrinho</a>
        </nav>
</body>
</html>
por Jéssica
| 19.7k xp | 18 posts

Ainda sobre a dúvida do projeto, segue o arquivo html - carrinho de compras: Nele solicito informar como faço para adicionar os itens que desejo adquirir.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carrinho</title>
    <link rel="stylesheet" href="styletestecasulo.css">
    <link rel="stylesheet" href="styleexploraritens.css">
    <link rel="stylesheet" href="stylelogin.css">
    <link rel="stylesheet" href="stylecarrinho.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho_menu">
            <a class="cabecalho_menu_link_navegacao" href="exploraritens.html">Explorar Itens</a>
            <a class="cabecalho_menu_link_navegacao" href="login.html">Login</a>
            <a class="cabecalho_menu_link_navegacao" href="carrinho.html">Carrinho</a>
        </nav>
    </header>
    <aside class="cart">
        <h2>Carrinho de Compras</h2>
        <ul>
            <li>Produto 1 - R$ 50,00</li>
            <li>Produto 2 - R$ 75,00</li>
        </ul>
        <p>Total: R$ 125,00</p>
        <button>Finalizar Compra</button>
    </aside>
    <footer class="rodape">
        <p class="descricao">Somos uma empresa de temperos caseiros, que chegam a sua casa para saborizar e dar vida a seu alimento.</p>
        <p>Desenvolvido por JessicaNV.</p>
    </footer>   
</body>
</html>
por Jéssica
| 19.7k xp | 18 posts

Ainda sobre a dúvida do projeto, segue o arquivo CSS:

* {
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #E15628;;
}

.cabecalho__apresentacao__container { 
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 45px;
    background-color: #148b5e;
    top: 0;
    left: 0;
}

.cabecalho {
    background-color: #e18427;
    padding: 2% 15% 2% 15%;  
}
 
.titulo-apresentacao {
    display: flex;
    justify-content: space-around;
    color: #540804;
    font-size: 1,87rem;
}

.cabecalho__pesquisar__item {
    display: flex;
    justify-content: center;  
}

.cabecalho {
    background-color: #e18427;
    padding: 2% 15% 2% 15%;  
}

.cabecalho_menu {
    display: flex;
    justify-content: center;
    gap: 250px;
   
}

.cabecalho_menu_link_navegacao {
    font-size: 1,125rem;
    color: #821131;
    text-decoration: none;
    width: 50%;
   }

.dados-do-cliente {
    margin: 5%;  
}

.menu__container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 50px;
    background-color: lightsalmon;
}

.menu__itens {
    flex-direction: row;
    display: flex;
    justify-content: space-evenly;
    text-decoration: none;
}

.descricao-itens {
    display: flex;
    flex-wrap: wrap;
}

.imagem-itens {
    width: 30%;
    height: auto;
   }
   
.titulo-destaque {
    margin: 1%;
    color: #31E16F;
}

.nossos-produtos {
    margin: 3%;
    display: flex;
    width: 80%;
    flex-direction: row;
    gap: 250px;
    }
    
.apresentacao-produtos {
    gap: 5px;
    font-size: 20px;
}
   
.imagem-principal {
    width:  350px;
    height: auto;
    border-radius: 16px;
}   

.apresentacao-contatos {
    display: flex;
    justify-content: space-evenly;
}

.link-contato-navegacao {
    color: #821131;
    border: 2px solid;
    width: 150px;
    text-align: center;
    border-radius: 16px;
    font-size: 1,125rem;  
    padding: 16px;   
    text-decoration: none;  
}

.link-contato-navegacao:hover {
    background-color: #5c4d4d;
}

.rodape {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: aqua;
    text-align: left;
    color: #272727;

}
.descricao {
    width: 800px;
    font-size: 1,25rem;
    color: #01322e;
}

@media (max-width:800px) {
    .titulo-apresentacao {
        align-content: flex-start;
        flex-direction: column;
    }
    
    .cabecalho_menu {
        flex-direction: column;
        gap: 10px;
    }
      
    .apresentacao-contatos {
        flex-direction: column;
    }
por Jéssica
| 19.7k xp | 18 posts

E para finalizar o projeto, segue o arquivo em JavaScript: Neste foi o que fiquei com mais dúvidas na estrutura e em especial na funcionalidade.

const inputItem = document.getElementById("input-type")
const listaDeCompras = document.getElementById("checkbox");

console.log (inputType.value)
botaoAdicionar.addEventListener("click", (pesquisar));
    if (inputType.value === "")
    alert ("item nao encontrado")

const itemDaLista = document.createElement("li");
const containerItemDaLista = document.createElement("ol");
containerItemDaLista.classList.add("apresentacao-produtos");


const itemDaLista = document.createElement("li");
const explorarItens = document.getElementById ("explorar itens");
const containerItemDaLista = document.createElement ("div");
containerItemDaLista.classList.add ("nossos-itens");
const input checkbox = document.createElement ("input");
inputCheckbox.type = "checkbox"; 
inputCheckbox.id = "checkbox-" + contador++;
const nomeItem = document.createElement("p");
nomeItem.innerText = inputItem.value; 


const listaDeCompras = document.getElementById("lista-de-compras");
const botaoAdicionar = document.getElementById("adicionar-item");
botaoAdicionar.addEventListener("click", (evento)) => {
    evento.preventDefault();
if (inputItem.value === "") {
    alert("Por favor, insira um item!");
    return};
}

itemDaLista.appendChild(containerItemDaLista);
listaDeCompras.appendChild(itemDaLista);

const containerItemDaLista = document.createElement("div");
containerItemDaLista.classList.add("apresentacao-contatos");

Desde já desculpa confusão e agradeço a atenção. Jessica NV.

por Estudante
| 128.8k xp | 404 posts

Olá!

! A seguir, te dou alguns toques e explicações simples pra te ajudar a entender o que pode melhorar e como fazer seu carrinho funcionar melhor. Vamos por partes:

Sobre a estrutura dos arquivos HTML:

Todos os arquivos HTML que você enviou estão bem montados! Algumas pequenas correções e sugestões:

  1. Tag <h1> com href não existe. No seu HTML principal, está assim:

    <h1 class="titulo-apresentacao" href="#">Temperos da Prima</h1>

    ➜ O atributo href só funciona em tags <a>. Pode ser assim:

    <h1 class="titulo-apresentacao">Temperos da Prima</h1>

  2. No arquivo exploraritens.html:

    • Há um pequeno erro de organização: você colocou a tag <main> dentro do <header>, o que não é recomendado. ➜ Sugestão: mova o <main> para fora do <header>.

  3. No arquivo login.html:

    • Ele está vazio, sem conteúdo além do menu. Tudo bem se ainda estiver desenvolvendo, só lembre de fechar todas as tags. Está faltando o </header> e o </html>.
  • Sobre o CSS:

Seu CSS está funcionando, mas aqui vão alguns toques:

  • Fonte numérica com vírgula: no CSS está assim:

    font-size: 1,87rem;

    ➜ Deve ser com ponto:

    font-size: 1.87rem;

  • O rodapé está fixo na tela:

    position: fixed;
bottom: 0;

    ➜ Isso faz ele sempre aparecer no fim da tela. Se estiver atrapalhando a visualização do conteúdo, pode remover esse position: fixed.

  • Sobre o JavaScript:

Problemas encontrados:

  1. Variáveis duplicadas ou fora de ordem: Você está criando várias vezes a mesma variável (itemDaLista, containerItemDaLista, etc.).

  2. Nome de variáveis e elementos incorretos:

    • Está usando inputType mas declarou inputItem
    • Está tentando acessar elementos que não existem com getElementById("checkbox") (não há esse ID no HTML)

  3. Código bagunçado na ordem dos comandos: Os comandos estão fora de ordem e o botão botaoAdicionar é usado antes de ser declarado.

Sugestão de um código JavaScript mais simples (pra adicionar itens ao carrinho):

Antes de tudo, inclua no seu HTML (por exemplo em exploraritens.html) um botão com id="adicionar-item" e um campo input com id="input-item".

Exemplo HTML:

<input id="input-item" type="text" placeholder="Digite o nome do item">
<button id="adicionar-item">Adicionar ao carrinho</button>
<ul id="lista-de-compras"></ul>

Novo JavaScript:

const inputItem = document.getElementById("input-item");
const botaoAdicionar = document.getElementById("adicionar-item");
const listaDeCompras = document.getElementById("lista-de-compras");

botaoAdicionar.addEventListener("click", function(evento) {
    evento.preventDefault();

    if (inputItem.value.trim() === "") {
        alert("Por favor, digite o nome de um item!");
        return;
    }

    const itemDaLista = document.createElement("li");
    itemDaLista.textContent = inputItem.value;

    listaDeCompras.appendChild(itemDaLista);

    inputItem.value = ""; // limpa o campo
});

Esse código:

  • Pega o texto digitado;
  • Cria um novo item de lista (<li>);
  • Adiciona ele dentro da lista (<ul>);
  • Limpa o campo para digitar um novo item.

Você está indo super bem, Jéssica! Só precisa ajustar alguns detalhes.

por Jéssica
| 19.7k xp | 18 posts

Agradecida pelas dicas, Estudante.

por Victor Costa Santos
| 2316.6k xp | 4631 posts
Alura Scuba Team

Oi, Jéssica!

Sou do time de suporte educacional da Alura e estou aqui para te ajudar a avançar com o seu projeto. Primeiramente, parabéns pela iniciativa e pelo que já construiu!

Para que eu possa te dar um suporte mais preciso, principalmente na funcionalidade do JavaScript e do carrinho, é necessário que eu analise todos os seus arquivos funcionando em conjunto. Vendo os códigos separadamente, não consigo simular o comportamento real do seu site.

Talvez pode ser a primeira vez que você faz isso, então preparei um pequeno tutorial de como você pode compartilhar a pasta completa do seu projeto. Existem duas formas comuns, uma mais simples e outra que é o padrão do mercado de trabalho.

Como Compartilhar seu Projeto Completo

Você pode escolher a opção que achar mais confortável.

Opção 1: Usando o Google Drive (Caminho mais simples)

Por hora você pode compartilhar seu projeto comigo pelo Google Drive ou Github. Escolha uma e siga os passos:

1. Acesse o Google Drive e faça o upload da pasta

Abra-o no seguinte link:

Faça o login, caso necessário. Depois, clique em '+ Novo' no canto superior esquerdo e, em seguida, em 'Upload de pasta':

Botão 'Novo' no canto superior esquerdo da interface do Google Drive.

Menu de opções após clicar em 'Novo', com 'Upload de pasta' destacado.

Depois dessa tela, vai abrir o explorador de arquivos do seu computador. Selecione a pasta do seu projeto para que ela suba para o seu Drive.

2. Gere o link de compartilhamento

Com a pasta já no seu Drive, localize-a e clique nos três pontinhos (...) ao lado do nome. Depois, clique em 'Compartilhar' e novamente em 'Compartilhar'.

Interface do Google Drive mostrando uma pasta e o menu de três pontinhos com a opção 'Compartilhar' em destaque.

3. Deixe o arquivo público e copie o link

Na última tela, se atente em deixar o acesso geral como "Qualquer pessoa com o link" para que eu possa visualizar.

Janela de compartilhamento do Google Drive com a opção 'Qualquer pessoa com o link' selecionada.

Ao clicar em 'Copiar link', este link ficará disponível na sua área de transferência. Por fim, basta colar ele aqui no tópico (pode usar CTRL + V) e me mandar.

Opção 2: Usando o GitHub (Padrão do mercado de tecnologia)

O GitHub é a ferramenta mais utilizada por pessoas desenvolvedoras para guardar e compartilhar projetos. Se quiser aproveitar para aprender, este é um bom momento.

Crie uma conta: Acesse o site do GitHub e crie uma conta gratuita.

Crie um "Repositório": Dentro do GitHub, crie um novo repositório, procure por new clicando no seu perfil e depois em repositórios, ou nesse link:

Dentro do perfil e em repositório clicando no botão azul news

O repositório é como uma pasta online para o seu projeto. Dê a ele o nome do seu projeto, como "temperos-da-prima".

Criando o projeto, colocando o nome marcando como público e criando

Envie seus arquivos: Na página do seu novo repositório, haverá uma opção para "uploading an existing file" (enviar um arquivo existente). Você pode arrastar todos os arquivos do seu projeto para lá. Procurando pela palavra uploading an existing file, para enviar os arquivos E depois selecione os seus arquivos e pasta do projeto exemplo, nessa etapa é importante que você selecione, todos os seus arquivos e pastas e aguardem serem carragados antes de apertar commit changes:

Exemplo clicando em choose files e selcionando no explorador de arquivos Copie o link: Depois que os arquivos forem enviados, basta copiar o endereço que aparece na barra de navegação do seu navegador (a URL do repositório). Exemplo:

Imagem de uma URL de exemplo

Cole o link seu repositório aqui no fórum

Fico no aguardo do seu link para continuarmos.

Bons estudos!

Sucesso ✨

Imagem da comunidade
por Jéssica
| 19.7k xp | 18 posts

Agradecida Vitor! Segue o link: https://github.com/JessicaNV/Projeto-Temperos.

por Victor Costa Santos
| 2316.6k xp | 4631 posts
Alura Scuba Team

Olá Jéssica!

O projeto enviado por ti ainda falta alguns arquivos acredito eu . Ao abrir o código por aqui, temos esse resultado, se assemelha com o que tem na sua máquina? As imagens também não vieram:

Com isso, para maior clareza, optei por uma solução mais simples, que ilustra uma possível abordagem.

Tive que alterar algumas partes do seu código, pois estavam um pouco confusas e dificultavam dar continuidade. Por isso, preferi montar uma lógica mais simples, que fosse mais fácil de entender e que ainda assim resolvesse o que você queria: adicionar itens e depois vê-los no carrinho.

A funcionalidade que você tentou implementar , clicar em "Adicionar ao carrinho" e visualizar esse item em outra página (carrinho.html) — exige um passo que não é tão simples. Para isso funcionar, a página precisa "lembrar" o que foi escolhido anteriormente, mesmo depois de sair da tela, para isso tem várias formas.

Então, para deixar tudo mais direto, usei uma tecnologia chamada localStorage. Ele funciona como uma caixinha de armazenamento no navegador da própria pessoa, guardando os dados dos produtos sem precisar de um banco de dados de verdade ou servidor. Exemplo:

Como ficou a estrutura?

  1. Na página exploraritens.html
  • Cada produto agora tem um botão que chama uma função JavaScript ao ser clicado:
<button onclick="adicionarAoCarrinho('Dry hub', 5.50)">Adicionar ao carrinho</button>

2. No final do HTML (antes de fechar o </body>), colocamos o seguinte script:

function adicionarAoCarrinho(nomeItem, preco) {
  let carrinho = JSON.parse(localStorage.getItem("carrinho")) || [];
  carrinho.push({ nome: nomeItem, preco: preco });
  localStorage.setItem("carrinho", JSON.stringify(carrinho));
  alert(nomeItem + " foi adicionado ao carrinho!");
}

Esse trecho pega o carrinho salvo (ou cria um novo se ainda não tiver nada), adiciona o novo item e salva tudo de novo no navegador.

3. Na página carrinho.html, usamos outro script para pegar o que foi salvo e mostrar na tela:

const listaCarrinho = document.createElement("ul");
document.querySelector("main section.carrinho-compras").appendChild(listaCarrinho);

let carrinho = JSON.parse(localStorage.getItem("carrinho")) || [];

if (carrinho.length === 0) {
  listaCarrinho.innerHTML = "<li>Seu carrinho está vazio.</li>";
} else {
  carrinho.forEach((item, index) => {
    const li = document.createElement("li");
    li.textContent = `${index + 1}) ${item.nome}`;
    listaCarrinho.appendChild(li);
  });
}

Isso garante que o carrinho sempre carregue os itens salvos, mesmo que a pessoa tenha saído da página antes.

Uma prática comum em aplicações web é salvar informações no navegador. Para entender melhor e aplicar isso nos seus projetos, recomendo este curso da Alura, que aborda o tema de forma clara e com exemplos práticos. JavaScript: explorando a manipulação de elementos e da localStorage

Deixo o código completo aqui no github.

A adição ficou, simples, mas deixo como um pontapé para você ir estilizando, colocando as imagens corretas, e melhorando a lógica do carrinho que por hora só pega o nome do produto, mas com o tempo você vai refinando. Por isso recomendo o curso acima.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Imagem da comunidade
por Jéssica
| 19.7k xp | 18 posts

Oi Vitor, boa tarde. Ajudou muito. agradeço o retorno, atenção e explicações!

por Jéssica
| 19.7k xp | 18 posts

Vitor, fiz as correções e tudo funcionou bem. Tire-me outra dúvida: é possível interligar a opção de pesquisa ( na primeira página) com a de explorar itens? Daí quando pesquisar um produto, caso tenha apareça descrição dele. No carrinho de compras, acabei incluindo o item dry hub mais de uma vez, e preciso excluí-lo; tentei incluir este código, ele adicionou um botão remover ao lado do item que quero excluir, aparece a mensagem de item removido, mas não some as outras repetições do item. Segue o código:

Explorar Itens Login Carrinho 
<main>
<section class="carrinho-compras">
  <h1>Seu Carrinho</h1>
  <p>Itens adicionados ao carrinho aparecerão aqui.</p>
  <div class="cart">
  <div class="cart-item" data-id="1">
  <span>1) Dry hub</span>
  <button class="remove-btn">Remover</button>
  </div>
  <div class="cart-item" data-id="2"> 

  <!-- Lista dinâmica dos itens -->
</section>
</main>
<footer class="rodape">
    <p class="descricao">Somos uma empresa de temperos caseiros, que chegam a sua casa para saborizar e dar vida a seu alimento.</p>
    <p>Desenvolvido por JessicaNV.</p>
</footer> 


<script>
   const listaCarrinho = document.createElement("ul");
   document.querySelector("main section.carrinho-compras").appendChild(listaCarrinho);

// Pega os itens do localStorage let carrinho = JSON.parse(localStorage.getItem("carrinho")) || [];

   if (carrinho.length === 0) {
   listaCarrinho.innerHTML = "<li>Seu carrinho está vazio.</li>";
   } else {
   carrinho.forEach((item, index) => {
   const li = document.createElement("li");
   li.textContent = `${index + 1}) ${item.nome}`;
   listaCarrinho.appendChild(li);
    });
   }

   // Seleciona todos os botões de remover
const removeButtons = document.querySelectorAll('.remove-btn');

// Adiciona evento de clique a cada botão
removeButtons.forEach(button => {
  button.addEventListener('click', function () {
    const cartItem = this.parentElement; // Seleciona o item do carrinho
    cartItem.remove(); // Remove o item do DOM
    alert('Item removido do carrinho!');
  });
});

</script>    

Como faço para remover todos os itens repetidos?
por Victor Costa Santos
| 2316.6k xp | 4631 posts
Alura Scuba Team

Olá Jéssica!

Fico muito feliz que tenha conseguido fazer o carrinho funcionar! Peço desculpas pela demora no retorno.

Sobre sua primeira dúvida, a solução foi garantir que o item fosse removido não só da tela, mas também do localStorage. O que acontecia antes é que o botão "Remover" apenas escondia o item, mas ele continuava salvo.

Para resolver, reescrevi o código para que o botão "Remover" identifique o item na lista, o exclua do localStorage e atualize a página, garantindo que o carrinho mostre sempre o estado real.

Deixo abaixo o link para o código completo e funcional da carrinho.html:

Código completo da página carrinho.html

Sobre sua ideia de implementar uma pesquisa na página explorar-itens.html, preparei uma explicação direta de como fazer.

Adicione o campo de pesquisa no HTML

No arquivo explorar-itens.html, dentro da tag <main> logo no começo, adicione o código abaixo para criar o campo de pesquisa.

<div style="max-width: 600px; margin: 20px auto; text-align: center;">
  <input
    type="text"
    id="campo-pesquisa"
    placeholder="Pesquisar item..."
    style="width: 100%; padding: 10px; font-size: 16px; border-radius: 6px; border: 1px solid #ccc;"
  />
</div>

Organize os itens para a busca

Para o script conseguir filtrar os itens, cada um precisa estar dentro de um <div> com a classe item, como neste exemplo:

<div class="item">
  <h2>Dry hub</h2>
  <div class="descricao-itens">
    <p>Tempero seco, que combina ervas e especiarias; é composto por: páprica doce, defumada e picante...</p>
  </div>
  <img class="imagem-itens" src="https://..." alt="dry rub" />
  <p>100g R$ 5,50</p>
  <button class="botao-adicionar" onclick="adicionarAoCarrinho('Dry hub', 5.50)">Adicionar ao carrinho</button>
</div>

Crie a função de filtro com JavaScript

Adicione o script a seguir antes do fechamento da tag </body> no seu HTML. Ele irá filtrar os itens em tempo real conforme o usuário digita.

<script>
  function adicionarAoCarrinho(nomeItem, preco) {
    let carrinho = JSON.parse(localStorage.getItem("carrinho")) || [];
    carrinho.push({ nome: nomeItem, preco: preco });
    localStorage.setItem("carrinho", JSON.stringify(carrinho));
    alert(nomeItem + " foi adicionado ao carrinho!");
  }

  function filtrarItens() {
    const textoPesquisa = document.getElementById('campo-pesquisa').value.toLowerCase();
    const itens = document.querySelectorAll('.item');

    itens.forEach(item => {
      const nome = item.querySelector('h2').textContent.toLowerCase();
      const descricao = item.querySelector('.descricao-itens p').textContent.toLowerCase();

      if (nome.includes(textoPesquisa) || descricao.includes(textoPesquisa)) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  }

  document.getElementById('campo-pesquisa').addEventListener('input', filtrarItens);
</script>

Para facilitar, aqui está o link para o arquivo explorar-itens.html completo com todas as alterações:

Arquivo explorar-itens.html completo

Veja no link abaixo uma imagem do resultado da pesquisa na página:

Resultado da pesquisa

Espero ter ajudado! Bons estudos!

Sucesso ✨

Imagem da comunidade