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

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

Clean code s1e1 #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
2b4f72a
refactor(basic-1.1): change indentations for 2 spaces
Alex4421 Dec 15, 2024
308ca51
refactor(basic-1.2): use lowercase
Alex4421 Dec 15, 2024
d696087
refactor(basic-1.3): use double quotes instead of single quotes
Alex4421 Dec 15, 2024
32c2bbd
refactor(basic-2.1): format index
Alex4421 Dec 15, 2024
5b649be
refactor(basic-2.2):add doctype for index
Alex4421 Dec 15, 2024
f29c48d
refactor(basic-2.3):replacement named character
Alex4421 Dec 15, 2024
75913b9
refactor(basic-2.4):delete type
Alex4421 Dec 15, 2024
d40bec2
refactor(basic-2.5):Line-Wrapping for index
Alex4421 Dec 15, 2024
8ffaecb
refactor(basic-3.1):Single style for selectors naming
Alex4421 Dec 16, 2024
4bbaecb
refactor(basic-3.2):Meaningful naming of identifiers and classes
Alex4421 Dec 16, 2024
8de1e29
refactor(basic-3.3):Keep the names of identifiers and classes concise
Alex4421 Dec 16, 2024
1e1e131
refactor(basic-3.4):replace tag selectors
Alex4421 Dec 16, 2024
9f629b4
refactor(basic-3.5):add indentation in blocks
Alex4421 Dec 16, 2024
b520e48
refactor(basic-3.6):add space after names
Alex4421 Dec 16, 2024
8216b91
refactor(basic-3.7):add semicolon
Alex4421 Dec 16, 2024
dc9c926
refactor(basic-3.8):separate selectors and properties
Alex4421 Dec 16, 2024
c3ec588
refactor(advanced-1.1):add semantic tags
Alex4421 Dec 16, 2024
fb829eb
refactor(advanced-1.2):add media alt
Alex4421 Dec 16, 2024
c10ef44
refactor(advanced-1.3):bem natation
Alex4421 Dec 16, 2024
f603186
fix(with no rule):fix doctype tag
Alex4421 Dec 16, 2024
f78fe5d
fix(with no rule):fix html tag
Alex4421 Dec 16, 2024
3f4d588
add meta tags
Alex4421 Dec 16, 2024
26750be
refactor(basic-2.5): add html line-wrapping
Alex4421 Dec 16, 2024
c8d25b3
refactor(basic-2.5): add html line-wrapping
Alex4421 Dec 16, 2024
8998c42
refactor(with no rule):refactor app.js
Alex4421 Dec 16, 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
220 changes: 112 additions & 108 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,139 +8,143 @@

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

var taskInput=document.getElementById("new-task");//Add a new task.
var taskInput=document.querySelector(".add-section__input");//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 incompleteTaskHolder=document.querySelector(".todo-section__content");//ul of .todo-section__content
var completedTasksHolder=document.querySelector(".complete-section__content");//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 listItem=document.createElement("li");
listItem.classList.add("list");
//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
deleteButtonImg.className='delete-btn__img';

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

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

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

deleteButton.className="delete-btn task-button";
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);
console.log("Add Task...");
//Create a new list item with the text from the .add-section__input:
if (!taskInput.value) return;
var listItem=createNewTaskElement(taskInput.value);

//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
//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");
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");


var listItem=this.parentNode;

var editInput=listItem.querySelector('.task-input');
var label=listItem.querySelector("label");
var editBtn=listItem.querySelector(".edit-btn");
var containsClass=listItem.classList.contains("todo-section__edit");
//If class of the parent is .todo-section__edit
if(containsClass){

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

//toggle .todo-section__edit on the parent.
listItem.classList.toggle("todo-section__edit");
};


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

var listItem=this.parentNode;
var ul=listItem.parentNode;
//Remove the parent list item from the ul.
ul.removeChild(listItem);
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...");
console.log("Complete Task...");

//Append the task list item to the #completed-tasks
var listItem=this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
//Append the task list item to the .complete-section__content
var listItem=this.parentNode;
completedTasksHolder.appendChild(listItem);
listItem.classList.add('complete-section__list');
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);
console.log("Incomplete Task...");
//Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the .todo-section__content.
var listItem=this.parentNode;
listItem.classList.remove('complete-section__list');
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
}



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

//The glue to hold it all together.
Expand All @@ -153,36 +157,36 @@ 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;
console.log("bind list item events");
//select ListItems children
var checkBox=taskListItem.querySelector(".checkbox");
var editButton=taskListItem.querySelector("button.edit-btn");
var deleteButton=taskListItem.querySelector("button.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);
//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);
//bind events to list items chldren(tasksIncompleted)
bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
}


Expand Down
100 changes: 82 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,83 @@
<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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700"
rel="stylesheet">
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body class="body">
<header class="header">
<img
class="header__img"
src="./eisenhower-matrix.jpg"
alt="Matrix-picture"
>
<a class="header__link"
href="https://goal-life.com/page/method/matrix-eisenhower">
Want more details?
</a>
</header>
<main class="main">
<section class="add-section">
<h3 class="add-section__header">Add Item</h3>
<div class="add-section__content">
<input
class="add-section__input task-input"
type="text"
>
<button class="add-section__button task-button">Add</button>
</div>
</section>
<section class="todo-section">
<h3 class="todo-section__header">Todo</h3>
<ul class="todo-section__content">
<li class="todo-section__task list">
<input
class="todo-section__task-chekbox checkbox"
type="checkbox"
>
<label class="task-label">Pay Bills</label>
<input class="task-input" type="text">
<button class="edit-btn task-button">Edit</button>
<button class="delete-btn task-button">
<img class="delete-btn__img" src="./remove.svg" alt="delete">
</button>
</li>
<li class="todo-section__edit list">
<input
class="todo-section__edit-chekbox checkbox"
type="checkbox"
>
<label class="task-label">Go Shopping</label>
<input class="task-input" type="text" value="Go Shopping">
<button class="edit-btn task-button">Save</button>
<button class="delete-btn task-button">
<img class="delete-btn__img" src="./remove.svg" alt="delete">
</button>
</li>
</ul>
</section>
<section class="complete-section">
<h3 class="complete-section__header">Completed</h3>
<ul class="complete-section__content">
<li class="complete-section__list list">
<input
class="complete-section__list-checkbox checkbox"
type="checkbox" checked
>
<label class="task-label">See the Doctor</label>
<input class="task-input" type="text">
<button class="edit-btn task-button">Edit</button>
<button class="delete-btn task-button">
<img class="delete-btn__img" src="./remove.svg" alt="delete">
</button>
</li>
</ul>
</section>
</main>
<script src="app.js"></script>
</body>
</html>
Loading