CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Greg Myers
Greg Myers

Reputation: 23

Saving To-Do list data to local storage with HTML

So if I want to save all the To-Do items in Local storage and retrieve when I restart the computer or refresh the page all the items come up on the page in their original order.?

//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");

});

//click on X to delete To-DO

$("ol").on("click", "span", function(event){
	$(this).parent().fadeOut(500,function(){
		$(this).remove();
	});
	event.stopPropagation();
});

$("input[type='text'").keypress(function(event){
	if(event.which === 13) {
		//grabbing the text typed
		var todoText = $(this).val();
		$(this).val("");
		//create a new LI and add to UL
		$("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
	}
});

$(".fa-plus").click(function(){
	$("input[type='text'").fadeToggle();
});
h1 {
	background: #2980b9;
	color: white;
	margin: 0;
	padding: 10px 15px;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: normal;

}

iframe {
	float: left;
}

ol {
	/* THE BULLET POINTS
	list-style: none;
	*/
	margin: 0;
	padding: 0;
	font-size: 18px;

}

body {

 background-color: rgb(13, 168, 108);

}

li {
	background: #fff;
	height: 30px;
	line-height: 30px;
	color: #666;
}

li:nth-child(2n){
	background: #d3d3d3;
}

span {

	height: 30px;
	width: 0px;
	margin-right: 20px;
	text-align: center;
	color:white;
	display: inline-block;
	transition: 0.2s linear;
	opacity:0;
	background: #e74c3c
	

}

li:hover span {
	width: 30px;
	opacity: 1.0;
}

input {
	font-size: 18px;
	width: 100%;
	padding: 13px 13px 13px 20px;
	box-sizing: border-box;
	border: 3px solid rgba(0,0,0,0);
	color: #2980b9;
	background-color: #e4e4e4;

}

input:focus {
	background: white;
	border: 3px solid green;

	/*OUTLINE OF INPUT BOX
	outlin: none; */
}

.fa-plus {
	float: right;
}


#container {
	
	width: 360px;
	margin: 60px auto;
	background: #d3d3d3;
	box-shadow: 0 0 3px rgba(0,0,0,0.1);


}

.completed {
	color: red;
	text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
	<title>ToDo List</title>
	<link rel="stylesheet" type="text/css" href="utd.css">
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	 <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

  </script>

</head>
<body>

	 <iframe src="http://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110" height="110"></iframe>


	<div id="container">
		<h1>To-do List <i class="fa fa-plus"></i></h1>
		<form id="task-list">
		<input type="text" placeholder="Add a To-Do" id="task">
	</form>
		<ol id="sortable">
			<li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
			
		</ol>
	</div>

	

<script type="text/javascript" src="Utd.js"></script>
</body>
</html>

Upvotes: 2

Views: 2739

Answers (3)

Ankur Mittal
Ankur Mittal

Reputation: 1

After making edits in browser, simply save the page as HTML with different file name. Your selected values will be saved.

Upvotes: 0

Twisty
Twisty

Reputation: 30893

Happy Holidays!

Your coding wishes are granted. This is a gift, to you, and you will have to be a good person and post better examples and remember that people are not here to write code for you.

There was a LOT of stuff lacking from your example.

  1. Add items to a list
    • Update local storage when items are added to a list
  2. Allow list to be sorted
    • Update local storage when list is updated
  3. Allow task items to be marked completed
    • Update local storage when items are completed
  4. Allow task items to be deleted
    • Update local storage when tasks are deleted
  5. Load locally stored tasks

I think that covers everything you wanted this script to do. Is it becoming more clear now?

Working Example: https://jsfiddle.net/Twisty/ae6oLr47/12/

HTML

<iframe src="https://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110"
height="110"></iframe>
<div id="container">
  <h1>To-do List <i class="fa fa-plus"></i></h1>
  <form id="task-list">
    <input type="text" placeholder="Add a To-Do" id="task">
    <button type="submit"></button>
  </form>
  <ol id="sortable">
    <li id="task-EXAMPLE"><span><i class="fa fa-trash"></i></span>
      <label>EXAMPLE</label>
    </li>
  </ol>
</div>

The first time this loads, there will be no storage, so we can read an examples from the HTML. As you will see, once you make an update, this will no longer be the case.

Q: Why the <button>?

A: <form> likes to have a submit button. It does not need it, yet having it will help a lot in ways I do not want to go into for this question.

JavaScript

$(function() {
  $("#sortable").on("click", function(event) {
    console.log(event.target);
    var $thatItem = $(event.target).parents("li");
    switch (event.target.nodeName) {
      case "SPAN":
      case "I":
        $thatItem.fadeOut(500, function() {
          $thatItem.remove();
          $("#sortable").sortable("refresh");
        });
        break;
      case "LABEL":
        $thatItem.toggleClass("completed");
        break;
    }
    setTimeout(function() {
      updateLocalStorage($("#sortable"));
    }, 500);
    event.stopPropagation();
  });

  $("#task-list").submit(function(event) {
    event.preventDefault();
    // Grabbing the text typed
    var todoText = $("#task").val();
    addListItem($("#sortable"), todoText, false);
    // Clear the text field
    $("#task").val("");
    updateLocalStorage($("#sortable"));
  });

  $(".fa-plus").click(function() {
    $("#task-list").fadeToggle();
  });
  $("#sortable").sortable({
    update: function(e, ui) {
      updateLocalStorage($(this));
    }
  }).disableSelection();

  function addListItem($t, s, c) {
    //create a new LI
    var $li = $("<li>", {
      id: "task-" + s.replace(" ", "_")
    });
    if (c) {
      $li.addClass("completed");
    }
    var $wrap = $("<span>").appendTo($li);
    $wrap.append($("<i>", {
      class: "fa fa-trash"
    }));
    $li.append($("<label>").html(s));
    $li.appendTo($t);
    $t.sortable("refresh");
  }

  function updateLocalStorage($list) {
    var tasks = {};
    $list.find("li").each(function(ind, elem) {
      var task = $(elem).text().trim();
      var completed = $(elem).hasClass("completed");
      tasks[task] = completed;
      if (typeof(Storage) !== "undefined") {
        localStorage.setItem("tasks", JSON.stringify(tasks));
      }
    });
  }

  if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
    if (localStorage.getItem("tasks") !== "undefined") {
      var localTasks = JSON.parse(localStorage.getItem("tasks"));
      // Grab stored tasks
      $("#sortable").find("li").remove();
      $.each(localTasks, function(task, status) {
        addListItem($("#sortable"), task, status);
      });
    }
  } else {
    // Sorry! No Web Storage support..
  }
});

You might see that there is very little of your original code left in here. There was just a lot of places to improve the code. I will discuss a bit briefly.

Click Events

Since we're basically listening for click events on the same parent, but want to do different things when specific elements are clicked, that are going to be dynamically created, we can make use of the event.target from the click event. If it's the span or the i that's clicked, we do one thing, if it's the label, another.

The setTimeout is just a way to create a delay in the operations from switch to updating. Otherwise the update will execute almost on top of the switch and will not see the changes to the list, this record no changes.

Submit Event

When you hit Enter or Return you're essentially submitting the form. Part of the reason to add a submit button. Instead of catching the keypress and trying to prevent this, why not just use the submit event to our advantage. This method will help on mobile browsers and such.

Sortable Update Event

When the list is sorted, and updated, we need to update that order in the local storage. Now is the time to do that.

Functions

I think these are pretty clear. You have an operation you will repeat many times, write a function.

Get Item

The last bit of code will load when the page is all ready. It will check for localStorage and check if there are tasks stored within. It will then populate the list with them.

Q: What's with the JSON.stringify()?

A: Yes, you can store stuff locally... only as String. This creates a string version of our object for storage.

Comment if you have other questions.

Upvotes: 2

Sarika Koli
Sarika Koli

Reputation: 783

//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");

});

//click on X to delete To-DO

$("ol").on("click", "span", function(event){
	$(this).parent().fadeOut(500,function(){
		$(this).remove();
	});
	event.stopPropagation();
});

$("input[type='text'").keypress(function(event){
	if(event.which === 13) {
		//grabbing the text typed
		var todoText = $(this).val();
		$(this).val("");
		//create a new LI and add to UL
		$("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
	}
});

$(".fa-plus").click(function(){
	$("input[type='text'").fadeToggle();
});
h1 {
	background: #2980b9;
	color: white;
	margin: 0;
	padding: 10px 15px;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: normal;

}

iframe {
	float: left;
}

ol {
	/* THE BULLET POINTS
	list-style: none;
	*/
	margin: 0;
	padding: 0;
	font-size: 18px;

}

body {

 background-color: rgb(13, 168, 108);

}

li {
	background: #fff;
	height: 30px;
	line-height: 30px;
	color: #666;
}

li:nth-child(2n){
	background: #d3d3d3;
}

span {

	height: 30px;
	width: 0px;
	margin-right: 20px;
	text-align: center;
	color:white;
	display: inline-block;
	transition: 0.2s linear;
	opacity:0;
	background: #e74c3c
	

}

li:hover span {
	width: 30px;
	opacity: 1.0;
}

input {
	font-size: 18px;
	width: 100%;
	padding: 13px 13px 13px 20px;
	box-sizing: border-box;
	border: 3px solid rgba(0,0,0,0);
	color: #2980b9;
	background-color: #e4e4e4;

}

input:focus {
	background: white;
	border: 3px solid green;

	/*OUTLINE OF INPUT BOX
	outlin: none; */
}

.fa-plus {
	float: right;
}


#container {
	
	width: 360px;
	margin: 60px auto;
	background: #d3d3d3;
	box-shadow: 0 0 3px rgba(0,0,0,0.1);


}

.completed {
	color: red;
	text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>ToDo List</title>
	<link rel="stylesheet" type="text/css" href="utd.css">
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	 <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

  </script>

</head>
<body>

	 <iframe src="http://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110" height="110"></iframe>


	<div id="container">
		<h1>To-do List <i class="fa fa-plus"></i></h1>
		<form id="task-list">
		<input type="text" placeholder="Add a To-Do" id="task">
	</form>
		<ol id="sortable">
			<li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
			
		</ol>
	</div>

	

<script type="text/javascript" src="Utd.js"></script>
</body>
</html>

//check of spec
$("ol").on("click", "li", function(){
$(this).toggleClass("completed");

});

//click on X to delete To-DO

$("ol").on("click", "span", function(event){
	$(this).parent().fadeOut(500,function(){
	//	$(this).remove();
	});
	//event.stopPropagation();
});

$("input[type='text'").keypress(function(event){
	if(event.which === 13) {
		//grabbing the text typed
		var todoText = $(this).val();
		$(this).val("");
		//create a new LI and add to UL
		$("ol").append("<li><span><i class='fa fa-trash'></i></span> " + todoText +"</li>")
	}
});

$(".fa-plus").click(function(){
	$("input[type='text'").fadeToggle();
});
h1 {
	background: #2980b9;
	color: white;
	margin: 0;
	padding: 10px 15px;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: normal;

}

iframe {
	float: left;
}

ol {
	/* THE BULLET POINTS
	list-style: none;
	*/
	margin: 0;
	padding: 0;
	font-size: 18px;

}

body {

 background-color: rgb(13, 168, 108);

}

li {
	background: #fff;
	height: 30px;
	line-height: 30px;
	color: #666;
}

li:nth-child(2n){
	background: #d3d3d3;
}

span {

	height: 30px;
	width: 0px;
	margin-right: 20px;
	text-align: center;
	color:white;
	display: inline-block;
	transition: 0.2s linear;
	opacity:0;
	background: #e74c3c
	

}

li:hover span {
	width: 30px;
	opacity: 1.0;
}

input {
	font-size: 18px;
	width: 100%;
	padding: 13px 13px 13px 20px;
	box-sizing: border-box;
	border: 3px solid rgba(0,0,0,0);
	color: #2980b9;
	background-color: #e4e4e4;

}

input:focus {
	background: white;
	border: 3px solid green;

	/*OUTLINE OF INPUT BOX
	outlin: none; */
}

.fa-plus {
	float: right;
}


#container {
	
	width: 360px;
	margin: 60px auto;
	background: #d3d3d3;
	box-shadow: 0 0 3px rgba(0,0,0,0.1);


}

.completed {
	color: red;
	text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>ToDo List</title>
	<link rel="stylesheet" type="text/css" href="utd.css">
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	 <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );

  </script>

</head>
<body>


	<div id="container">
		<h1>To-do List <i class="fa fa-plus"></i></h1>
		
		<input type="text" placeholder="Add a To-Do" id="task">

		<ol id="sortable">
			<li><span><i class="fa fa-trash"></i></span> EXAMPLE</li>
			
		</ol>
	</div>

	

<script type="text/javascript" src="Utd.js"></script>
</body>
</html>

Upvotes: 0

Related Questions