2
respostas

[Projeto] Alguém pode me ajudar ! Eu travei e acredito que já deveria saber fazer isso.

Boa tarde! travei por aqui....se alguem puder me ajudar !Obrigado

Estava fazendo o curso de Js com async, promises e etc..

e travei nessa parte. gostaria de recuperar elementos salvos no local storage e colocar nesse card que criei. como faco isso ?

    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!");
    }

    })

aqui esta o card criado, para receber a informacoes salvas desde o local storage. fica feed.js

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

}   
2 respostas

Olá, Thales, como vai?

Para recuperar os dados do localStorage e utilizá-los no seu card, você pode pegar cada item salvo e passá-los como parâmetros para a função criarCard. Adicione no código algo como:

// Lembre de ajustar os nomes das variáveis para não conflitar com as já existentes
const nomeDoProjeto = localStorage.getItem('nomeDoprojeto');
const descricaoDoProjeto = localStorage.getItem('descriçaoDoProjeto');
const tagsDoProjeto = localStorage.getItem('tagsDoprojeto') ? localStorage.getItem('tagsDoprojeto').split(',') : [];
const imagemPrincipal = localStorage.getItem('imagemPrincipal');

// Cria o card com os dados recuperados
const card = criarCard(nomeDoProjeto, descricaoDoProjeto, tagsDoProjeto, imagemPrincipal);

Esse código busca os dados no localStorage e usa a função criarCard para criar o layout do seu projeto com as informações armazenadas. O método split(',') na linha de tagsDoProjeto serve para converter a string salva no localStorage de volta em um array.

Qualquer dúvida ou ajuste, o fórum está à disposição para ajudar!

Espero ter ajudado! Siga firme nos seus estudos!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Obrigado !

to quase conseguindo, estou com problemas para enviar a outra pagina .

eu consegui enviar para a outra pagina, porem com alguns erros de estilizacao.

Mas o o maior problema é que ele ta criando os cards tanto na pagina do feed, quanto na pagina que é para criar o projeto. nao entendi o motivo ainda

hahah ta dficil pra mim !obrigado pela ajuda