Edit and save input

I have a to-do list. What I want is, when I click on task, he is going to input after that I have "Save" button, but I don’t know how next, how to put back same saved task in list?

Also, I know I need to add ID of li, but how to add to every new li ID?

// add button and remove
$(function() {
  var listState = 'add';
  $('.add').on('click', function() {
    if (listState === 'add') {
      let list = $('.input').val();
      if (list !== '') {
        $('ul').append("<li><span><i class='fa fa-trash-o'></i></span>" + list + "</li>");
        $('.input').val('');
        $('ul').on('click', 'span', function() {
          $(this).closest("li").fadeOut(500, function() {
            $(this).remove();
            $('.input').val('');
          });
        });
        return false;
      }
    } else if (listState === 'edit') {

    };
  });
  //save button
  $(document).on('dblclick', 'li', function() {
    listState = 'edit';
    $('.input').val($(this).text());
    $('.add').html('Save')
  });
  $('.add').on('click', function() {
    $('.add').html('Add');
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>To Do List - Jquery</h1>
  <p><em>Click and delete</em></p>
  <form class="form">
    <label>Enter a new task:</label>
    <input class="input" type="text" placeholder="Enter your task">
    <button class="add">Add</button><button type="reset" class="reset">Clear</button>
    <ul>
      <li>

      </li>
    </ul>
  </form>

</div>

29 thoughts on “Edit and save input”

  1. Today, I went to the beach with my children. I found a sea shell and gave it to
    my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear
    and screamed. There was a hermit crab inside and it pinched her ear.

    She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!

    Reply

Leave a Comment