Skip to content

Clean code s1e1 #173

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 11 commits into
base: main
Choose a base branch
from
Open

Clean code s1e1 #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
627315e
refactor(basic-1.1 and 2.1):update indentation and formatting in HTML…
mahmoudsebaie Oct 20, 2025
0d4eabc
refactor(basic-1.2): convert all HTML tags, attributes, and CSS selec…
mahmoudsebaie Oct 20, 2025
2d1cac9
refactor(basic-1.3): standardize quotes for HTML attributes to double…
mahmoudsebaie Oct 20, 2025
9749acc
fix(basic-2.2): add Html5 DOCTYPE tag
mahmoudsebaie Oct 20, 2025
e4358df
fix(basic-2.3): update named character references in html
mahmoudsebaie Oct 20, 2025
74920c2
fix(basic-2.4): remove 'type' attribute from style and script tags
mahmoudsebaie Oct 20, 2025
57eabb6
fix(extended-2.1): improve semantic structure, add accessibility attr…
mahmoudsebaie Oct 20, 2025
ee51c27
fix(extended-2.2): add media alternatives
mahmoudsebaie Oct 20, 2025
666d2eb
fix(basic-3.1-3.4): standardize uniform naming style for selectors an…
mahmoudsebaie Oct 21, 2025
c59f846
fix(basic-3.5-3.8): add indentation in blocks, spaces after property …
mahmoudsebaie Oct 21, 2025
c39bc6a
refactor: improve HTML, CSS, and JS structure for stable and correct …
mahmoudsebaie Oct 21, 2025
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
66 changes: 27 additions & 39 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,38 @@
// 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 addButton=document.querySelector(".task-form__submit");//first button
var incompleteTaskHolder=document.getElementById("todo-list");//ul of #incompleteTasks
var completedTasksHolder=document.getElementById("completed-list");//completed-tasks


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

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

listItem.className = "task-item";
//input (checkbox)
var checkBox=document.createElement("input");//checkbx
checkBox.type = "checkbox";
checkBox.className = "task-item__checkbox";
//label
var label=document.createElement("label");//label
label.className = "task-item__label";
label.innerText = taskString;
//input (text)
var editInput=document.createElement("input");//text
editInput.type = "text";
editInput.className = "task-item__edit";
//button.edit
var editButton=document.createElement("button");//edit button

editButton.innerText = "Edit";
editButton.className = "task-item__edit-btn";
//button.delete
var deleteButton=document.createElement("button");//delete button
deleteButton.className = "task-item__delete-btn";
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';
deleteButtonImg.src = "./remove.svg";
deleteButtonImg.className = "task-item__delete-icon";
deleteButton.appendChild(deleteButtonImg);


Expand All @@ -59,8 +55,8 @@ var createNewTaskElement=function(taskString){



var addTask=function(){
console.log("Add Task...");
var addTask=function(e){
if (e && typeof e.preventDefault === "function") e.preventDefault();
//Create a new list item with the text from the #new-task:
if (!taskInput.value) return;
var listItem=createNewTaskElement(taskInput.value);
Expand All @@ -76,18 +72,15 @@ var addTask=function(){
//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");
var editInput=listItem.querySelector(".task-item__edit");
var label=listItem.querySelector(".task-item__label");
var editBtn=listItem.querySelector(".task-item__edit-btn");
var isEditing =listItem.classList.contains("task-item--editing");
//If class of the parent is .editmode
if(containsClass){
if(isEditing){

//switch to .editmode
//label becomes the inputs value.
Expand All @@ -99,13 +92,12 @@ var editTask=function(){
}

//toggle .editmode on the parent.
listItem.classList.toggle("editMode");
listItem.classList.toggle("task-item--editing");
};


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

var listItem=this.parentNode;
var ul=listItem.parentNode;
Expand All @@ -117,8 +109,6 @@ var deleteTask=function(){

//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);
Expand All @@ -128,7 +118,6 @@ var taskCompleted=function(){


var taskIncomplete=function(){
console.log("Incomplete Task...");
//Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incompleteTasks.
Expand All @@ -147,17 +136,16 @@ var ajaxRequest=function(){


//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");
var checkBox=taskListItem.querySelector(".task-item__checkbox");
var editButton=taskListItem.querySelector(".task-item__edit-btn");
var deleteButton=taskListItem.querySelector(".task-item__delete-btn");


//Bind editTask to edit button.
Expand Down
84 changes: 65 additions & 19 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>
<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>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Todo App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="hero">
<div class="hero__media">
<img src="./eisenhower-matrix.jpg" class="hero__image" alt="Матрица Эйзенхауэра: важное/срочное">
<a class="hero__more-info" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</div>
</header>
<main class="layout layout--narrow">
<section class="add-item" aria-labelledby="add-item-title">
<h1 class="add-item__title" id="add-item-title">Add Item</h1>
<form class="task-form" action="#" method="post">
<input id="new-task" class="task-form__input" type="text" name="task"/>
<button class="task-form__submit" type="submit">Add</button>
</form>
</section>
<section class="task-section" aria-labelledby="todo-title">
<h2 class="task-section__title" id="todo-title">Todo</h2>
<ul class="task-list" id="todo-list">
<li class="task-item">
<input id="task-1" class="task-item__checkbox" type="checkbox"/>
<label for="task-1" class="task-item__label">Go Shopping</label>
<input type="text" class="task-item__edit" aria-label="Редактировать: Go Shopping" />
<button class="task-item__edit-btn" type="button">Edit</button>
<button class="task-item__delete-btn" type="button" aria-label="Удалить задачу «Go Shopping»">
<img src="./remove.svg" class="task-item__delete-icon" alt=""/>
</button>
</li>
<li class="task-item task-item--editing">
<input id="task-2" class="task-item__checkbox" type="checkbox" />
<label for="task-2" class="task-item__label">New task</label>
<input type="text" value="New task" class="task-item__edit" aria-label="Редактировать: New task"/>
<button class="task-item__edit-btn" type="button">Save</button>
<button class="task-item__delete-btn" type="button" aria-label="Удалить задачу «New task»">
<img src="./remove.svg" class="task-item__delete-icon" alt=""/>
</button>
</li>
</ul>
</section>
<section class="task-section" aria-labelledby="completed-title">
<h2 class="task-section__title" id="completed-title">Completed</h2>
<ul class="task-list task-list--completed" id="completed-list">
<li class="task-item">
<input id="task-3" class="task-item__checkbox" type="checkbox" checked />
<label for="task-3" class="task-item__label">See the Doctor</label>
<input type="text" class="task-item__edit" aria-label="Редактировать: See the Doctor"/>
<button class="task-item__edit-btn" type="button">Edit</button>
<button class="task-item__delete-btn" type="button" aria-label="Удалить задачу «See the Doctor»">
<img src="./remove.svg" class="task-item__delete-icon" alt="" />
</button>
</li>
</ul>
</section>
</main>
<script src="app.js"></script>
</body>
</html>
Loading