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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+251 −163
Open

Clean code s1e1 #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e5d257c
fixing: changes y faults
Asilovvv Dec 16, 2024
2ed67e4
fixing: changes y faults
Asilovvv Dec 16, 2024
9c80f58
fixing: fix
Asilovvv 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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}
126 changes: 65 additions & 61 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,47 @@

// 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");//completed-tasks


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

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

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

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

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

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

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

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

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


Expand All @@ -59,130 +63,130 @@ var createNewTaskElement=function(taskString){



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


var listItem=this.parentNode;
const 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
const editInput = listItem.querySelector('.task__input');
const label = listItem.querySelector(".task__title");
const editBtn = listItem.querySelector(".btn-edit");
const containsClass = listItem.classList.contains(".task_edit-mode");
//If class of the parent is .edit-mode
if(containsClass){

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

//toggle .editmode on the parent.
listItem.classList.toggle("editMode");
//toggle .edit-mode on the parent.
listItem.classList.toggle("task_edit-mode");
};


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

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

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

}


var taskIncomplete=function(){
const 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;
const listItem = this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
bindTaskEvents(listItem, taskCompleted);
}



var ajaxRequest=function(){
const 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){
const 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");
const checkBox = taskListItem.querySelector(".task__check");
const editButton = taskListItem.querySelector(".btn-edit");
const deleteButton = taskListItem.querySelector(".btn-delete");


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

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

//bind events to list items chldren(tasksCompleted)
bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);
}




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


Expand Down
72 changes: 57 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,61 @@
<!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 rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<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>
</ul>
</div>
<script type="text/javascript" SRC="app.js"></script>
<div class="header">
<img
class="header__img"
src="./eisenhower-matrix.jpg"
alt="Eisenhower Matrix"
>
<a class="header__link-info" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</div>
<div class="main">
<p class="section-add" id="topSectionForAddingElementToList">
<label class="section-add__title" for="new-task">Add Item</label>
<div class="section-add__row-wrapper">
<input class="task__input section-add__input task__title" id="new-task" type="text">
<button class="btn" type="button">Add</button>
</div>
</p>
<h3 class="section-title">Todo</h3>
<ul class="list" id="incompleteTasks">
<li class="task">
<input class="task__check" type="checkbox">
<label class="task__title">Pay Bills</label>
<input class="task__input" type="text">
<button class="btn btn-edit" type="button">Edit</button>
<button class="btn btn-delete" type="button">
<img class="btn-delete__img" src="./remove.svg">
</button>
</li>
<li class="task task_edit-mode">
<input class="task__check" type="checkbox">
<label class="task__title">Go Shopping</label>
<input class="task__input" type="text" value="Go Shopping">
<button class="btn btn-edit" type="button">Save</button>
<button class="btn btn-delete" type="button">
<img class="btn-delete__img" src="./remove.svg">
</button>
</li>
</ul>
<h3 class="section-title">Completed</h3>
<ul class="list list_comleted" id="completedTasks">
<li class="task">
<input class="task__check" type="checkbox" checked>
<label class="task__title">See the Doctor</label>
<input class="task__input" type="text">
<button class="btn btn-edit" type="button">Edit</button>
<button class="btn btn-delete" type="button">
<img class="btn-delete__img" src="./remove.svg">
</button>
</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
Loading