Skip to content

Clean code s1e1 #161

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

Clean code s1e1 #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
474e879
init: add html file
arnikill Apr 21, 2023
ab926f1
fix(basik-1.3):converted from single quotes to double quotes
arnikill Apr 22, 2023
7a6ef9f
feat: add images foldder
arnikill Apr 22, 2023
bbf673f
feat: add html file
arnikill Apr 22, 2023
d0c6782
init: add css file
arnikill Apr 22, 2023
8ed5a04
fix(basic-3.4): add selector in body
arnikill Apr 22, 2023
ccebfef
fix(basic-2.2): add Html5 DOCTYPE tag
arnikill Apr 22, 2023
5a86aa7
refactor(extended-2.1): update html according to BEM
arnikill Apr 22, 2023
68639e8
fix: ad = add
arnikill Apr 22, 2023
3cf84bd
fix(basic-3.4): remove all tag selectors and changed it
arnikill Apr 22, 2023
829d96c
init: add app.js
arnikill Apr 23, 2023
5f8fb0d
refactor: add selector in img tag
arnikill Apr 23, 2023
4dfc973
fix: app.js fixed
arnikill Apr 23, 2023
d4e4443
fix: html file
arnikill Apr 24, 2023
7158415
fix: link style.css
arnikill Apr 24, 2023
ea95c9f
fix: fix input go shopping
arnikill Apr 24, 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
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,44 +8,48 @@

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


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

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

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

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

label.innerText=taskString;
label.className='task';
label.innerText = taskString;
listItem.className = 'list-item';
label.className = 'list-item__label';

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

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 = "list-item__edit";

deleteButton.className="delete";
deleteButtonImg.src='./remove.svg';
deleteButton.className = "list-item__remove";
deleteButtonImg.src = './remove.svg';
deleteButton.appendChild(deleteButtonImg);
deleteButtonImg.classList = "list-item__remove__svg";



//and appending.
Expand All @@ -59,43 +63,43 @@ var createNewTaskElement=function(taskString){



var addTask=function(){
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 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(){
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");
var editInput = listItem.querySelector('.list-item__input');
var label = listItem.querySelector(".list-item__label");
var editBtn = listItem.querySelector(".list-item__edit");
var containsClass = listItem.classList.contains("contribute");
//If class of the parent is .editmode
if(containsClass){
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";
label.innerText = editInput.value;
editBtn.innerText = "Edit";
} else {
editInput.value = label.innerText;
editBtn.innerText = "Save";
}

//toggle .editmode on the parent.
Expand All @@ -104,85 +108,85 @@ var editTask=function(){


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

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

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

}


var taskIncomplete=function(){
var taskIncomplete = function () {
console.log("Incomplete Task...");
//Mark task as incomplete.
//Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incompleteTasks.
var listItem=this.parentNode;
var listItem = this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
bindTaskEvents(listItem, taskCompleted);
}



var ajaxRequest=function(){
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){
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");
//select ListItems children
var checkBox = taskListItem.querySelector(".list-item__checkbox");
var editButton = taskListItem.querySelector(".list-item__edit");
var deleteButton = taskListItem.querySelector(".list-item__remove");


//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 (var 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 (var 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
Binary file added images/assets/eisenhower-matrix.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions images/icon/remove.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 65 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,68 @@
<!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>to do list</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>

<body class="pages">
<header>
<div class="header">
<img class="header-image" src="./images/assets/eisenhower-matrix.jpg" alt="eisenhower-matrix">
</div>
<a class="link" href="https://goal-life.com/page/method/matrix-eisenhower">
Want more details?
</a>
</header>
<main class="main">
<section class="container">
<h2 class="title" for="add-input">Add Item</h2>
<div class="add-to-do">
<input id="input" class="add-to-do__input">
<button class="add-to-do_button">Add</button>
</div>
</section>
<section>
<h2 class="title">Todo</h2>
<ul id="active-list">
<li class="list-item">
<input type="checkbox" class="list-item__checkbox">
<label class="list-item__label">Pay Bills</label>
<input type="text" class="list-item__input">
<button class="list-item__edit">Edit</button>
<button class="list-item__remove">
<img src="./images/icon/remove.svg" alt="remove-btn">
</button>
</li>
<li class="contribute list-item">
<input type="checkbox" class="list-item__checkbox">
<label class="list-item__label">Go Shopping</label>
<input type="text" value="Go Shopping" class="list-item__input">
<button class="list-item__edit">Save</button>
<button class="list-item__remove">
<img src="./images/icon/remove.svg" alt="remove-btn">
</button>
</li>
</ul>
</section>
<section>
<h2 class="title">Compleated</h2>
<div id="compleated-list">
<li class="list-item">
<input type="checkbox" class="list-item__checkbox" checked>
<label class="list-item__label"><s>See the Doctor</s></label>
<input type="text" class="list-item__input">
<button class="list-item__edit">Edit</button>
<button class="list-item__remove">
<img class="list-item__remove__svg" src="./images/icon/remove.svg" alt="remove-btn">
</button>
</li>
</div>
</section>
</main>
<script src="app.js"></script>
</body>

</html>
Loading