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

O check do meu site apareceu sem estar marcado, diferente do da aula

Referente ao curso JavaScript na Web: armazenando dados no navegador, no capítulo Manipulando dados com DOM e atividade Mostrando os dados na tela

por Turi Pereira de Souza
| 147.8k xp | 95 posts
Nutricionista

Segue como está aparecendo no meu pc:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Segue o meu código para conferência do que está errado:

const taskListContainer = document.querySelector(".app__section-task-list");

let tarefas = [
    {
        descricao: "Tarefa Concluida",
        concluida: true
    },
    {
        descricao: "Tarefa Pendente",
        concluida: false
    }
]

const taskIconSvg = `<svg class="app_section-task-icon-status" width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" 
    fill="#FFF" />
<path
    d "M9 16.1719119.5938 5.57812121 6.9843819 18.9844L3.42188 13.4062L4.82812 12L19 16.17192"
    fill="#01080E" />
    </svg>`

function createTask (tarefa) {
    const li = document.createElement("li");
    li.classList.add("app__section-task-list-item")

    const svgIcon = document.createElement("svg");
    svgIcon.innerHTML = taskIconSvg;

    const paragraph = document.createElement("p");
    paragraph.classList.add("app__section-task-list-item-description");

    paragraph.textContent = tarefa.descricao

    li.appendChild(svgIcon)
    li.appendChild(paragraph)

    return li;
}

tarefas.forEach(task => {
    const taskItem = createTask(task);
    taskListContainer.appendChild(taskItem);
})
2 respostas
solução!
por Lorena Garcia
| 8323.6k xp | 12181 posts
Alura Scuba Team Suporte Educacional

Oi Turi, tudo bem?

Pelo código que você compartilhou, parece que você está criando corretamente as tarefas e adicionando os elementos na lista. No entanto, o ícone do check não está aparecendo corretamente.

Ao analisar o código, percebi que há um pequeno erro na definição do atributo "d" do path do ícone. Faltou um sinal de igual (=) antes da string de coordenadas. O código correto seria:

const taskIconSvg = `<svg class="app_section-task-icon-status" width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" 
    fill="#FFF" />
<path
    d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L19 16.17192"
    fill="#01080E" />
</svg>`

Além disso, verifique se o caminho para o arquivo SVG está correto. Certifique-se de que o caminho está apontando para o local correto onde o arquivo está armazenado.

Após corrigir esses pontos, recarregue a página e verifique se o ícone do check aparece corretamente.

Um abraço e bons estudos.

por Turi Pereira de Souza
| 147.8k xp | 95 posts
Nutricionista

Boa noite. Acabei resolvendo sem querer. Na verdade era o meu modo escuro que não estava deixando aparecer o ícone corretamente. quanto ao sinal de igual, ele estava lá. Mas por algum motivo não apareceu neste código.

Agradeço desde já pela atenção.