Skip to content

cambiadas variables var por const #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lahali wants to merge 1 commit into
base: master
Choose a base branch
from
Open

cambiadas variables var por const #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ Just a basic todo app that I wrote using vanilla **JavaScript** so there's not m
## Code Example

```
var taskCompleted = function() { // Mark a task as complete
var listItem = this.parentNode; // We assign it for readability
const taskCompleted = function() { // Mark a task as complete
const listItem = this.parentNode; // We assign it for readability
completedTasksHolder.appendChild(listItem); // Append the task list item to the #completed-tasks
bindTaskEvents(listItem, taskIncomplete); // We bind it to the opposite holder
};
Expand Down
68 changes: 34 additions & 34 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
// Vanila JavaScript todo list app
var taskInput = document.getElementById("new-task"); // New-task
var addButton = document.getElementsByTagName("button")[0]; // First button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); // Incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks"); // Completed-tasks
const taskInput = document.getElementById("new-task"); // New-task
const addButton = document.getElementsByTagName("button")[0]; // First button
const incompleteTasksHolder = document.getElementById("incomplete-tasks"); // Incomplete-tasks
const completedTasksHolder = document.getElementById("completed-tasks"); // Completed-tasks

var createNewTaskElement = function(taskString) { // New Task List Item
var listItem = document.createElement("li"); // Create List Item
var checkBox = document.createElement("input"); // Input (checkbox)
var label = document.createElement("label"); // Label
var editInput = document.createElement("input"); // Input (text)
var editButton = document.createElement("button"); // Button.edit
var deleteButton = document.createElement("button"); // Button.delete
const createNewTaskElement = function(taskString) { // New Task List Item
const listItem = document.createElement("li"); // Create List Item
const checkBox = document.createElement("input"); // Input (checkbox)
const label = document.createElement("label"); // Label
const editInput = document.createElement("input"); // Input (text)
const editButton = document.createElement("button"); // Button.edit
const deleteButton = document.createElement("button"); // Button.delete

checkBox.type = "checkbox"; // Each element needs to be modified
editInput.type = "text"; //
Expand All @@ -29,21 +29,21 @@ var createNewTaskElement = function(taskString) { // New Task List Item
return listItem;
};

var addTask = function() { // Add a new task
var listItemName = taskInput.value || "New Item"; // We hold the current value or provide the default one
var listItem = createNewTaskElement(listItemName); // Create a new list item with the text from #new-task
const addTask = function() { // Add a new task
const listItemName = taskInput.value || "New Item"; // We hold the current value or provide the default one
const listItem = createNewTaskElement(listItemName); // Create a new list item with the text from #new-task
incompleteTasksHolder.appendChild(listItem); // Append listItem to incompleteTasksHolder
bindTaskEvents(listItem, taskCompleted); // We bind it to the incomplete holder
taskInput.value = ""; // Resets the field
};

var editTask = function() { // Edit an existing task
var listItem = this.parentNode; // Create List Item
var editInput = listItem.querySelector("input[type=text"); // Input (text)
var label = listItem.querySelector("label"); // Label
var button = listItem.getElementsByTagName("button")[0]; // Button
const editTask = function() { // Edit an existing task
const listItem = this.parentNode; // Create List Item
const editInput = listItem.querySelector("input[type=text"); // Input (text)
const label = listItem.querySelector("label"); // Label
const button = listItem.getElementsByTagName("button")[0]; // Button

var containsClass = listItem.classList.contains("editMode"); // We check for .editMode and assign it a variable
const containsClass = listItem.classList.contains("editMode"); // We check for .editMode and assign it a constiable
if(containsClass) { // Switch from .editMode
label.innerText = editInput.value; // Label text become the input's value
button.innerText = "Edit"; // Buttons name modified to Edit
Expand All @@ -54,44 +54,44 @@ var editTask = function() { // Edit an exist
listItem.classList.toggle("editMode"); // Toggle .editMode on the parent
};

var deleteTask = function() { // Delete an existing task
var listItem = this.parentNode; // We use parentNode to target the object containing the delete button
var ul = listItem.parentNode; // We use parentNode again to target the list containing the task
const deleteTask = function() { // Delete an existing task
const listItem = this.parentNode; // We use parentNode to target the object containing the delete button
const ul = listItem.parentNode; // We use parentNode again to target the list containing the task
ul.removeChild(listItem); // Remove the parent list item from the ul
};

var taskCompleted = function() { // Mark a task as complete
var listItem = this.parentNode; // We assign it for readability
const taskCompleted = function() { // Mark a task as complete
const listItem = this.parentNode; // We assign it for readability
completedTasksHolder.appendChild(listItem); // Append the task list item to the #completed-tasks
bindTaskEvents(listItem, taskIncomplete); // We bind it to the opposite holder
};

var taskIncomplete = function() { // Mark a task as incomplete
var listItem = this.parentNode; // We assign it for readability
const taskIncomplete = function() { // Mark a task as incomplete
const listItem = this.parentNode; // We assign it for readability
incompleteTasksHolder.appendChild(listItem); // Append the task list item to the #incomplete-tasks
bindTaskEvents(listItem, taskCompleted); // We bind it to the opposite holder
};

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) { // Select it's children
var checkBox = taskListItem.querySelector("input[type=checkbox]"); //
var editButton = taskListItem.querySelector("button.edit"); //
var deleteButton = taskListItem.querySelector("button.delete"); //
const bindTaskEvents = function(taskListItem, checkBoxEventHandler) { // Select it's children
const checkBox = taskListItem.querySelector("input[type=checkbox]"); //
const editButton = taskListItem.querySelector("button.edit"); //
const deleteButton = taskListItem.querySelector("button.delete"); //
editButton.onclick = editTask; // Bind editTask to edit button
deleteButton.onclick = deleteTask; // Bind deleteTask to delete button
checkBox.onchange = checkBoxEventHandler; // Bind checkBoxEventHandler to checkbox
};

var ajaxRequest = function() {
const ajaxRequest = function() {
console.log("AJAX request");
};

addButton.addEventListener("click", addTask); // Adds event listener for the click handler to the addTask function
addButton.addEventListener("click", ajaxRequest); // Adds an event listener for AJAX

for(var i = 0; i < incompleteTasksHolder.children.length; i++) { // Cycle over incompleteTasksHolder ul list items
for(const i = 0; i < incompleteTasksHolder.children.length; i++) { // Cycle over incompleteTasksHolder ul list items
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted); // Bind events to list item's children (taskCompleted)
}

for(var i = 0; i < completedTasksHolder.children.length; i++) { // Cycle over completedTasksHolder ul list items
for(const i = 0; i < completedTasksHolder.children.length; i++) { // Cycle over completedTasksHolder ul list items
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete); // Bind events to list item's children (taskIncomplete)
}