Skip to content

Clean code s1e1 #2

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

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

Clean code s1e1 #2

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
86c9802
style(basic-1.2): change to lowercase index.html
YuliaDemir Dec 12, 2024
fecd01c
style(basic-1.3): change to double quotes index.html
YuliaDemir Dec 12, 2024
5d7aa33
style(basic-1.3): change to double quotes style.css
YuliaDemir Dec 12, 2024
867af37
style(basic-2.1, basic-1.1): put every required element on a new line…
YuliaDemir Dec 12, 2024
53047cf
fix(basic-2.2): add Html5 DOCTYPE tag
YuliaDemir Dec 12, 2024
f426602
style(basic-2.3): replace unnecessary named character references
YuliaDemir Dec 12, 2024
d27a2a8
style(basic-2.4): delete unnecessary type attribute
YuliaDemir Dec 12, 2024
02060b6
refactor(extended-1.1): use section, main and aside tags
YuliaDemir Dec 12, 2024
c72a97c
refactor(extended-1.2): add alt attribute for imgs
YuliaDemir Dec 12, 2024
2e7caa2
fix(basic-3.7): add semicolon
YuliaDemir Dec 12, 2024
a30cccb
style(basic-3.6): add space after property names
YuliaDemir Dec 12, 2024
7ad0c56
style(basic-1.1): correct count of spaces
YuliaDemir Dec 12, 2024
4e9f233
style(basic-3.5): add indentation in blocks
YuliaDemir Dec 12, 2024
e929316
refactor(basic-3.1, basic-3.2, basic-3.3, extended-2.1): rename classes
YuliaDemir Dec 13, 2024
fd1c23f
refactor(basic-3.4): replace the tag selector with class names
YuliaDemir Dec 14, 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
32 changes: 17 additions & 15 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

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


Expand All @@ -28,22 +28,24 @@ var createNewTaskElement=function(taskString){
//button.edit
var editButton=document.createElement("button");//edit button

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

listItem.classList.add("tasks__item");
deleteButtonImg.classList.add("tasks__del-icon");
label.innerText=taskString;
label.className='task';
label.className='tasks__label';

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

editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
editButton.className="edit";
editButton.classList.add("tasks__button_edit", "tasks__button");

deleteButton.className="delete";
deleteButton.classList.add("tasks__button_delete", "tasks__button");
deleteButtonImg.src='./remove.svg';
deleteButton.appendChild(deleteButtonImg);

Expand Down Expand Up @@ -84,12 +86,12 @@ var editTask=function(){

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
var editBtn=listItem.querySelector(".tasks__button_edit");
var containsClass=listItem.classList.contains("tasks__item_edit-mode");
//If class of the parent is .tasks__item_edit-mode
if(containsClass){

//switch to .editmode
//switch to .tasks__item_edit-mode
//label becomes the inputs value.
label.innerText=editInput.value;
editBtn.innerText="Edit";
Expand All @@ -98,8 +100,8 @@ var editTask=function(){
editBtn.innerText="Save";
}

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


Expand Down Expand Up @@ -131,7 +133,7 @@ var taskIncomplete=function(){
console.log("Incomplete Task...");
//Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incompleteTasks.
//Append the task list item to the #incomplete-tasks.
var listItem=this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
Expand All @@ -156,8 +158,8 @@ 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");
var editButton=taskListItem.querySelector(".tasks__button_edit");
var deleteButton=taskListItem.querySelector(".tasks__button_delete");


//Bind editTask to edit button.
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">
<link rel="stylesheet" href="style.css" media="screen" charset="utf-8">
</head>
<body>
<aside class="aside">
<img class="aside__eisenhower-matrix" src="./eisenhower-matrix.jpg" alt="Eisenhower Matrix">
<a class="aside__more-inf-link" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</aside>
<main class="main main_centered">
<section class="task-form">
<label class="task-form__label" for="new-task">Add Item</label>
<div class="task-form__row">
<input class="task-form__input" id="new-task" type="text">
<button class="task-form__button">Add</button>
</div>
</section>
<section class="tasks tasks_todo">
<h3 class="tasks__title">Todo</h3>
<ul class="tasks__list" id="incomplete-tasks">
<li class="tasks__item">
<input class="tasks__checkbox" type="checkbox">
<label class="tasks__label">Pay Bills</label>
<input type="text" class="tasks__input">
<button class="tasks__button tasks__button_edit">Edit</button>
<button class="tasks__button tasks__button_delete">
<img class="tasks__del-icon" src="./remove.svg" alt="Remove">
</button>
</li>
<li class="tasks__item tasks__item_edit-mode">
<input class="tasks__checkbox" type="checkbox">
<label class="tasks__label">Go Shopping</label>
<input type="text" value="Go Shopping" class="tasks__input">
<button class="tasks__button tasks__button_edit">Save</button>
<button class="tasks__button tasks__button_delete">
<img class="tasks__del-icon" src="./remove.svg" alt="Remove">
</button>
</li>
</ul>
</section>
<section class="tasks tasks_completed">
<h3 class="tasks__title">Completed</h3>
<ul class="tasks__list" id="completed-tasks">
<li class="tasks__item tasks__item_completed">
<input class="tasks__checkbox" type="checkbox" checked>
<label class="tasks__label">See the Doctor</label>
<input type="text" class="tasks__input">
<button class="tasks__button tasks__button_edit">Edit</button>
<button class="tasks__button tasks__button_delete">
<img class="tasks__del-icon" src="./remove.svg" alt="Remove">
</button>
</li>
</ul>
</section>
</main>
<script src="app.js"></script>
</body>
</html>
Loading