"Todolist in JS with LocalStorage"
Bootstrap 4.1.1 Snippet by tayyab8563

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <title>Document</title> </head> <body> <div class="container m-auto w-75"> <h1 class="text-center">Javascript</h1> <p id="demo"> </p> <form role="form"> <table class="table table-striped"> <thead> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputName1">First Name:</label> <input type="text" name="text" class="form-control input-sm" placeholder="First Name" id="myInput" /> </div> <div class="form-group col-md-6"> <label for="inputName2">Last Name:</label> <input type="text" name="text" class="form-control input-sm" placeholder="Last Name" id="myInput1" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputName3">Subjects:</label> <input type="text" name="text" class="form-control input-sm" placeholder="1234 Main St" id="myInput2" /> </div> <div class="form-group col-md-6"> <label for="inputName4">Age:</label> <input type="number" class="form-control input-sm" placeholder="Age" id="myInput3" /> </div> </div> <button class="btn btn-primary w-100" type="button" onclick="getInputValue();"> <i class="fa fa-plus"> Add</i> </button> </thead> </table> <table class="table table-striped table-bordered"> <thead> <tr> <th scope="col">Code</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Subjects</th> <th scope="col">Age</th> </tr> </thead> <tbody id="body"></tbody> </table> </form> </div> </body> </html>
var arr = []; function getInputValue() { var input = document.getElementById("myInput").value; var input1 = document.getElementById("myInput1").value; var input2 = document.getElementById("myInput2").value; var input3 = document.getElementById("myInput3").value; var obj = { input, input1, input2, input3, } var lstorage = localStorage.getItem("Input"); if (lstorage === null) { arr.push(obj); localStorage.setItem("Input", JSON.stringify(arr)); } else { lstorage = localStorage.getItem("Input"); var newArr = JSON.parse(lstorage); newArr.push(obj); localStorage.setItem("Input", JSON.stringify(newArr)); console.log("Array", newArr, obj); document.getElementById("body").innerHTML = ""; for (var i = 0; i < newArr.length; i++) { document.getElementById("body").innerHTML += "<tr>" + "<td>" + (i < 9 ? 0 : "") + (i < 99 ? 0 : "") + (i < 999 ? 0 : "") + (i + 1) + "</td>" + "<td>" + newArr[i].input + "</td>" + "<td>" + newArr[i].input1 + "</td>" + "<td>" + newArr[i].input2 + "</td>" + "<td>" + newArr[i].input3 + "</td>" + "</tr>"; } } }

Related: See More

Vue Black Dashboard
Google style login extended (with HTML5 LocalStorage)

Questions / Comments: