I am trying to make a logic that if user input, date, and time are not filled it gives the user an alert to have the mentioned sections above, but for some reason, even when I have those sections containing values it still shows null.
The outcome should be:
If there is no value for user input, a due date or time alert should appear.
// variables object
const el = {
form: document.querySelector(".form"),
input: document.querySelector(".user-input"),
list: document.querySelector(".list"),
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
const creatTask = (task) => {
const id = createId();
const taskNew = el.input.value;
const taskDate = el.date.value;
const taskTime = el.time.value;
const tasks = document.createElement("div");
tasks.innerHTML = `
<div class="task-content">
<div class="list-of-task">
<div class="task" data-id="${id}">
<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>`;
taskList.push(tasks);
console.log(taskList);
el.list.appendChild(tasks);
return task
};
//event listner that listens for add button.
function addTask(taskNew, taskDate, taskTime) {
if (taskNew == null) {
alert("Please add a new Task")
}
if (taskDate == null) {
alert("Please add a new Task with a due date");
}
if (taskTime == null) {
alert("Please add a new Task with a due time");
}
creatTask();
}<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>
<div class="list"></div>All values obtained from form elements are strings. Even if the element is empty, the value is still "", not null so checking for null isn't the right approach.
Instead test for the absence of any "truthy" value as seen below.
// variables object
const el = {
form: document.querySelector(".form"),
input: document.querySelector(".user-input"),
list: document.querySelector(".list"),
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
const creatTask = (task) => {
const id = createId();
const taskNew = el.input.value;
const taskDate = el.date.value;
const taskTime = el.time.value;
const tasks = document.createElement("div");
tasks.innerHTML = `
<div class="task-content">
<div class="list-of-task">
<div class="task" data-id="${id}">
<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>`;
taskList.push(tasks);
console.log(taskList);
el.list.appendChild(tasks);
return task
};
//event listner that listens for add button.
function addTask(taskNew, taskDate, taskTime) {
if (!taskNew) {
alert("Please add a new Task")
}
if (!taskDate) {
alert("Please add a new Task with a due date");
}
if (!taskTime) {
alert("Please add a new Task with a due time");
}
creatTask();
}<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>
<div class="list"></div>Thanks for the help.
I also found another way of doing it as well after doing further research.
// variables object
const el = {
form: document.querySelector(".form"),
input: document.querySelector(".user-input"),
list: document.querySelector(".list"),
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
const creatTask = (task) => {
const id = createId();
const taskNew = el.input.value;
const taskDate = el.date.value;
const taskTime = el.time.value;
if (taskNew.length == 0) {
alert("Please add a new Task");
}
if (taskDate.length == 0) {
alert("Please add a new Task with a due date");
}
if (taskTime.length == 0) {
alert("Please add a new Task with a due time");
}
const tasks = document.createElement("div");
tasks.innerHTML = `
<div class="task-content">
<div class="list-of-task">
<div class="task" data-id="${id}">
<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>`;
taskList.push(tasks);
console.log(taskList);
el.list.appendChild(tasks);
return task
};
//event listner that listens for add button.
function addTask() {
creatTask();
}<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>
<div class="list"></div>