-1

A. Altere a implementação do evento click aplicado aos itens da lista, para permitir alternar os itens "riscados", ou seja, se um item não estiver marcado, aplica-se o estilo para marcar. Se já estiver marcado, retira-se este estilo, para que ele volte ao normal.

B. Crie um novo botão no HTML, com o texto "Limpar Concluídos". Programe o evento click deste botão para remover todos itens da lista que estiverem "riscados" por já terem sido marcados anteriormente pelo usuário, não afetando os demais itens.

C. Programe um evento de duplo-clique (dblclick) para os itens da lista. O item que for acionado com um duplo-click deve ser removido permanentemente da lista. Não modifique a funcionalidade de click, apenas crie um novo evento independente.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <title>Exercício 01</title>
</head>

<body>
  <h1>Lista de Tarefas</h1>

  <input id="texto" placeholder="O que precisa ser feito?">
  <button id="adicionar">Adicionar</button>
  <button id="limparTudo">Limpar Tudo</button>

  <ul id="lista"></ul>

  <script src="jquery-3.1.0.min.js"></script>
  <script>
  $('#limparTudo').hide()

  $('#adicionar').click(() => {
    const valor = $('#texto').focus().val()

    if (valor) {
      $('#limparTudo').show()

      $('#texto').val('')

      $('<li>')
        .text(valor)
        .appendTo('#lista')
        .click(() => $(event.target).css('text-decoration', 'line-through'))
    }
  })

  $('#texto').focus().keyup(() => {
    if (event.keyCode === 13) $('#adicionar').click()
  })

  $('#limparTudo').click(() => {
    $('#lista li').remove()
    $('#limparTudo').hide()
    $('#texto').val('').focus()
  })
  </script>
</body>

</html>

Alguém consegue fazer para mim não estou entendendo ou pelo menos mandar que tipo de codigo usa cada exercicio.

2
  • Sua a dúvida é em qual dos exercicios? poderia dar mais detalhes de qual parte tem dificuldades.
    – rray
    29/09/2016 às 13:13
  • no exercicio A como eu faço para selecionar o texto
    – Vinicios
    29/09/2016 às 13:19

1 Resposta 1

0

Abaixo um exemplo com as três solicitações funcionando.

Basta executar e testar.

$('#limparConcluidos').hide() // oculta o botão Limpar Concluídos
$('#limparTudo').hide()

  $('#adicionar').click(() => {
    const valor = $('#texto').focus().val()
    if (valor) {
      $('#limparConcluidos').show() // exibe o botão Limpar Concluídos
      $('#limparTudo').show()
      $('#texto').val('')
      $('<li>')
        .text(valor)
        .appendTo('#lista')
        .click(() => $(event.target).toggleClass('riscado')) // acrescenta ou remove a classe riscado
        .dblclick(() => $(event.target).remove()) // se der duplo clique, remove
    }
  })

  $('#texto').focus().keyup(() => {
    if (event.keyCode === 13) $('#adicionar').click()
  })

  $('#limparTudo').click(() => {
    $('#lista li').remove();
    $('#limparConcluidos').hide(); // oculta o botão Limpar Concluídos
    $('#limparTudo').hide();
    $('#texto').val('').focus();
  })
  
  
 // se clicar no botão limpar concluidos, remove todos os riscados 
 $('#limparConcluidos').click(() => {
     $('#lista li.riscado').remove();
 })
.riscado{
  text-decoration: line-through
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <title>Exercício 01</title>
</head>

<body>
  <h1>Lista de Tarefas</h1>
  <input id="texto" placeholder="O que precisa ser feito?">
  <button id="adicionar">Adicionar</button>
  <button id="limparConcluidos">Limpar Concluídos</button>
  <button id="limparTudo">Limpar Tudo</button>

  <ul id="lista"></ul>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 
</body>
</html>

1
  • Deu certo o código acima? 29/09/2016 às 19:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .