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

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

Clean code s1e1 #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
fa616b5
refactor(basic-1.1): add indentations
ms-configs2 Dec 15, 2024
8e6b8ed
refactor(basic-1.2): use lowercase in html and css
ms-configs2 Dec 15, 2024
a13caf5
refactor(basic-1.3): use double quotes
ms-configs2 Dec 15, 2024
f5d8c5a
refactor(basic-2.1): formatting html
ms-configs2 Dec 15, 2024
ff45031
fix(basic-2.2): add DOCTYPE
ms-configs2 Dec 15, 2024
7efff04
refactor(basic-2.3): replace named character reference in html
ms-configs2 Dec 15, 2024
ec681ff
fix(basic-2.4): remove unnecessary types in scripts and styles
ms-configs2 Dec 15, 2024
35f6308
refactor(basic-3.1: single style implement
ms-configs2 Dec 16, 2024
7d00fcd
refactor(basic-3.2): done
ms-configs2 Dec 16, 2024
40db6da
refactor(basic-3.3); done
ms-configs2 Dec 16, 2024
02288a4
refactor(basic-3.4,3.5): tag selectors and indentations implement
ms-configs2 Dec 16, 2024
b6596c7
refactor(basic-3.6,3.7,3.8): spaces, semicolons, separations add
ms-configs2 Dec 16, 2024
d0360c9
refactor(advance-1.1): add semantic html
ms-configs2 Dec 16, 2024
3706829
refactor(advance-1.2): add alt for images
ms-configs2 Dec 16, 2024
3b83cdf
refactor(advance-2.1): use BEM for class names
ms-configs2 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
235 changes: 115 additions & 120 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,187 +8,182 @@

// 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
let taskInput = document.getElementById("new-task");//Add a new task.
let addButton = document.getElementsByTagName("button")[0];//first button
let incompleteTaskHolder = document.querySelector(".incompleted-tasks");//ul of #incompleteTasks
let completedTasksHolder = document.querySelector(".completed-tasks");//completed-tasks
let forms = document.querySelectorAll("form");


//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;
let createNewTaskElement = function (taskString) {
let listItem = document.createElement("li");
let checkBox = document.createElement("input"); // INPUT
let label = document.createElement("label"); //LABEL
let editInput = document.createElement("input"); //TEXT
let editButton = document.createElement("button");//EDIT BUTTON
//button.delete
let deleteButton = document.createElement("button");//DELETE BUTTON
let deleteButtonImg = document.createElement("img");//DELETE BUTTON IMAGE
//LI
listItem.className = 'list__item';
//LABEL SETTINGS
label.innerText = taskString;
label.className = "label list__label";
//INPUT SETTINGS
checkBox.type = "checkbox";
checkBox.className = "input_check";
editInput.type = "text";
editInput.className = "input";
//EDIT BUTTON SETTINGS
editButton.innerText = "Edit";
editButton.className = "edit button";
//DELETE BUTTON
deleteButton.className = "delete button";
deleteButtonImg.src = "./remove.svg";
deleteButtonImg.className = "button__image";
deleteButton.appendChild(deleteButtonImg);
//APPENDING TO LI
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);
let addTask = function () {
if (!taskInput.value) return;
let listItem = createNewTaskElement(taskInput.value);

//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);

taskInput.value="";
//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);

taskInput.value = "";
}

//Edit an existing task.

var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");

let editTask = function () {
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");

var listItem=this.parentNode;
let 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){
let editInput = listItem.querySelector("input[type=text]");
let label = listItem.querySelector("label");
let editBtn = listItem.querySelector(".edit");
let containsClass = listItem.classList.contains("edit-mode");
//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("edit-mode");
editInput.focus();
};


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

}


//Mark task completed
var taskCompleted=function(){
console.log("Complete Task...");
let 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
let 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);
let taskIncomplete = function () {
console.log("Incomplete Task...");
//Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incompleteTasks.
let listItem = this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}



var ajaxRequest=function(){
console.log("AJAX Request");
let 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");
let bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
console.log("bind list item events");
//select ListItems children
let checkBox = taskListItem.querySelector("input[type=checkbox]");
let editButton = taskListItem.querySelector("button.edit");
let 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;
//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 (let 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 (let i = 0; i < completedTasksHolder.children.length; i++) {
//bind events to list items chldren(tasksIncompleted)
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

for ( item of forms) {
item.onsubmit = () => false;
}




// Issues with usability don't get seen until they are in front of a human tester.
// Issues with usability don"t get seen until they are in front of a human tester.

//prevent creation of empty tasks.

Expand Down
73 changes: 58 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,62 @@
<!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">
<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>
<header class="header">
<figure>
<img class="header__img" src="./eisenhower-matrix.jpg" alt="matrix-eisenhower">
</figure>
<a class="header__link" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</header>
<main class="TODO">
<section>
<form class="form-addtask">
<label for="new-task" class="label label_new-task">Add Item</label>
<div class="task-row-wrapper">
<input id="new-task" class="input input_new-task" type="text">
<button class="button">Add</button>
</div>
</form>
</section>
<section>
<h3>Todo</h3>
<form class="form-output">
<ul class="list incompleted-tasks">
<li class="list__item">
<input type="checkbox" class="input_check">
<label class="label list__label">Pay Bills</label>
<input type="text" class="input list__input">
<button class="edit button">Edit</button>
<button class="delete button"><img class="button__image" src="./remove.svg" alt="two cross lines"></button>
</li>
<li class="edit-mode list__item">
<input type="checkbox" class="input_check">
<label class="label list__label">Go Shopping</label>
<input type="text" value="Go Shopping" class="input list__input">
<button class="edit button">Save</button>
<button class="delete button"><img class="button__image" src="./remove.svg" alt="two cross lines"></button>
</li>
</ul>
<h3>Completed</h3>
<ul class="list completed-tasks">
<li class="list__item">
<input type="checkbox" class="input_check" checked>
<label class="label list__label">See the Doctor</label>
<input type="text" class="input list__input">
<button class="edit button">Edit</button>
<button class="delete button"><img class="button__image" src="./remove.svg" alt="two cross lines"></button>
</li>
</ul>
</form>
</section>
</main>
<script src="app.js"></script>
</body>

</html>
Loading