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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+286 −278
Open

Clean code s1e1 #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5cfc339
fix(html): change structure of the project
Vl-pod Dec 16, 2024
540d1ad
fix(style.css): fixed structure and some errors
Vl-pod Dec 16, 2024
7ecd95d
feat(app.js): improved readability, removed unnecessary
Vl-pod Dec 16, 2024
92d3918
refactor: rename CSS classes and variables for clarity
Vl-pod Dec 16, 2024
406cf73
feat: create new branch
Vl-pod Dec 17, 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
255 changes: 95 additions & 160 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,195 +1,130 @@
//Document is the DOM can be accessed in the console with document.window.
// Tree is from the top, html, body, p etc.

//Problem: User interaction does not provide the correct results.
//Solution: Add interactivity so the user can manage daily tasks.
//Break things down into smaller steps and take each step at a time.


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


//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';
// Document is the DOM, can be accessed in the console with document.window.
// Tree is from the top: html, body, p, etc.

// Problem: User interaction does not provide the correct results.
// Solution: Add interactivity so the user can manage daily tasks.
// Break things down into smaller steps and take each step at a time.
// Elements
const taskInput = document.getElementById("new-task-input");
const addButton = document.querySelector("button"); // First button
const todoList = document.getElementById("todo-list");
const completedList = document.getElementById("completed-list");

// Create a new task list item
function createNewTaskElement(taskString) {
const listItem = document.createElement("li");

const checkBox = document.createElement("input");
const label = document.createElement("label");
const editInput = document.createElement("input");
const editButton = document.createElement("button");
const deleteButton = document.createElement("button");
const deleteButtonImg = document.createElement("img");

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

checkBox.type = "checkbox";
editInput.type = "text";
editInput.className = "task-input";

editButton.innerText = "Edit";
editButton.className = "edit-btn";

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


//and appending.
// Append elements
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);

return listItem;
}

// Add a task
function addTask() {
if (!taskInput.value.trim()) return; // Prevent creating empty tasks


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);
const listItem = createNewTaskElement(taskInput.value);
todoList.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";
// Edit an existing task
function editTask() {
const listItem = this.parentNode;
const editInput = listItem.querySelector('input[type=text]');
const label = listItem.querySelector("label");
const editBtn = listItem.querySelector(".edit-btn");
const isEditMode = listItem.classList.contains("editing");

if (isEditMode) {
label.innerText = editInput.value;
editBtn.innerText = "Edit";
} else {
editInput.value = label.innerText;
editBtn.innerText = "Save";
}

//toggle .editmode on the parent.
listItem.classList.toggle("editMode");
};


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

listItem.classList.toggle("editing");
}

// Delete task
function deleteTask() {
const listItem = this.parentNode;
listItem.parentNode.removeChild(listItem);
}

//Mark task completed
var taskCompleted=function(){
console.log("Complete Task...");

//Append the task list item to the #completed-tasks
var listItem=this.parentNode;
completedTasksHolder.appendChild(listItem);
// Mark task as completed
function taskCompleted() {
const listItem = this.parentNode;
completedList.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);
// Mark task as incomplete
function taskIncomplete() {
const listItem = this.parentNode;
todoList.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}



var ajaxRequest=function(){
// AJAX request (example placeholder)
function ajaxRequest() {
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);


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;
}

//cycle over incompleteTaskHolder ul list items
//for each list item
for (var i=0; i<incompleteTaskHolder.children.length;i++){
// Bind events to task list items
function bindTaskEvents(taskListItem, checkBoxEventHandler) {
const checkBox = taskListItem.querySelector("input[type=checkbox]");
const editButton = taskListItem.querySelector("button.edit-btn");
const deleteButton = taskListItem.querySelector("button.delete-btn");

//bind events to list items chldren(tasksCompleted)
bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
}

// Initialize tasks
function initializeTasks() {
Array.from(todoList.children).forEach(item => {
bindTaskEvents(item, 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);
Array.from(completedList.children).forEach(item => {
bindTaskEvents(item, taskIncomplete);
});
}

// Set the click handler for the add button
addButton.addEventListener("click", addTask);
addButton.addEventListener("click", ajaxRequest);



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

//prevent creation of empty tasks.

//Change edit to save when you are in edit mode.
// Initialize existing tasks on page load
initializeTasks();
80 changes: 63 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,65 @@
<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>
<!DOCTYPE html>
<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" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</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-container">
<img src="./eisenhower-matrix.jpg" alt="Eisenhower Matrix">
<a class="info-link" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</div>

<div class="main-container">
<p id="task-input-section">
<label for="new-task-input">Add Item</label>
<div class="task-input-wrapper">
<input id="new-task-input" class="task-input" type="text" placeholder="New task">
<button>Add</button>
</div>
</p>

<h3>Todo</h3>
<ul id="todo-list">
<li>
<input type="checkbox">
<label class="task-label">Pay Bills</label>
<input type="text" class="task-input">
<button class="edit-btn">Edit</button>
<button class="delete-btn">
<img src="./remove.svg" alt="Remove task">
</button>
</li>
<li class="editing">
<input type="checkbox">
<label class="task-label">Go Shopping</label>
<input type="text" value="Go Shopping" class="task-input">
<button class="edit-btn">Save</button>
<button class="delete-btn">
<img src="./remove.svg" alt="Remove task">
</button>
</li>
</ul>

<h3>Completed</h3>
<ul id="completed-list">
<li>
<input type="checkbox" checked>
<label class="task-label">See the Doctor</label>
<input type="text" class="task-input">
<button class="edit-btn">Edit</button>
<button class="delete-btn">
<img src="./remove.svg" alt="Remove task">
</button>
</li>
</ul>
</div>
<!-- TODO: be stronger -->
<script type="text/javascript" src="app.js"></script>

</body>
</html>
</html>
Loading