Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Challenge-7 - Duvida

Boa noite, estou montando o projeto de challenge, porem estou com uma duvida referente ao meu codigo. Minha duvida seria referente ao dois botoes do dialog. Somente 1 está funcionando que seria para ver a roupa o segundo que seria na parte "digitar o email" está abrindo a caixa de dialog do primeiro button.

   <section class="produtos_gerais">
      <h2>Produtos que estão bombando!</h2>
      <div class="produtos">
        <div class="produtos_catalogo">
           <img src="./assets/Bolsa.png" alt="bolsa">
             <div class="produtos_descricao">
               <h6>Camiseta conforto</h6>
               <p>Multicores e tamanhos. Tecido de algodão 100%,<br> fresquinho para o verão. Modelagem unissex.</p>
               <p class="produtos_descricao_texto"> R$70,00</p>
               <button class="btn_open">Ver mais</button>
             </div>
             <dialog>
              <h4>E-mail cadastrado com sucesso!</h4>
              <div class="ll">
              <img src="./assets/Jaqueta.png">
              <div>
                <h5>Jaqueta Jeans</h5>
                <p>Modelo unissex oversized com gola de camurça.
                  Atemporal e autêntica!</p>
                  <hr>
              <p>R$150,00</p>
              <p>Vendido e entregue por Riachuelo</p>
              <hr>
              <h5>Cores</h5>
              <input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
              <input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
              <input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
               <h5>Tamanhos</h5>
               <input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
               <input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
              <input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
              <input type="checkbox" id="checkbox" placeholder="azul claro" size="30">
              <br>
              <button>aaa</button>
            </div>
            </div>
          <button>Fechar</button>
             </dialog>
            </div>
        <div class="produtos_catalogo">
            <img src="./assets/Calça.png" alt="bolsa">
              <div class="produtos_descricao">
                <h6>Calça alfaiataria </h6>
                <p>Modelo Wide Leg alfaiataria em linho. Uma peça<br> pra vida toda!</p>
                <p class="produtos_descricao_texto">R$180,00</p>
                <button>Ver mais</button>
              </div>
         </div>
       
        </section>
        <section class="produtos_gerais_secundario">
         <div class="produtos">
            <div class="produtos_catalogo">
               <img src="./assets/Jaqueta.png" alt="bolsa">
                 <div class="produtos_descricao">
                   <h6>Jaqueta Jeans</h6>
                   <p>Modelo unissex oversized com gola de camurça.<br> Atemporal e autêntica!.</p>
                   <p class="produtos_descricao_texto">R$150,00</p>
                   <button>Ver mais</button>
                 </div>
            </div>
        <section class="Newsletter">
          <div class="Newsletter_Secundaria">
            <h4>Quer receber nossas novidades, promoções exclusivas e 10% OFF na primeira compra? <br>Cadastre-se</h4>
             <div class="Newsletter_email">
               <form>
                <input type="email" id="email" placeholder="Digite seu  email" size="30">
               </form>
               <button class="btn_secundario">Enviar</button>
             </div>
             <dialog>
              <h4>E-mail cadastrado com sucesso!</h4>
              <p>Em breve você receberá novidades exclusivas da Meteora</p>
          <button>Fechar</button>
            </dialog>
        </div>
        </section>
   </main>
   <footer>
    <h4>2023 © Desenvolvido por Alura | Projeto fictício sem fins comerciais.</h4>
   </footer>
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <script src="./script.js"></script>
</body>
</html>
const swiper = new Swiper('.swiper', {
    speed: 400,
    spaceBetween: 100,
  });
const button = document.querySelector(".btn_secundario")
const button_2 = document.querySelector(".btn_open")
const modal = document.querySelector("dialog")
const buttonClose = document.querySelector("dialog button")
button_2.onclick = function(){
    modal.showModal()
}
buttonClose.onclick = function(){
modal.close()
}
button.onclick = function(){
  modal.showModal()
}
2 respostas

Consegui ja resolver!

solução!

Oi Christofferson!

Que bom que conseguiu resolver. Irei finalizar o seu tópico e qualquer outra dúvida você pode abrir um novo.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!