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

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

Clean code s1e1 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
7061c11
fix(basic-2.2): add Html5 DOCTYPE tag
pixelGoblin Dec 14, 2024
bc0bbe6
refactor(basic-1.2): fix uppercase in head tag
pixelGoblin Dec 14, 2024
98c5ac6
refactor(basic-1.1 and basic-2.1): fix indentation and add formatting…
pixelGoblin Dec 14, 2024
41436a5
refactor(basic-1.3): change quotes from single to double
pixelGoblin Dec 14, 2024
2ef5277
refactor(basic-1.2): change uppercase to lowercase
pixelGoblin Dec 14, 2024
3647256
refactor(basic-2.3): change named character reference to its represen…
pixelGoblin Dec 14, 2024
c26132c
refactor(basic-2.4): remove type attribute from link tags for css and js
pixelGoblin Dec 14, 2024
46bfece
refactor(extended-1.2): add media alternatives
pixelGoblin Dec 14, 2024
fd31475
refactor(basic-1.1 and basic-2.1): indent head and body tags. Additio…
pixelGoblin Dec 14, 2024
8411d7f
refactor(basic-1.1): fix indentation in css file
pixelGoblin Dec 14, 2024
5b963b9
refactor(basic-1.2): fix upper case in css file
pixelGoblin Dec 14, 2024
1089661
refactor(basic-1.3): change single quotes to double in css file
pixelGoblin Dec 14, 2024
c88ad56
refactor(basic-3.1): add single style to selectors naming
pixelGoblin Dec 14, 2024
70f93b1
refactor(basic-3.2): change classes and ids naming to more meaningfull
pixelGoblin Dec 14, 2024
270d385
refactor(basic-3.3): shorten class names
pixelGoblin Dec 14, 2024
6dd8fe7
refactor(basic-3.4): remove tag selectors and replace them with classes
pixelGoblin Dec 14, 2024
bfd3253
refactor(basic-3.5): add indentation in blocks in css file
pixelGoblin Dec 14, 2024
a31e41a
refactor(basic-3.6): add spaces after colons in css
pixelGoblin Dec 14, 2024
cd74127
fix(basic-3.7): add semicolon after properties in css
pixelGoblin Dec 14, 2024
e2fe1bb
refactor(extended-1.1): change generic tags to semantic
pixelGoblin Dec 15, 2024
cff6b1c
refactor(basic-1.1): fix indentation from 4 to 2 spaces in js file
pixelGoblin Dec 15, 2024
9891ffe
refactor(extended-1.2): add media alternatives in js file
pixelGoblin Dec 15, 2024
f2c9da4
fix(basic-3.2): fix classes and identifiers in js file
pixelGoblin Dec 15, 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
216 changes: 110 additions & 106 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,137 +10,141 @@

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 incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
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 listItem=document.createElement("li");
listItem.className="task-item";

//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-text task-label';

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

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

deleteButton.className="delete task-button";
deleteButtonImg.src='./remove.svg';
deleteButtonImg.alt = 'delete button';
deleteButtonImg.className='button-image';
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 #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 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('input[type=text]');
var label=listItem.querySelector("label");
var editBtn=listItem.querySelector(".edit");
var containsClass=listItem.classList.contains("edit-mode");
//If class of the parent is .edit-mode
if(containsClass){

//switch to .edit-mode
//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("edit-mode");
};


//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 #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);
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");
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("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);
//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
76 changes: 59 additions & 17 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>
<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>
<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 class="page">
<header class="header">
<img class="header-image" src="./eisenhower-matrix.jpg" alt="eisenhower matrix image">
<a class="more-information" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</header>
<main class="main">
<section id="add-new-task">
<h1 class="task-label new-task">Add Item</h1>
<div class="task-row-wrapper">
<input id="new-task" class="task-text task-input" type="text">
<button class="task-button">Add</button>
</div>
</section>
<section>
<h2 class="section-title">Todo</h2>
<ul class="task-list" id="incomplete-tasks">
<li class="task-item">
<input type="checkbox" class="task-input">
<label class="task-text task-label">Pay Bills</label>
<input type="text" class="task-text task-input">
<button class="edit task-button">Edit</button>
<button class="delete task-button">
<img class="button-image" src="./remove.svg" alt="delete button">
</button>
</li>
<li class="edit-mode task-item">
<input type="checkbox" class="task-input">
<label class="task-text task-label">Go Shopping</label>
<input type="text" value="Go Shopping" class="task-text task-input">
<button class="edit task-button">Save</button>
<button class="delete task-button">
<img class="button-image" src="./remove.svg" alt="delete button">
</button>
</li>
</ul>
</section>
<section>
<h3 class="section-title">Completed</h3>
<ul class="task-list" id="completed-tasks">
<li class="task-item">
<input class="task-input" type="checkbox" checked>
<label class="task-text task-label">See the Doctor</label>
<input type="text" class="task-text task-input">
<button class="edit task-button">Edit</button>
<button class="delete task-button">
<img class="button-image" src="./remove.svg" alt="delete button">
</button>
</li>
</ul>
</section>
</main>
<script src="app.js"></script>
</body>
</html>
Loading