1
resposta

[Projeto] continuando o projeto do curso !

boa tarde !

eu quis continuar o projeto, criei as paginas conforme o figma. e agora estou tentando usar o JS para automotizar.

travei na parte de publicar o projeto, e levar as informacoes que salvei no localstorage para o card que eu criei os elemento no JS. Como eu recupero essas informacoes salvas no local storage depois de criados os elementos` export function criarCard (nomeDoProjeto, descricaoDoProjeto, tagsDoProjeto, imagemPrincipal){ console.log("funcaoo criar card chamada")

const cardContainer = document.createElement ('div');
cardContainer.classList.add('container-card'); 

const cardDiv = document.createElement('div');
cardDiv.classList.add('card-projetos');

const imgDiv = document.createElement('div');
imgDiv.classList.add('imagem-projeto');

const imgProjeto = document.createElement('img');
imgProjeto.src = imagemPrincipal
imgProjeto.alt = "Pré-visualização do projeto"
imgProjeto.classList.add('imagem-principal')

imgDiv.appendChild(imgProjeto);
imgDiv.appendChild(cardDiv);


const descricaoProjContainer = document.createElement('div');
descricaoProjContainer.classList.add('descricao-projetos');

const tituloProjDescricao = document.createElement('h2');
tituloProjDescricao.textContent = nomeDoProjeto;
tituloProjDescricao.classList.add("titulo-projeto");

const textoProjeto = document.createElement('p');
textoProjeto.textContent = descricaoDoProjeto;
textoProjeto.classList.add('texto-projeto');


descricaoProjContainer.appendChild(tituloProjDescricao);
descricaoProjContainer.appendChild(textoProjeto);
cardDiv.appendChild(descricaoProjContainer);

const iconeDivContainer = document.createElement('div');
iconeDivContainer.classList.add('icones-projetos');

const iconeDivCodigo = document.createElement('div');
const iconeImgCodigo = document.createElement('img');
iconeImgCodigo.src = "img/code.png"
iconeImgCodigo.alt = "Código"
const pContagemCodigo = document.createElement('p');
pContagemCodigo.textContent = ""
pContagemCodigo.classList.add("icone-contagem");

iconeImgCodigo.appendChild(iconeDivCodigo);
pContagemCodigo.appendChild(iconeDivCodigo)


const iconeDivCompartilhar =document.createElement('div');
const iconeImgCompartilhar = document.createElement('img');
iconeImgCompartilhar.src = "img/share.png";
iconeImgCompartilhar.alt = "Compartilhar";
const pContagemCompartilhar = document.createElement('p');
pContagemCompartilhar.textContent = "";
pContagemCompartilhar.classList.add("icone-contagem");

pContagemCompartilhar.appendChild(iconeDivCompartilhar);
iconeImgCompartilhar.appendChild(iconeDivCompartilhar);

const iconeDivChat = document.createElement('div'); 
const iconeImgChat = document.createElement('img');
iconeImgChat.src = "img/chat.png"
iconeImgChat.alt = "Comentar"
const pContagemChat = document.createElement('p');
pContagemChat.textContent = "";
pContagemChat.classList.add("icone-contagem");

pContagemChat.appendChild(iconeDivChat);
iconeImgChat.appendChild(iconeDivChat);


const iconeDivPerfil = document.createElement('div');
iconeDivPerfil.classList.add("icone-perfil");
const iconeImgPerfil = document.createElement('img')
iconeImgPerfil.src = ""
iconeImgPerfil.alt = ""
const pUsuario = document.createElement('p');


iconeImgPerfil.appendChild(iconeDivPerfil)
pUsuario.appendChild(iconeDivPerfil)


iconeDivContainer.appendChild(iconeDivCodigo);
iconeDivContainer.appendChild(iconeDivCompartilhar);
iconeDivContainer.appendChild(iconeDivChat);
iconeDivContainer.appendChild(iconeDivPerfil);
cardDiv.appendChild(iconeDivContainer);

cardContainer.appendChild(cardDiv);

return cardContainer

}

` e salvei aqui no localstorage: Outro arquivo js

btnPublicar.addEventListener('click', async (evento) => {
evento.preventDefault()

const nomeDoProjeto = document.getElementById('nome').value;
const descricaoDoProjeto = document.getElementById('descricao').value;
const tagsDoProjeto = Array.from(listaTags.querySelectorAll('p')).map((tag) => tag.textContent);

try {
    const resultado = await publicarProjeto(nomeDoProjeto, descricaoDoProjeto, tagsDoProjeto, imagemPrincipal);
    localStorage.setItem('imagemPrincipal', imagemPrincipal)
    localStorage.setItem('nomeDoprojeto', nomeDoProjeto);
    localStorage.setItem('descriçaoDoProjeto', descricaoDoProjeto);
    localStorage.setItem('tagsDoprojeto', tagsDoProjeto);
 
    console.log(resultado);
    alert("Deu tudo certo!")

    location.href = "feed.html"

} catch (error) {
    console.log("Deu errado: ", error)
    alert("Deu tudo errado!");
}

})
1 resposta

Boa tarde Thales!

Para recuperar as informações guardadas no localStorage você pode fazer da seguinte forma:

let imagemPrincipal = localStorage.getItem('imagemPrincipal');

ou se preferir:

let imagemPrincipal = localStorage.imagemPrincipal;

Isso vai funcionar desde qualquer página no mesmo domínio e porta, por exemplo para todas as páginas em localhost:8080

Abraço!