Skip to content

Clean code s1e1 #154

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
Tyuris-creator wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Clean code s1e1 #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
504a169
init: created new branch according to specification to fix and refact…
Tyuris-creator Oct 16, 2025
c2ae8ba
fix: add Html5 DOCTYPE tag according to rule 2.2 in html-and-css.md
Tyuris-creator Oct 16, 2025
b39fb98
fix: added alt attribute accroding to html-and-css.md
Tyuris-creator Oct 16, 2025
e81296f
fix: fixed style.css file added semicolon
Tyuris-creator Oct 16, 2025
479f0e6
fix:edit html
Tyuris-creator Oct 17, 2025
26fd2c6
fix: added alt attribute accroding to html-and-css.md
Tyuris-creator Oct 17, 2025
63abc25
fix: added alt attribute accroding to html-and-css.md and position
Tyuris-creator Oct 17, 2025
ef9fdde
fix: added BEM methodology and fixed HTML
Tyuris-creator Oct 17, 2025
b9ed353
fix:fixed js file complete bem methodolody
Tyuris-creator Oct 18, 2025
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
280 changes: 128 additions & 152 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,191 +5,167 @@
//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

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

//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 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);
const createNewTaskElement = function (taskString) {
const listItem = document.createElement("li");

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

//button.delete
const deleteButton = document.createElement("button"); //delete button

label.innerText = taskString;
label.className = "tasks__label";

listItem.className = "tasks__item";
//Each elements, needs appending
checkBox.type = "checkbox";
checkBox.className = "tasks__checkbox";

editInput.type = "text";
editInput.className = "tasks__input";

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

deleteButton.className = "tasks__delete-btn";
deleteButton.innerHTML = '<img src="./remove.svg" alt="">';

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

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

taskInput.value="";
//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);

}
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");
const editTask = function () {
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");

const listItem = this.parentNode;
const editInput = listItem.querySelector(".tasks__input");
const label = listItem.querySelector(".tasks__label");
const editBtn = listItem.querySelector(".tasks__edit-btn");
const containsClass = listItem.classList.contains("tasks__item_edit");
//If class of the parent is .tasks__item_edit
if (containsClass) {
//switch to .tasks__item_edit
//label becomes the inputs value.
label.innerText = editInput.value;
editBtn.innerText = "Edit";
} else {
editInput.value = label.innerText;
editBtn.innerText = "Save";
}

//toggle .tasks__item_edit on the parent.
listItem.classList.toggle("tasks__item_edit");
};


//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);

}
const deleteTask = function () {
console.log("Delete Task...");

const listItem = this.parentNode;
const 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 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);
}
const taskCompleted = function () {
console.log("Complete Task...");

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

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

var ajaxRequest=function(){
const ajaxRequest = function () {
if (taskInput.value) {
console.log("AJAX Request");
}
}
};

//The glue to hold it all together.


//Set the click handler to the addTask function.
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;
}
addButton.addEventListener("click", ajaxRequest);
addButton.addEventListener("click", addTask);


const bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
console.log("bind list item events");
//select ListItems children
const checkBox = taskListItem.querySelector(".tasks__checkbox");
const editButton = taskListItem.querySelector(".tasks__edit-btn");
const deleteButton = taskListItem.querySelector(".tasks__delete-btn");

//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);
for (let i = 0; i < incompleteTaskHolder.children.length; i++) {
//bind events to list items children(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);
for (let i = 0; i < completedTasksHolder.children.length; i++) {
//bind events to list items children(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.
//Change edit to save when you are in edit mode.
73 changes: 55 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,56 @@
<html>
<HEAD><title>Todo App</title>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" MEDIA="screen" charset="utf-8">
</HEAD>
<body>
<div class="aaa"><img src="./eisenhower-matrix.jpg"><a class='more_inf' href="https://goal-life.com/page/method/matrix-eisenhower">Want more details&quest;</a></div>
<div class="centered-main-page-element"><p id='topSectionForAddingElementToList'><label for="new-task">Add Item</label><div class="task-row-wrapper"><input id='new-task'class="task" type="text"><button>Add</button></div>
</p><h3>Todo</h3>
<ul id='incompleteTasks'>
<li><input type='checkbox'><label class="task">Pay Bills</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button></li>
<li class="editMode"><input type="checkbox"><label class="task">Go Shopping</label><input type="text" value="Go Shopping" class="task"><button class='edit'>Save</button><button class="delete"><img src="./remove.svg"></button></li>
</ul><h3>Completed</h3><ul id="completed-tasks"><li><input type="checkbox" checked><label class="task">See the Doctor</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button>
</li>
</ul>
</div>
<script type="text/javascript" SRC="app.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Oswald:wght@200..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="details">
<img class="details__img" src="./eisenhower-matrix.jpg" alt="eisenhower-matrix">
<a class='details__more_inf' href="https://goal-life.com/page/method/matrix-eisenhower">Want more details &quest;</a>
</div>
<div class="container">
<div class="add-task" id='topSectionForAddingElementToList'>
<label class="add-task__label" for="new-task">Add Item</label>
<div class="add-task__row">
<input id='new-task' class="add-task__input" type="text">
<button class="add-task__button">Add</button>
</div>
</div>

<h3 class="tasks__title">Todo</h3>
<ul class="tasks tasks_incomplete" id='incompleteTasks'>
<li class="tasks__item">
<input class="tasks__checkbox" type='checkbox'>
<label class="tasks__label">Pay Bills</label>
<input type="text" class="tasks__input">
<button class="tasks__edit-btn">Edit</button>
<button class="tasks__delete-btn"><img src="./remove.svg" alt=""></button>
</li>
<li class="tasks__item tasks__item_edit">
<input class="tasks__checkbox" type="checkbox">
<label class="tasks__label">Go Shopping</label>
<input type="text" value="Go Shopping" class="tasks__input">
<button class='tasks__edit-btn'>Save</button>
<button class="tasks__delete-btn"><img src="./remove.svg" alt=""></button>
</li>
</ul>
<h3 class="tasks__title">Completed</h3>
<ul class="tasks tasks_completed" id="completedTasks">
<li class="tasks__item">
<input class="tasks__checkbox" type="checkbox" checked>
<label class="tasks__label">See the Doctor</label>
<input type="text" class="tasks__input">
<button class="tasks__edit-btn">Edit</button>
<button class="tasks__delete-btn"><img src="./remove.svg" alt=""></button>
</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
Loading