I learned javascript from some tutorials and as per advice, I thought of creating some task by my self. I wrote the following code and as I expected I saw the answer. If someone can assist me with how to code better? (The below code will create a table and update rows with input data which user enter)
// Javascript
var input = document.getElementById("input");
var btn = document.getElementById("btn");
var table = document.getElementById("table");
btn.addEventListener('click', function(){
var updateTask = input.value;
// Now create row and add all the inputs value to a table
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var allRows = table.querySelectorAll("tr");
cell2.innerHTML = updateTask;
// Update the Number/Order
var rowLength = allRows.length;
if (rowLength > 0){
cell1.innerHTML = rowLength - 1;
}
});
<h1>To Do List</h1>
<div class="list-wrapper">
<input id="input" class="input" type="text" placeholder="Enter here!!!" onfocus="this.value=' ' ">
<input id="btn" type="submit" value="ADD">
<table id="table">
<tr><th>Number</th><th>Task</th></tr>
</table>
</div>