Skip to content
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

Clean code s1e1 #66

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
+332 −278
Open

Clean code s1e1 #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c591df5
refactor: update html and CSS according to BEM to rule 1.1 in html-a…
Ihar-Batura Dec 27, 2023
24c96c2
refactor: update html and CSS according to BEM to rule 1.2 in html-a…
Ihar-Batura Dec 27, 2023
ca47171
refactor: update html and CSS according to BEM to rule 1.3 in html-a…
Ihar-Batura Dec 27, 2023
83e8d00
fix: add Html5 DOCTYPE tag according to rule 2.2 in html-and-css.md
Ihar-Batura Dec 27, 2023
432fcbe
refactor: update html according to BEM to rule 2.3 in html-and-css-ex…
Ihar-Batura Dec 27, 2023
b58fc92
refactor: update html according to BEM to rule 2.4 in html-and-css-ex…
Ihar-Batura Dec 27, 2023
6394293
refactor: update files according to BEM to rule 3.1 in html-and-css-e…
Ihar-Batura Dec 27, 2023
d79c96b
refactor: according to BEM to rule 3.1 in html-and-css-extended.md
Ihar-Batura Dec 28, 2023
8e921b7
refactor: according to BEM to rule 3.2, 3.3 and 3.4 in html-and-css-e…
Ihar-Batura Dec 28, 2023
048557f
refactor: according to BEM to rule 3.5 in html-and-css-extended.md
Ihar-Batura Dec 28, 2023
b57eebb
refactor: according to BEM to rule 3.6 in html-and-css-extended.md
Ihar-Batura Dec 28, 2023
9617580
refactor: according to BEM to rule 3.7 in html-and-css-extended.md
Ihar-Batura Dec 28, 2023
e458edf
refactor: according to BEM to rule 3.7 and 3.8 in html-and-css-extend…
Ihar-Batura Dec 28, 2023
ec2bd55
refactor: according to BEM to rule 1.1 and 1.2 in html-and-css-extend…
Ihar-Batura Dec 28, 2023
e62c437
fix: fixed css file
Ihar-Batura Jan 5, 2024
77a50aa
fix: fix file html and add meta tag and lang for walidator
Ihar-Batura Jan 5, 2024
22fe009
fix: fix edit and save button
Ihar-Batura Sep 1, 2024
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
271 changes: 119 additions & 152 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,195 +1,162 @@
//Document is the DOM can be accessed in the console with document.window.
// Tree is from the top, html, body, p etc.

//Problem: User interaction does not provide the correct results.
//Solution: Add interactivity so the user can manage daily tasks.
//Break things down into smaller steps and take each step at a time.


// Event handling, user interaction is what starts the code execution.

var taskInput=document.getElementById("new-task");//Add a new task.
var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incompleteTasks");//ul of #incompleteTasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks

var taskInput = document.querySelector(".add-task__input");//Add a new task.
var addButton = document.querySelector(".add-task__button");//first button
var incompleteTaskHolder = document.querySelector(".todo-task__list");//ul of #incomplete-tasks
var completedTasksHolder = document.querySelector(".completed-tasks__list");//completed-tasks

//New task list item
var createNewTaskElement=function(taskString){

var listItem=document.createElement("li");

//input (checkbox)
var checkBox=document.createElement("input");//checkbx
//label
var label=document.createElement("label");//label
//input (text)
var editInput=document.createElement("input");//text
//button.edit
var editButton=document.createElement("button");//edit button

//button.delete
var deleteButton=document.createElement("button");//delete button
var deleteButtonImg=document.createElement("img");//delete button image

label.innerText=taskString;
label.className='task';

//Each elements, needs appending
checkBox.type="checkbox";
editInput.type="text";
editInput.className="task";

editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
editButton.className="edit";

deleteButton.className="delete";
deleteButtonImg.src='./remove.svg';
deleteButton.appendChild(deleteButtonImg);


//and appending.
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
var createNewTaskElement = function(taskString){

var listItem = document.createElement("li");
listItem.className = "todo-task__list-item list-item";

//input (checkbox)
var checkBox = document.createElement("input");//checkbx
checkBox.type = "checkbox";
checkBox.className = "list-item__checkbox";

//label
var label = document.createElement("label");//label
label.innerText = taskString;
label.className = "list-item__title task";

//input (text)
var editInput = document.createElement("input");//text
editInput.type = "text";
editInput.className = "list-item__text task";

//button.edit
var editButton = document.createElement("button");//edit button
editButton.innerText = "Edit";
editButton.className = "list-item__button-edit button";

//button.delete
var deleteButton = document.createElement("button");//delete button
deleteButton.className = "list-item__button-delete button";
var deleteButtonImg = document.createElement("img");//delete button image
deleteButtonImg.src = "./remove.svg";
deleteButtonImg.alt = "remove button";
deleteButtonImg.className = "list-item__button-img";
deleteButton.appendChild(deleteButtonImg);

//and appending.
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}

var addTask = function(){
console.log("Add Task...");
//Create a new list item with the text from the #new-task:
if (!taskInput.value) return;
var listItem=createNewTaskElement(taskInput.value);
//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);


var addTask=function(){
console.log("Add Task...");
//Create a new list item with the text from the #new-task:
if (!taskInput.value) return;
var listItem=createNewTaskElement(taskInput.value);

//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);

taskInput.value="";

taskInput.value="";
}

//Edit an existing task.

var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");


var listItem=this.parentNode;

var editInput=listItem.querySelector('input[type=text]');
var label=listItem.querySelector("label");
var editBtn=listItem.querySelector(".edit");
var containsClass=listItem.classList.contains("editMode");
//If class of the parent is .editmode
if(containsClass){

//switch to .editmode
//label becomes the inputs value.
label.innerText=editInput.value;
editBtn.innerText="Edit";
}else{
editInput.value=label.innerText;
editBtn.innerText="Save";
}

//toggle .editmode on the parent.
listItem.classList.toggle("editMode");
var editTask = function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");
var listItem = this.parentNode;
var editInput = listItem.querySelector("input[type=text]");
var label = listItem.querySelector(".list-item__title");
var editBtn = listItem.querySelector(".list-item__button-edit");
var containsClass = listItem.classList.contains("edit-tasks");
//If class of the parent is .edit-tasks
if(containsClass){
//switch to .edit-tasks
//label becomes the inputs value.
label.innerText = editInput.value;
editBtn.innerText = "Edit";
}else{
editInput.value = label.innerText;
editBtn.innerText = "Save";
}
//toggle .edit-tasks on the parent.
listItem.classList.toggle("edit-tasks");
};


//Delete task.
var deleteTask=function(){
console.log("Delete Task...");

var listItem=this.parentNode;
var ul=listItem.parentNode;
//Remove the parent list item from the ul.
ul.removeChild(listItem);
var deleteTask = function(){
console.log("Delete Task...");
var listItem = this.parentNode;
var ul = listItem.parentNode;
//Remove the parent list item from the ul.
ul.removeChild(listItem);

}


//Mark task completed
var taskCompleted=function(){
console.log("Complete Task...");

//Append the task list item to the #completed-tasks
var listItem=this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);

var taskCompleted = function(){
console.log("Complete Task...");
//Append the task list item to the #completed-tasks
var listItem = this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
}


var taskIncomplete=function(){
console.log("Incomplete Task...");
//Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incompleteTasks.
var listItem=this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
var taskIncomplete = function(){
console.log("Incomplete Task...");
//Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incomplete-tasks.
var listItem = this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
}



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

//The glue to hold it all together.


//Set the click handler to the addTask function.
addButton.onclick=addTask;
addButton.onclick = addTask;
addButton.addEventListener("click",addTask);
addButton.addEventListener("click",ajaxRequest);


var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
console.log("bind list item events");
//select ListItems children
var checkBox=taskListItem.querySelector("input[type=checkbox]");
var editButton=taskListItem.querySelector("button.edit");
var deleteButton=taskListItem.querySelector("button.delete");


//Bind editTask to edit button.
editButton.onclick=editTask;
//Bind deleteTask to delete button.
deleteButton.onclick=deleteTask;
//Bind taskCompleted to checkBoxEventHandler.
checkBox.onchange=checkBoxEventHandler;
var bindTaskEvents = function(taskListItem,checkBoxEventHandler){
console.log("bind list item events");
//select ListItems children
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.list-item__button-edit");
var deleteButton = taskListItem.querySelector("button.list-item__button-delete");

//Bind editTask to edit button.
editButton.onclick = editTask;
//Bind deleteTask to delete button.
deleteButton.onclick = deleteTask;
//Bind taskCompleted to checkBoxEventHandler.
checkBox.onchange = checkBoxEventHandler;
}

//cycle over incompleteTaskHolder ul list items
//for each list item
for (var i=0; i<incompleteTaskHolder.children.length;i++){

//bind events to list items chldren(tasksCompleted)
bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
//cycle over incompleteTaskHolder ul list items
//for each list item
for (var i = 0; i < incompleteTaskHolder.children.length; i++){
//bind events to list items chldren(tasksCompleted)
bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
}




//cycle over completedTasksHolder ul list items
for (var i=0; i<completedTasksHolder.children.length;i++){
//bind events to list items chldren(tasksIncompleted)
bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
//cycle over completedTasksHolder ul list items
for (var i = 0; i < completedTasksHolder.children.length; i++){
//bind events to list items chldren(tasksIncompleted)
bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
}




// Issues with usability don't get seen until they are in front of a human tester.

//prevent creation of empty tasks.

//Change edit to save when you are in edit mode.
Loading