Exercício: Montando um item de lista

Pratique o raciocínio do DOM sem precisar de uma página de verdade.

Este exercício roda num ambiente isolado, sem document de verdade, então em vez de criar o <li> na página, você vai devolver a string HTML dele, exatamente como o padrão criar → preencher → pendurar do Módulo 7. Complete a função itemHtml(tarefa), que recebe um objeto como { texto: "Estudar", feita: false }: se feita for false, devolva "<li>Estudar</li>"; se for true, envolva o texto com <s></s> (riscado), devolvendo "<li><s>Estudar</s></li>". Um template literal e um ternário resolvem tudo em uma linha.

Só tem um cuidado, e é o mais importante do exercício: o texto da tarefa foi digitado por uma pessoa, então pode conter < e > (alguém pode digitar <b>urgente</b> ou coisa pior). Montando uma string de HTML, esse texto não pode entrar cru: a função escapar(texto), já pronta no código, troca &, < e > por versões inofensivas (&, < e >), que o navegador mostra como texto. Passe tarefa.texto por ela antes de colocá-lo dentro do <li>.

itemHtml(tarefa) deve devolver a string do <li>, riscando o texto com <s> quando tarefa.feita for true. O texto da tarefa precisa passar por escapar() antes de entrar no HTML.

function escapar(texto) {
  return String(texto)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
}

function itemHtml(tarefa) {
  // tarefa = { texto: "Estudar", feita: false }
  // devolva "<li>Estudar</li>"
  // ou, se feita for true, "<li><s>Estudar</s></li>"
  // o texto veio de uma pessoa: passe tarefa.texto por escapar() antes de usar
}

🧩 Este é um exercício com correção automática — abra no app para completá-lo e verificar.

← Voltar ao índice do curso