Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

javascript

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Remoção, Delegação e Animação e atividade Removendo pacientes

por Leveditor
| 124.1k xp | 228 posts

Boa noite, como eu faço para pega todo o html e tipo guardar em uma variável ou algo do tipo?

eu fiz um card e quero que quando eu entrar na página e depois de 2 segundos ele apareça, já fiz um botão de fechar o card só falta fazer ele aparecer alguns segundos depois de iniciar a página, não consegui usar o setTimeout

HTML COM BOOSTRAP 4

<div class="container" id="div-father">
    <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="vancouver.jpeg" alt="Imagem de capa do card">
            <div class="card-body">
              <h5 class="card-title">Título do card</h5>
              <p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer preencher o conteúdo do card.</p>
              <a href="#" class="btn btn-primary" id="button">Fechar</a>
            </div>
          </div>
        </div>

JS

let botao = document.getElementById('button');



botao.addEventListener('click', function(){

    let divPai = document.getElementById('div-father');


    divPai.remove();
});
4 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Leveditor, tudo bem? Para isso você vai precisar um pouco de JavaScript.

O que você pode fazer é salvar esse HTML no localStorage de forma temporária, para que quando o usuário possa acessá-lo após carregar ou recarregar a página.

Algo do tipo:

const botao = document.querySelector('button')
botao.addEventListener('click', () => {
    const conteudo = document.querySelector('body')
    localStorage.setItem('conteudo', conteudo.innerHTML)
})

Dessa maneira ele vai salvar o HTML inteiro do body.

E depois quando a página for carregada você pode pegar do localStorage e setar no HTML do body novamente:

document.addEventListener('DOMContentLoaded', () => {
    const conteudo = document.querySelector('body')
    conteudo.innerHTML = localStorage.getItem('conteudo')
})

Só precisa mudar e adptar para seu cenário.

Espero ter ajudado.

por Leveditor
| 124.1k xp | 228 posts

muito obrigado, só não entendi alguns comandos que seria esses aqui 

('DOMContentLoaded', () =>

o que esse comando e seta faz?

e também não entendi esse aqui

localStorage.setItem
solução!
por Daniel Omnion
| 1014.4k xp | 1150 posts

O "DOMContentLoaded" se refere ao evento disparado quando a página terminou de carregar.

A seta é uma "Arrow Function", é uma forma de simplificar a criação de uma função, ele existe deste a versão ES6 do JavaScript

https://raphaelfabeni.com/es6-arrow-functions/

Por último, o localStorage é uma API do JavaScript utilizada para armazenar dados. Ela é a forma mais simples de guardar informações, os dados são gravados no formato chave - valor

https://tableless.com.br/guia-f%C3%A1cil-sobre-usar-localstorage-com-javascript/

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Boa Daniel, obrigado pela ajuda.

Fico feliz que tenha dado certo Leveditor, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.