javascript and jquery

Question

javascript and jquery

Navigation

#1 by (0 votes)

0

A. Change the implementation of the click event applied to the list items,   to allow you to switch between "scratched" items, that is, if an item does not   is marked, the style for marking applies. If you are already   marked, this style is removed, so that it returns to normal.

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

C. Schedule a double-click event (dblclick) for   list. The item that is triggered with a double-click must be removed   permanently on the list. Do not modify the click functionality,   just create a new standalone 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 it for me I do not understand or at least tell me what kind of code each exercise uses.

javascript html jquery

asked by anonymous 29.09.2016 / 15:11

1 answer

Getting past mysql database record how to make an animation open and close before displaying the site?

score 0 · Answer 1

Below is an example with all 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>