Good Day,

What I want the outcome to be:

When the user clicks on the add button it creates a new list

Issue I am having:

When I click the add button, I get an error stating that the value is null.

I have created a logic that if the input value is null there should be an alert.

HTML

<div class="form">
 <input class ="user-input" type="text">
 <input class="date" type="date">
 <input class="time" type="time">
 <button onclick="addTask()" class="add" id="add">+</button>
</div>

JS

// variables object

const el = {
  form: document.querySelector(".form"),
  input: document.querySelector(".user-input"),
  date: document.querySelector(".date"),
  time: document.querySelector(".time"),
  
};
//local storage key

const storage_key = "tasks-storage-key";

//Create ID

const createID = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}`

//variable of empty array that gets new task
let taskList =[];

// function that renders task list

//function that creates new tasks with date and time
function addTask() {

  const id = createID();
  const taskNew = el.input.value;
  const taskDate = el.date.value;
  const taskTime = el.time.value;

  if (taskNew != null) {

    const tasks = document.createElement("div");
    tasks.innerHTML = `
        <div class="task-content">
        <div class="list-of-task">
        <div class="id">${id}</div>
        <input type="checkbox" class="tick">
        <div class="new-task-created">${taskNew}</div>
        <label class="due-date">${taskDate}</label>
        <label class="due-time">${taskTime}</label>
    </div>

    <div class="atcion-buttons">
        <button class="edit" data-id="">Edit</button>
        <button class="delete" data-id="">Delete</button>
    </div>
</div>`

  };
  return taskNew
};