`
When adding the 1st task in the to do list the code generates an extra button but works fine when I add subsequent tasks, I am not sure where is the problem.
I am taking the tasks from the querySelector from the input placeholder and the date from the input date in the html file.
When the add button is clicked it would trigger the todo() that will carry out all the necessary required opreations.
The html and JS code is as follows:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do List</title>
</head>
<body>
<link rel="stylesheet" href="./todo.css">
<p>To Do List</p>
<input class="js-input" placeholder="Add any task to the list">
<input type="date" class="js-date">
<button onclick="
todo()
">Add</button>
<div class="js-display">
</div>
<script src="./todo.js"></script>
</body>
</html>
Javascript:
let tasks=[{
task:'',
date:''
}];
let displayhtml=''
function todo()
{
let inputEle = document.querySelector('.js-input');
let inputEleDate=document.querySelector('.js-date');
const date=inputEleDate.value;
const task=inputEle.value;
console.log(task);
console.log(date);
tasks.push(
{
task:task,
date:date
}
);
console.log(tasks);
inputEle.value="";
for(let i=0;i<tasks.length;i++)
{
const eletask=tasks[i].task;
const eledate=tasks[i].date;
let html=`
<p>${eletask} ${eledate} <button onclick="deleteToDo(${i})">Delete</button> </p>
`;
console.log(html);
displayhtml+=html;
document.querySelector('.js-display').innerHTML=displayhtml;
}
displayhtml=''
};
function deleteToDo(i)
{
tasks.slice(i,1)
console.log(tasks)
}