Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv='X-UA-Compatible' content='IE-edge'>
    <meta charset="utf-8">
    <link rel="stylesheet" href="toDoApp.css">
    <title>ToDoApp</title>
</head>
<body>
<div id="container">
  <h1>TO DO LIST</h1>
  <input id="newListItem" type="text"><button id="add">Add</button> 
      <ul id="list">
      </ul>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="toDoApp.js"></script>
</body>
</html>
 
body {
    font-family: 'Oswald', sans-serif;
}
#container {
    width: 420px;
    background-color:aliceblue;
    border-radius: 3px;
    padding: 0px 15px 0px 15px;
    margin: 10px auto;
    border: 1px solid #ddd;
}
h1 {
    background-color: cadetblue;
    text-align: center;
    color: white;
    padding: 5px;
}
ul {
    list-style-type: square;
    margin: 20px 0 20px 0;
}
input[type=text] {
    border: 1px solid #ccc;
    padding: 5px;
    width: 300px;
    font-size: 15px;
}
input[type=text]:focus{
    outline: 1.5px solid #54c9ff;
}
button{
    border: 1px solid #ccc;
    margin-left: 15px;
    padding: 5px 15px;
    font-size: 15px;
    cursor: pointer;
}
#add{
    background-color: white;
    transition: 0.3s;
}
#add:focus{
    outline: 1.5px solid #45b8ee;
}
#add:hover{
    background-color:#dfe8f0;
}
.delete{
    background-color:transparent;
    color:red;
    border: none;
    padding: 2px;
}
.delete:focus{
    outline-color:#3f8285;
}
 
var input = document.getElementById("newListItem");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("add").click();
  }
});
$(document).ready(function(){
    let newListItem = $("#newListItem");
    let newLi1 = $("<li></li>");
    let deleteButton1 = $("<button class='delete'>x</button>");
    for (i = 0; i < localStorage.length; i++) {
        x = localStorage.key(i);
       // $("#list").append("<li></li>"+localStorage.getItem(x)).append("<button class='delete'>x</button>");
       //$("#list").append("<li></li>").append(localStorage.getItem(x)).append("<button class='delete'>x</button>");
        newLi1.append(localStorage.getItem(x)).append("<button class='delete'>x</button>").append("<br>");
        $("#list").append(newLi1);
        
    
        console.log(newLi1);
      }
  $("#add").on( "click", function(){
    let valueToBeAdded = createNewLi(newListItem.val());
    
    $("#list").append(valueToBeAdded);
    
    $("#newListItem").val("");
    $("input").focus();
  })
  
  let createNewLi = function(newListItem) {
  
    let newLi = $("<li></li>");
    let deleteButton = $("<button class='delete'>x</button>");
    newLi.append(newListItem).append(deleteButton);
    randomId= "toDO" + Math.floor(Math.random() * 100) + 1;
    localStorage.setItem(randomId, newListItem);
    return newLi;
  }
  
  $("#list").on("click", ".delete", function(){
    $(this).parent().remove();
    var testi=localStorage.key(this);
    localStorage.removeItem(testi);  
  })
  });
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers