Skip to content

Clean code s1e1 #2

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
AlexandrAlexander wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Clean code s1e1 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f83f519
refactor (basic-2.1): update html according to rule
AlexandrAlexander Apr 19, 2023
07e449b
feat (basic-2.2): add DOCTYPE tag
AlexandrAlexander Apr 19, 2023
ffd5ea9
refactor (basic-2.3): remove mnemonics from html
AlexandrAlexander Apr 19, 2023
6bd75b9
refactor (basic-2.4): remove type attribute from html
AlexandrAlexander Apr 19, 2023
be86ea1
refactor (basic-1.2): update html to lowercase
AlexandrAlexander Apr 19, 2023
46b6a48
refactor(basic-1.3): replace single quotes with double quotes
AlexandrAlexander Apr 20, 2023
1964a17
fix(basic-3.4): add class for body
AlexandrAlexander Apr 20, 2023
129dcb4
refactor(basic-2.1): update html according to rule
AlexandrAlexander Apr 20, 2023
9289793
refactor(basic-3.4): replace tag selectors
AlexandrAlexander Apr 20, 2023
5b0e422
refactor(basic-3.5): format styles
AlexandrAlexander Apr 20, 2023
403d3b7
refactor(basic-3.1): update class name according to BEM
AlexandrAlexander Apr 20, 2023
cf675d4
refactor(basic-2.1): update js according to rule
AlexandrAlexander Apr 20, 2023
0874bc3
fix(extended-1.2): add alt atribute to imgs
AlexandrAlexander Apr 21, 2023
d40ea32
fix(extended-1.1): add semantic elements
AlexandrAlexander Apr 21, 2023
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
237 changes: 121 additions & 116 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,181 +8,186 @@

// 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.getElementById("new-task-input");//Add a new task.
var addButton = document.getElementById("new-task-btn");//first button
var incompleteTaskHolder = document.getElementById("incompleteTasks");//ul of #incompleteTasks
var completedTasksHolder = document.getElementById("completed-tasks");//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");

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

listItem.className = "task";

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

//Each elements, needs appending
checkBox.type = "checkbox";
checkBox.className = 'task__checkbox';

editInput.type = "text";
editInput.className = "task-input task__task-input";

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

deleteButton.className = "task-button delete";
deleteButtonImg.className = "task-button-img";
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);
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);
//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 editTask = function () {
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");


var listItem=this.parentNode;
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){
var editInput = listItem.querySelector('.task-input');
var label = listItem.querySelector(".task__label");
var editBtn = listItem.querySelector(".task-button.edit");
var containsClass = listItem.classList.contains("task-edited");
//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";
}
//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");
//toggle .editmode on the parent.
listItem.classList.toggle("task-edited");
};


//Delete task.
var deleteTask=function(){
console.log("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 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...");
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);
//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 #incompleteTasks.
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.addEventListener("click",addTask);
addButton.addEventListener("click",ajaxRequest);
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");
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
console.log("bind list item events");
//select ListItems children
var checkBox = taskListItem.querySelector(".task__checkbox");
var editButton = taskListItem.querySelector(".task-button.edit");
var deleteButton = taskListItem.querySelector(".task-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;
//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++){
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);
for (var i = 0; i < completedTasksHolder.children.length; i++) {
//bind events to list items chldren(tasksIncompleted)
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}


Expand Down
71 changes: 55 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,58 @@
<!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>
<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>

<head>
<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" charset="utf-8">
</head>

<body class="page">
<figure class="page-title">
<img class="page-title__img" src="./eisenhower-matrix.jpg" alt="eisenhower matrix">
<figcaption><a class="page-title_info-link" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a></figcaption>
</figure>
<main class="wrapper">
<section id="new-task">
<label for="new-task-input" class="new-task__label">Add Item</label>
<div class="new-task-wrapper">
<input id="new-task-input" class="task-input new-task__task-input" type="text">
<button id="new-task-btn" class="task-button">Add</button>
</div>
</section>
<section>
<h3 class="tasks-type-title">Todo</h3>
<ul id="incompleteTasks" class="tasks">
<li class="task">
<input type="checkbox" class="task__checkbox">
<label class="task__label">Pay Bills</label>
<input type="text" class="task-input task__task-input">
<button class="task-button edit">Edit</button>
<button class="task-button delete"><img src="./remove.svg" class="task-button-img" alt="delete"></button>
</li>
<li class="task task-edited">
<input type="checkbox" class="task__checkbox">
<label class="task__label">Go Shopping</label>
<input type="text" value="Go Shopping" class="task-input task__task-input">
<button class="task-button edit">Save</button>
<button class="task-button delete"><img src="./remove.svg" class="task-button-img" alt="delete"></button>
</li>
</ul>
</section>
<section>
<h3 class="tasks-type-title">Completed</h3>
<ul id="completed-tasks" class="tasks">
<li class="task">
<input type="checkbox" checked class="task__checkbox">
<label class="task__label">See the Doctor</label>
<input type="text" class="task-input task__task-input">
<button class="task-button edit">Edit</button>
<button class="task-button delete"><img src="./remove.svg" class="task-button-img" alt="delete"></button>
</li>
</ul>
</section>
</main>
<script src="app.js"></script>
</body>

</html>
Loading