No código abaixo, é usada a classe "done" para riscar o item da lista, sendo que tal classe supostamente estaria constando no arquivo CSS. Porém, no CSS temos apenas a classe "task.done". Dessa forma, como o código abaixo pode funcionar?:
const concluirTarefa = (evento)=> {
const botaoConclui = evento.target
const tarefaCompleta = botaoConclui.parentElement
tarefaCompleta.classList.toggle('done') }
no final as ultimas classes do css é o done, pode se ver que ele so ativa o sublinhado quando esta entre o .task e o .check-icon.
.check-icon {
display: block;
padding: 1px;
width: 10px;
height: 10px;
background-color: transparent;
border-radius: 50%;
}
.task.done .check-icon { background-color: #0B2027; }
.content { margin: 0; }
.task.done .content {
text-decoration: line-through;}```
Então, mas o nome da classe seria "task.done", não? Ou no caso o "task" é só um comando para "done"?
eu não entendi direito a sua duvida, creio que você esteja se perguntando o pq da classe de não ser ter uma classe so chamada .done?
quando executamos a função que voce descreveu , nos habilitamos o .done, e no nosso arquivo de css o .task.done . content é habilidado deixando assim o sublinhado no texto e alterando o background do botao
bom pelo menos foi assim que entendi.
É, a minha dúvida é essa, sobre não ter a classe ".done". Para mim, o nome da classe deveria ser no JS ".task.done", pois é como ela está nomeada no CSS. Eu entendo que ela executa o sublinhado, só fiquei na dúvida do nome mesmo, porque nos cursos de HTML e CSS é dito que o nome de uma classe do HTML tem que ser igual no CSS para que elas possam se conversar. Pelo que estou entendendo, o ".task" na frente do ".done" é um comando adicional, só não sei para que.