Skip to main content
Code Review

Return to Question

edited tags
Link
200_success
  • 145.6k
  • 22
  • 190
  • 479
Tweeted twitter.com/StackCodeReview/status/806324589961871360
added 87 characters in body; edited title
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238

Basic javascriptJavaScript ToDo list with task priorities

Hi everyone forFor the sake of training my vanilla jsJS skills i'veI've decided to make a simple ToDo list with the following features:

  • tasksTasks can be added with a priority (higher the number - higher on the list)
  • counterCounter tells how many tasks are left to be completed
  • The "delete" button deletes the according task whether itsit's completed or not (and lowers the counter if necessary)
  • The "complete" button changes the color of task heading to red and lowers the counter
  • "remove"Remove finished tasks" removes the tasks which are marked as completed and lowers the counter accordingly

My "app" is obviously ugly but itsit's not important here.

Here's codepen: http://codepen.io/mkrds/pen/KNRaERCodePen

HTML:

<head>
 <meta charset="UTF-8">
 <title>CodersLab</title>
 <link rel="stylesheet" href="css/style.css">
 <script src="js/app.js"></script>
</head>
<body>
 <input id="taskInput" placeholder="Place your task here"><br>
 <input id="taskPriority" placeholder="Task priority"><br>
 <button id="addTaskButton">Add task</button>
 <p>
 Tasks to finish: <span id="counter">0</span>
 </p>
 <ul id="taskList">
 </ul>
 <button id="removeFinishedTasksButton">Remove finished tasks</button>
</body>

CSS:

.completed {
 color: red;
}

JS:

document.addEventListener("DOMContentLoaded", function() {
 var addTaskBtn = document.getElementById("addTaskButton");
 var removeFinishedTasksBtn = document.getElementById("removeFinishedTasksButton");
 var taskField = document.getElementById("taskInput");
 var priorityField = document.getElementById("taskPriority");
 var taskList = document.getElementById("taskList");
 var taskCounter = document.getElementById("counter");
 var toArray = function(obj) {
 var array = [];
 for (var i = obj.length >>> 0; i--;) {
 array[i] = obj[i];
 }
 return array;
 };
 var taskCreator = function () {
 var existingTasks = document.getElementsByTagName("li");
 var existingTasksArray = toArray(existingTasks);
 var sortedTasksArray = [];
 var newTask = document.createElement("li");
 newTask.innerHTML ="<h1>" + taskField.value + "</h1>";
 newTask.dataset.priority = priorityField.value;
 existingTasksArray.push(newTask);
 // TASKS SORTING
 sortedTasksArray = existingTasksArray.sort(function(a, b) {
 return b.dataset.priority - a.dataset.priority;
 });
 // TASKS APPENDING
 if (existingTasks.length === 0) {
 taskList.appendChild(newTask);
 } else {
 for (var i = 0; i < sortedTasksArray.length; i++) {
 taskList.appendChild(sortedTasksArray[i]);
 }
 }
 // DELETE BUTTON
 var deleteButton = document.createElement("button");
 deleteButton.innerText = "Delete";
 newTask.appendChild(deleteButton);
 deleteButton.addEventListener("click", function() {
 taskList.removeChild(newTask);
 if (!newTask.classList.contains("completed")) {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) - 1;
 }
 });
 // COMPLETE BUTTON
 var completeButton = document.createElement("button");
 completeButton.innerText = "Complete";
 newTask.appendChild(completeButton);
 completeButton.addEventListener("click", function() {
 newTask.classList.toggle("completed");
 if (newTask.classList.contains("completed")) {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) - 1;
 } else {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) + 1;
 }
 });
 // TASKCOUNTER +1, AND INPUTS RESET
 taskCounter.innerText = parseInt(taskCounter.innerText,10) + 1;
 taskField.value = "";
 priorityField.value = "";
 };
 // ADD TASK TO ADD BUTTON
 addTaskBtn.addEventListener("click", function() {
 if (taskField.value.length > 5 && taskField.value.length < 100) {
 return taskCreator();
 }
 });
 // ADD TASK TO REMOVE FINISHED TASKS BUTTON
 removeFinishedTasksBtn.addEventListener("click", function() {
 var completedTasks = document.getElementsByClassName("completed");
 var completedTasksArray = toArray(completedTasks);
 for (var i = 0; i < completedTasksArray.length; i++) {
 completedTasks[0].parentNode.removeChild(completedTasks[0]);
 }
 });
.completed {
 color: red;
}
<head>
 <meta charset="UTF-8">
 <title>CodersLab</title>
 <link rel="stylesheet" href="css/style.css">
 <script src="js/app.js"></script>
</head>
<body>
 <input id="taskInput" placeholder="Place your task here"><br>
 <input id="taskPriority" placeholder="Task priority"><br>
 <button id="addTaskButton">Add task</button>
 <p>
 Tasks to finish: <span id="counter">0</span>
 </p>
 <ul id="taskList">
 </ul>
 <button id="removeFinishedTasksButton">Remove finished tasks</button>
</body>
document.addEventListener("DOMContentLoaded", function() {
 var addTaskBtn = document.getElementById("addTaskButton");
 var removeFinishedTasksBtn = document.getElementById("removeFinishedTasksButton");
 var taskField = document.getElementById("taskInput");
 var priorityField = document.getElementById("taskPriority");
 var taskList = document.getElementById("taskList");
 var taskCounter = document.getElementById("counter");
 var toArray = function(obj) {
 var array = [];
 for (var i = obj.length >>> 0; i--;) {
 array[i] = obj[i];
 }
 return array;
 };
 var taskCreator = function () {
 var existingTasks = document.getElementsByTagName("li");
 var existingTasksArray = toArray(existingTasks);
 var sortedTasksArray = [];
 var newTask = document.createElement("li");
 newTask.innerHTML ="<h1>" + taskField.value + "</h1>";
 newTask.dataset.priority = priorityField.value;
 existingTasksArray.push(newTask);
 // TASKS SORTING
 sortedTasksArray = existingTasksArray.sort(function(a, b) {
 return b.dataset.priority - a.dataset.priority;
 });
 // TASKS APPENDING
 if (existingTasks.length === 0) {
 taskList.appendChild(newTask);
 } else {
 for (var i = 0; i < sortedTasksArray.length; i++) {
 taskList.appendChild(sortedTasksArray[i]);
 }
 }
 // DELETE BUTTON
 var deleteButton = document.createElement("button");
 deleteButton.innerText = "Delete";
 newTask.appendChild(deleteButton);
 deleteButton.addEventListener("click", function() {
 taskList.removeChild(newTask);
 if (!newTask.classList.contains("completed")) {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) - 1;
 }
 });
 // COMPLETE BUTTON
 var completeButton = document.createElement("button");
 completeButton.innerText = "Complete";
 newTask.appendChild(completeButton);
 completeButton.addEventListener("click", function() {
 newTask.classList.toggle("completed");
 if (newTask.classList.contains("completed")) {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) - 1;
 } else {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) + 1;
 }
 });
 // TASKCOUNTER +1, AND INPUTS RESET
 taskCounter.innerText = parseInt(taskCounter.innerText,10) + 1;
 taskField.value = "";
 priorityField.value = "";
 };
 // ADD TASK TO ADD BUTTON
 addTaskBtn.addEventListener("click", function() {
 if (taskField.value.length > 5 && taskField.value.length < 100) {
 return taskCreator();
 }
 });
 // ADD TASK TO REMOVE FINISHED TASKS BUTTON
 removeFinishedTasksBtn.addEventListener("click", function() {
 var completedTasks = document.getElementsByClassName("completed");
 var completedTasksArray = toArray(completedTasks);
 for (var i = 0; i < completedTasksArray.length; i++) {
 completedTasks[0].parentNode.removeChild(completedTasks[0]);
 }
 });

It would be really helpful if someone more experienced than me could look at my code and let me know if there are any major mistakes or bad practice examples. I'll gladly hear any feedback about anything (really anything - formattingformatting, code indentation, code structure, logic behind the code and anything you can think of).

Also i've, I've been thinking about code testing and TDD lately and if you could give me any hint how could i test this "app" (and if itsit's necessary to test an app which is so small) i'd appreciate it. I haven't read anything about ES6 yet but any info on what could be written "better" thanks to the use of ES6 features will be helpful as well.

Hope you enjoy my code and thanks for reading x)

Basic javascript ToDo list with task priorities

Hi everyone for the sake of training my vanilla js skills i've decided to make a simple ToDo list with following features:

  • tasks can be added with a priority (higher the number - higher on the list)
  • counter tells how many tasks are left to be completed
  • "delete" button deletes the according task whether its completed or not (and lowers the counter if necessary)
  • "complete" button changes the color of task heading to red and lowers the counter
  • "remove finished tasks" removes the tasks which are marked as completed and lowers the counter accordingly

My "app" is obviously ugly but its not important here.

Here's codepen: http://codepen.io/mkrds/pen/KNRaER

HTML:

<head>
 <meta charset="UTF-8">
 <title>CodersLab</title>
 <link rel="stylesheet" href="css/style.css">
 <script src="js/app.js"></script>
</head>
<body>
 <input id="taskInput" placeholder="Place your task here"><br>
 <input id="taskPriority" placeholder="Task priority"><br>
 <button id="addTaskButton">Add task</button>
 <p>
 Tasks to finish: <span id="counter">0</span>
 </p>
 <ul id="taskList">
 </ul>
 <button id="removeFinishedTasksButton">Remove finished tasks</button>
</body>

CSS:

.completed {
 color: red;
}

JS:

document.addEventListener("DOMContentLoaded", function() {
 var addTaskBtn = document.getElementById("addTaskButton");
 var removeFinishedTasksBtn = document.getElementById("removeFinishedTasksButton");
 var taskField = document.getElementById("taskInput");
 var priorityField = document.getElementById("taskPriority");
 var taskList = document.getElementById("taskList");
 var taskCounter = document.getElementById("counter");
 var toArray = function(obj) {
 var array = [];
 for (var i = obj.length >>> 0; i--;) {
 array[i] = obj[i];
 }
 return array;
 };
 var taskCreator = function () {
 var existingTasks = document.getElementsByTagName("li");
 var existingTasksArray = toArray(existingTasks);
 var sortedTasksArray = [];
 var newTask = document.createElement("li");
 newTask.innerHTML ="<h1>" + taskField.value + "</h1>";
 newTask.dataset.priority = priorityField.value;
 existingTasksArray.push(newTask);
 // TASKS SORTING
 sortedTasksArray = existingTasksArray.sort(function(a, b) {
 return b.dataset.priority - a.dataset.priority;
 });
 // TASKS APPENDING
 if (existingTasks.length === 0) {
 taskList.appendChild(newTask);
 } else {
 for (var i = 0; i < sortedTasksArray.length; i++) {
 taskList.appendChild(sortedTasksArray[i]);
 }
 }
 // DELETE BUTTON
 var deleteButton = document.createElement("button");
 deleteButton.innerText = "Delete";
 newTask.appendChild(deleteButton);
 deleteButton.addEventListener("click", function() {
 taskList.removeChild(newTask);
 if (!newTask.classList.contains("completed")) {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) - 1;
 }
 });
 // COMPLETE BUTTON
 var completeButton = document.createElement("button");
 completeButton.innerText = "Complete";
 newTask.appendChild(completeButton);
 completeButton.addEventListener("click", function() {
 newTask.classList.toggle("completed");
 if (newTask.classList.contains("completed")) {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) - 1;
 } else {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) + 1;
 }
 });
 // TASKCOUNTER +1, AND INPUTS RESET
 taskCounter.innerText = parseInt(taskCounter.innerText,10) + 1;
 taskField.value = "";
 priorityField.value = "";
 };
 // ADD TASK TO ADD BUTTON
 addTaskBtn.addEventListener("click", function() {
 if (taskField.value.length > 5 && taskField.value.length < 100) {
 return taskCreator();
 }
 });
 // ADD TASK TO REMOVE FINISHED TASKS BUTTON
 removeFinishedTasksBtn.addEventListener("click", function() {
 var completedTasks = document.getElementsByClassName("completed");
 var completedTasksArray = toArray(completedTasks);
 for (var i = 0; i < completedTasksArray.length; i++) {
 completedTasks[0].parentNode.removeChild(completedTasks[0]);
 }
 });

It would be really helpful if someone more experienced than me could look at my code and let me know if there are any major mistakes or bad practice examples. I'll gladly hear any feedback about anything (really anything - formatting, code indentation, code structure, logic behind the code and anything you can think of). Also i've been thinking about code testing and TDD lately and if you could give me any hint how could i test this "app" (and if its necessary to test an app which is so small) i'd appreciate it. I haven't read anything about ES6 yet but any info on what could be written "better" thanks to the use of ES6 features will be helpful as well.

Hope you enjoy my code and thanks for reading x)

Basic JavaScript ToDo list with task priorities

For the sake of training my vanilla JS skills I've decided to make a simple ToDo list with the following features:

  • Tasks can be added with a priority (higher the number - higher on the list)
  • Counter tells how many tasks are left to be completed
  • The "delete" button deletes the according task whether it's completed or not (and lowers the counter if necessary)
  • The "complete" button changes the color of task heading to red and lowers the counter
  • "Remove finished tasks" removes the tasks which are marked as completed and lowers the counter accordingly

My "app" is obviously ugly but it's not important here.

CodePen 

document.addEventListener("DOMContentLoaded", function() {
 var addTaskBtn = document.getElementById("addTaskButton");
 var removeFinishedTasksBtn = document.getElementById("removeFinishedTasksButton");
 var taskField = document.getElementById("taskInput");
 var priorityField = document.getElementById("taskPriority");
 var taskList = document.getElementById("taskList");
 var taskCounter = document.getElementById("counter");
 var toArray = function(obj) {
 var array = [];
 for (var i = obj.length >>> 0; i--;) {
 array[i] = obj[i];
 }
 return array;
 };
 var taskCreator = function () {
 var existingTasks = document.getElementsByTagName("li");
 var existingTasksArray = toArray(existingTasks);
 var sortedTasksArray = [];
 var newTask = document.createElement("li");
 newTask.innerHTML ="<h1>" + taskField.value + "</h1>";
 newTask.dataset.priority = priorityField.value;
 existingTasksArray.push(newTask);
 // TASKS SORTING
 sortedTasksArray = existingTasksArray.sort(function(a, b) {
 return b.dataset.priority - a.dataset.priority;
 });
 // TASKS APPENDING
 if (existingTasks.length === 0) {
 taskList.appendChild(newTask);
 } else {
 for (var i = 0; i < sortedTasksArray.length; i++) {
 taskList.appendChild(sortedTasksArray[i]);
 }
 }
 // DELETE BUTTON
 var deleteButton = document.createElement("button");
 deleteButton.innerText = "Delete";
 newTask.appendChild(deleteButton);
 deleteButton.addEventListener("click", function() {
 taskList.removeChild(newTask);
 if (!newTask.classList.contains("completed")) {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) - 1;
 }
 });
 // COMPLETE BUTTON
 var completeButton = document.createElement("button");
 completeButton.innerText = "Complete";
 newTask.appendChild(completeButton);
 completeButton.addEventListener("click", function() {
 newTask.classList.toggle("completed");
 if (newTask.classList.contains("completed")) {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) - 1;
 } else {
 taskCounter.innerText = parseInt(taskCounter.innerText,10) + 1;
 }
 });
 // TASKCOUNTER +1, AND INPUTS RESET
 taskCounter.innerText = parseInt(taskCounter.innerText,10) + 1;
 taskField.value = "";
 priorityField.value = "";
 };
 // ADD TASK TO ADD BUTTON
 addTaskBtn.addEventListener("click", function() {
 if (taskField.value.length > 5 && taskField.value.length < 100) {
 return taskCreator();
 }
 });
 // ADD TASK TO REMOVE FINISHED TASKS BUTTON
 removeFinishedTasksBtn.addEventListener("click", function() {
 var completedTasks = document.getElementsByClassName("completed");
 var completedTasksArray = toArray(completedTasks);
 for (var i = 0; i < completedTasksArray.length; i++) {
 completedTasks[0].parentNode.removeChild(completedTasks[0]);
 }
 });
.completed {
 color: red;
}
<head>
 <meta charset="UTF-8">
 <title>CodersLab</title>
 <link rel="stylesheet" href="css/style.css">
 <script src="js/app.js"></script>
</head>
<body>
 <input id="taskInput" placeholder="Place your task here"><br>
 <input id="taskPriority" placeholder="Task priority"><br>
 <button id="addTaskButton">Add task</button>
 <p>
 Tasks to finish: <span id="counter">0</span>
 </p>
 <ul id="taskList">
 </ul>
 <button id="removeFinishedTasksButton">Remove finished tasks</button>
</body>

It would be really helpful if someone more experienced than me could look at my code and let me know if there are any major mistakes or bad practice examples. I'll gladly hear any feedback about anything (formatting, code indentation, code structure, logic behind the code and anything you can think of).

Also, I've been thinking about code testing and TDD lately and if you could give me any hint how could i test this "app" (and if it's necessary to test an app which is so small) i'd appreciate it. I haven't read anything about ES6 yet but any info on what could be written "better" thanks to the use of ES6 features will be helpful as well.

decided to add the codepen as well
Source Link
mkrds
  • 41
  • 1
  • 3

Here's codepen: http://codepen.io/mkrds/pen/KNRaER

HTML:

HTML:

Here's codepen: http://codepen.io/mkrds/pen/KNRaER

HTML:

Post Reopened by Community Bot, janos
added code (ive provided only an external link before the edit)
Source Link
mkrds
  • 41
  • 1
  • 3
Loading
Post Closed as "Not suitable for this site" by janos
Source Link
mkrds
  • 41
  • 1
  • 3
Loading
default

AltStyle によって変換されたページ (->オリジナル) /