javascript and jquery

Asked

Viewed 280 times

-1

A. Change the implementation of the click event applied to list items, to allow you to toggle the "scratched" items, i.e., if an item does not is checked, the style to mark is applied. If already marked, this style is removed, so that it returns to normal.

B. Create a new button in HTML, with the text "Clear Completed". Schedule the event click this button to remove all items from the list which are "crossed out" because they have already been marked by user, not affecting the other items.

C. Schedule a double-click event (dblclick) for the items from list. The item that is triggered with a double-click must be removed permanently from the list. Do not modify the click feature, just create a new independent event.

<!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>

Someone can do for me I do not understand or at least send what kind of code uses each exercise.

javascript jquery html

  • Your question is in which of the exercises? could give more details of which part has difficulties.

  • in exercise A as I do to select the text

1 answer

0

Below is an example with the three requests working.

Just run and test.

$('#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>

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.