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 #133

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
Open

Clean code s1e1 #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
6d2daa4
init: add project files and start project
AbukhovichNeli Dec 19, 2024
0301e63
chore: add <!DOCTYPE html> tag to rule 2.2 in html-and-css.md
AbukhovichNeli Dec 19, 2024
d93df83
style: change tags to lowercase to rule 1.2 in html-and-css.md
AbukhovichNeli Dec 19, 2024
4769ccb
style: Put every block, table or list element on a new line, regardle…
AbukhovichNeli Dec 19, 2024
2914118
style: use two spaces for one indentation to rule 1.1 in 2.1 in in ht…
AbukhovichNeli Dec 19, 2024
ac83f00
style: Use double quotes instead of single quotes for HTML attributes…
AbukhovichNeli Dec 19, 2024
338c1dd
chore: remove type attribute from connecting styles and scripts to ru…
AbukhovichNeli Dec 19, 2024
debb002
chore: remove named character references to rule 2.3 in html-and-css.md
AbukhovichNeli Dec 19, 2024
3b6a40a
refactor: rename classes according to BEM methodology to rule 3.1 in …
AbukhovichNeli Dec 19, 2024
6e4e5b0
feat: add alt attribute to img tags for accessibility to rule 1.2 in …
AbukhovichNeli Dec 19, 2024
c62b8a0
refactor: Use BEM notation to form class names to rule 2.1 in html-an…
AbukhovichNeli Dec 19, 2024
9b9d9d6
refactor: Use tags as they should be used, change <p> to <div> to rul…
AbukhovichNeli Dec 19, 2024
f2e4f5c
refactor: change var to const and let
AbukhovichNeli Dec 19, 2024
0fbb04e
refactor: delete extra comments to rule 4 in generic-principles.md
AbukhovichNeli Dec 19, 2024
23e303e
refactor: delete extra whitespace to rule 5 in generic-principles.md
AbukhovichNeli Dec 19, 2024
b35c4fa
refactor: change app.js with correct classname
AbukhovichNeli Dec 19, 2024
2d82797
refactor: Use is the simplest realization of a task without anything …
AbukhovichNeli Dec 19, 2024
f79b069
fix: solve the new task list problem, added the correct class
AbukhovichNeli Dec 19, 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: 99 additions & 172 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,195 +1,122 @@
//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

// DOM Elements
const addTaskInput = document.getElementById("new-task");
const addButton = document.querySelector(".task__button-add");
const incompleteTaskHolder = document.getElementById("incompleteTasks");
const completedTasksHolder = document.getElementById("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;
const createNewTaskElement = function (taskString) {
const listItem = document.createElement("li");
listItem.className = "task-list__item";

const checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.className = "task__checkbox";

const label = document.createElement("label");
label.innerText = taskString;
label.className = "task__label";

const editInput = document.createElement("input");
editInput.type = "text";
editInput.className = "task__input task__input--edit";

const editButton = document.createElement("button");
editButton.innerText = "Edit";
editButton.className = "task__button task__button--edit";
editButton.setAttribute("aria-label", "Edit task");

const deleteButton = document.createElement("button");
deleteButton.className = "task__button task__button--delete";
deleteButton.setAttribute("aria-label", "Delete task");

const deleteButtonImg = document.createElement("img");
deleteButtonImg.src = "./remove.svg";
deleteButtonImg.alt = "Delete";
deleteButtonImg.className = "task__button-icon task__button-icon--delete";
deleteButton.appendChild(deleteButtonImg);

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

taskInput.value="";

}
const addTask = function () {
const taskString = addTaskInput.value.trim();
if (!taskString) return;
const listItem = createNewTaskElement(taskString);
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
addTaskInput.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 () {
const listItem = this.parentNode;
const editInput = listItem.querySelector(".task__input--edit");
const label = listItem.querySelector(".task__label");
const editButton = listItem.querySelector(".task__button--edit");
const isEditMode = listItem.classList.contains("task-list__item--editMode");
if (isEditMode) {
label.innerText = editInput.value;
editButton.innerText = "Edit";
label.classList.remove('task-list__label--editMode');
} else {
editInput.value = label.innerText;
editButton.innerText = "Save";
label.classList.add('task-list__label--editMode');
}
listItem.classList.toggle("task-list__item--editMode");
};


//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 () {
const listItem = this.parentNode;
const ul = listItem.parentNode;
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);

}

const taskCompleted = function () {
const listItem = this.parentNode;
listItem.querySelector(".task__label").classList.add("task-list__item--completed");
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 ajaxRequest=function(){
console.log("AJAX Request");
}

//The glue to hold it all together.
const taskIncomplete = function () {
const listItem = this.parentNode;
listItem.classList.remove("task-list__item--completed");
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
};

// Bind events to a task list item
const bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
const checkBox = taskListItem.querySelector(".task__checkbox");
const editButton = taskListItem.querySelector(".task__button--edit");
const deleteButton = taskListItem.querySelector(".task__button--delete");
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
};

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

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


addButton.addEventListener("click", addTask);

Array.from(incompleteTaskHolder.children).forEach((task) =>
bindTaskEvents(task, 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);
}


Array.from(completedTasksHolder.children).forEach((task) =>
bindTaskEvents(task, 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.
65 changes: 51 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,56 @@
<!DOCTYPE html>
<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>
<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" 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>
<div class="info-block">
<img class="info-block__image" src="./eisenhower-matrix.jpg" alt="How to make decisions on what's important">
<a class="info-block__link" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details</a>
</div>
<div class="centered">
<div id="topSectionForAddingElementToList" class="task">
<label for="new-task" class="task__label--create">Add Item</label>
<div class="task__row">
<input id="new-task" class="task__input task__create" type="text">
<button class="task__button task__button-add">Add</button>
</div>
</div>
<h3 class="task-list__title task-list__title--todo">Todo</h3>
<ul id="incompleteTasks" class="task-list task-list--incomplete">
<li class="task-list__item">
<input type="checkbox" class="task__checkbox">
<label class="task__label">Pay Bills</label>
<input type="text" class="task__input task__input--edit">
<button class="task__button task__button--edit">Edit</button>
<button class="task__button task__button--delete">
<img src="./remove.svg" class="task__button-icon task__button-icon--delete" alt="Delete"></button>
</li>
<li class="task-list__item task-list__item--editMode">
<input type="checkbox" class="task__checkbox">
<label class="task__checkbox task-list__label--editMode">Go Shopping</label>
<input type="text" value="Go Shopping" class="task__input">
<button class="task__button task__button--edit">Save</button>
<button class="task__button task__button--delete">
<img src="./remove.svg" class="task__button-icon task__button-icon--delete" alt="Delete">
</button>
</li>
</ul>
<h3 class="task-list__title task-list__title--completed">Completed</h3>
<ul id="completed-tasks" class="task-list task-list--complete">
<li class="task-list__item">
<input type="checkbox" checked class="task__checkbox">
<label class="task__label task-list__item--completed">See the Doctor</label>
<input type="text" class="task__input task__input--edit">
<button class="task__button task__button--edit">Edit</button>
<button class="task__button task__button--delete">
<img src="./remove.svg" class="task__button-icon--delete" alt="Delete">
</button>
</li>
</ul>
</div>
<script type="text/javascript" SRC="app.js"></script>
<script src="app.js"></script>
</body>
</html>
</html>
Loading