I have a task app here allowing where a user can create a task and select the category of each task. I want it such that when the task created is the category "Personal", the color property of the text when displayed is blue. Else if it is "Work", then its red. Below is what i have tried in my javascript file.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col h1 text-white text-start text-center text-md-start text-lg-start">TO-DO APP</div>
</div>
<div class="row">
<div class="h6 text-white text-start text-center text-md-start text-lg-start">CREATE A TO-DO</div>
</div>
<form id="todo-form">
<div class="row mb-4">
<div class="col">
<input class="form-control" name="newTask" type="text" placeholder="eg. Do the laundry">
</div>
</div>
<div class="row">
<div class="h6 text-white text-start text-center text-md-start text-lg-start">CATEGORY</div>
</div>
<div class="row mb-3">
<div class="col-6">
<input type="radio" class="btn-check" name="category" id="option1" value="Work">
<label class="col-12 btn btn-outline-danger p-4 text-white work-task" for="option1">Work</label>
</div>
<div class="col-6">
<input type="radio" class="btn-check" name="category" id="option2" value="Personal">
<label class="col-12 btn btn-outline-primary p-4 text-white personal-task" for="option2">Personal</label>
</div>
</div>
<div class="row mb-4">
<div class="col"><button type="submit" class="btn btn-secondary p-2 w-100 add-task" active>ADD TO-DO</button></div>
</div>
</form>
<div class="row mb-2">
<div class="h6 text-white text-start text-center text-md-start text-lg-start">TO-DO LIST</div>
</div>
<div class="todoList">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Javascript:
const todoForm = document.getElementById("todo-form")
window.addEventListener("load", () => {
todos = JSON.parse(localStorage.getItem("todos")) || []
todoForm.addEventListener("submit", (e) => {
e.preventDefault()
if (e.target.elements.newTask.value != "") {
const todo = {
task: e.target.elements.newTask.value,
category: e.target.elements.category.value
}
todos.push(todo);
localStorage.setItem("todos", JSON.stringify(todos));
e.target.reset()
showList()
}
})
showList();
})
function showList() {
let outPut = '';
let taskListShow = document.querySelector(".todoList")
todos.forEach((data, index)=> {
if (data.category == "Personal") {
document.getElementById("todoContent").style.color = "blue"
} else {
document.getElementById("todoContent").style.color = "red"
}
outPut += `
<div class="row todoList mb-3">
<div class="col-10 col-lg-8 col-md-7 col-sm-6">
<input id="todoContent" class="todoContent no-border text-white w-100" value="${data.task}" readonly>
</div>
<div class="col">
<div class="row action">
<div class="col-6">
<button type="button" class="btn btn-secondary col-12" onClick="editItem(${index})">Edit</button>
</div>
<div class="col-6">
<button type="button" class="btn btn-danger col-12" onClick="deleteItem(${index})">Delete</button>
</div>
</div>
</div>
</div>`
});
taskListShow.innerHTML = outPut;
}
function deleteItem(index) {
todos.splice(index, 1)
localStorage.setItem("todos", JSON.stringify(todos))
showList()
}
function editItem(index) {
const taskAllName = document.querySelectorAll(".todoContent");
const taskName = taskAllName[index];
taskName.removeAttribute("readonly");
taskName.focus();
taskName.addEventListener("blur", (e) => {
const newValue = e.target.value;
const newTodos = todos.map((todo, i) =>
i === index ? { ...todo, task: newValue } : { ...todo }
);
taskName.setAttribute("readonly", true);
localStorage.setItem("todos", JSON.stringify(newTodos));
todos = newTodos;
showList();
});
}
I am currently getting an error:
"Uncaught TypeError: Cannot read properties of null (reading ‘style’)"
>Solution :
Because you select the element before it was created. Here is my idea:
const curColor = data.category == "Personal" ? "blue" : "red";
<input ...{other properties} style="color: ${curColor} !important" readonly>
But I don’t know why the style’s priority lower than class, maybe you have some logic, so I use !important here.