prukse10 Posted March 20, 2017 Share Posted March 20, 2017 Hello everyone, I am a bit of a novice so this may be an easy question that I can't figure out, but I am trying to include local storage in the code below. It is for a to do list but I want it to be able to store the changes made (entries added, removed, etc.). I looked at the local storage examples but I just cant figure it out. Any help would be appreciated. Thanks! <!DOCTYPE html> <html> <head> <style> body { margin: 0; min-width: 250px; } * { box-sizing: border-box; } ul { margin: 0; padding: 0; } ul li { cursor: pointer; position: relative; padding: 12px 8px 12px 40px; background: #eee; font-size: 18px; transition: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ul li:nth-child(odd) { background: #f9f9f9; } ul li:hover { background: #ddd; } ul li.checked { background: #888; color: #fff; text-decoration: line-through; } ul li.checked::before { content: ''; position: absolute; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; top: 10px; left: 16px; transform: rotate(45deg); height: 15px; width: 7px; } .close { position: absolute; right: 0; top: 0; padding: 12px 16px 12px 16px } .close:hover { background-color: #f44336; color: white; } .header { background-color: #f44336; padding: 30px 40px; color: white; text-align: center; } .header:after { content: ""; display: table; clear: both; } input { border: none; width: 75%; padding: 10px; float: left; font-size: 16px; } .addBtn { padding: 10px; width: 25%; background: #d9d9d9; color: #555; float: left; text-align: center; font-size: 16px; cursor: pointer; transition: 0.3s; } .addBtn:hover { background-color: #bbb; } </style> </head> <body> <div id="myDIV" class="header"> <h2 style="margin:5px">My To Do List</h2> <input type="text" id="myInput" placeholder="Title..."> <span onclick="newElement()" class="addBtn">Add</span> </div> <ul id="myUL"> <li>Hit the gym</li> <li class="checked">Pay bills</li> <li>Meet George</li> <li>Buy eggs</li> <li>Read a book</li> <li>Organize office</li> </ul> <script> var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) { var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); myNodelist.appendChild(span); } var close = document.getElementsByClassName("close"); var i; for (i = 0; i < close.length; i++) { close.onclick = function() { var div = this.parentElement; div.style.display = "none"; } } var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if (ev.target.tagName === 'LI') { ev.target.classList.toggle('checked'); } }, false); function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something!"); } else { document.getElementById("myUL").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) { close.onclick = function() { var div = this.parentElement; div.style.display = "none"; } } } </script> </body> </html> Link to comment Share on other sites More sharing options...
davej Posted March 20, 2017 Share Posted March 20, 2017 Is this your code or just some code example that you copied from somewhere? I would suggest that you begin with a simpler example of using local storage. https://www.w3schools.com/html/html5_webstorage.asp Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now