Skip to content

Clean code s1e1 #151

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

Clean code s1e1 #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a32700a
refactor: delete attribute 'type' in tags according to rule 2.4 in ht…
xolmuxammad-xaydarov Apr 22, 2023
951190d
refactor: change uppercase to lower according to rule 1.2 in html-and…
xolmuxammad-xaydarov Apr 22, 2023
bbecbdb
refactor: formatting html according to rule 2.1 in html-and-css.md
xolmuxammad-xaydarov Apr 22, 2023
17ff656
refactor: change quotes from single to double according to rule 1.3 i…
xolmuxammad-xaydarov Apr 22, 2023
47fc6f3
refactor: change symbol to '?' according to rule 2.3 in html-and-css.md
xolmuxammad-xaydarov Apr 22, 2023
4175672
refactor: reformatting tags according to rule 2.1 in html-and-css.md
xolmuxammad-xaydarov Apr 22, 2023
583c46c
refactor: add ВЕМ and semantic tags rule 1.1, 2.1 in html-and-css-ext…
xolmuxammad-xaydarov Apr 23, 2023
ad9e2af
refactor: add alt to tag img rule 1.2 in html-and-css-extended.md
xolmuxammad-xaydarov Apr 23, 2023
06737eb
refactor: formatting css according rule 3.5, 3.6, 3.7, 3,8
xolmuxammad-xaydarov Apr 23, 2023
7acc53e
refactor: add alt to img, add ВЕМ rule 1.2, 2.1 in extended, 3.1, 3.2…
xolmuxammad-xaydarov 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
36 changes: 19 additions & 17 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
// 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 addButton=document.querySelector(".task-add__btn");//first button
var incompleteTaskHolder=document.getElementById("incompleted-tasks");//ul of #incompleteTasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks


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

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

listItem.classList='task';
//input (checkbox)
var checkBox=document.createElement("input");//checkbx
//label
Expand All @@ -33,18 +33,21 @@ var createNewTaskElement=function(taskString){
var deleteButtonImg=document.createElement("img");//delete button image

label.innerText=taskString;
label.className='task';
label.className='task__name';

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

editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
editButton.className="edit";
editButton.className="task__btn_edit";

deleteButton.className="delete";
deleteButton.className="task__btn_delete";
deleteButtonImg.src='./remove.svg';
deleteButtonImg.alt = 'task delete button';
deleteButtonImg.classList='task__del-btn-icon';
deleteButton.appendChild(deleteButtonImg);


Expand Down Expand Up @@ -81,15 +84,14 @@ var editTask=function(){


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

//switch to .editmode
//switch to .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 .edit-mode on the parent.
listItem.classList.toggle("edit-mode");
};


Expand Down Expand Up @@ -147,7 +149,7 @@ var ajaxRequest=function(){


//Set the click handler to the addTask function.
addButton.onclick=addTask;
// addButton.onclick=addTask;
addButton.addEventListener("click",addTask);
addButton.addEventListener("click",ajaxRequest);

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(".task__btn_edit");
var deleteButton=taskListItem.querySelector(".task__btn_delete");


//Bind editTask to edit button.
Expand Down
69 changes: 51 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,52 @@
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Todo App</title>
</head>
<body class="wrapper">
<header class="header">
<img class="header__img" src="./eisenhower-matrix.jpg" alt="matrix">
<a class="more-inf" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</header>
<main class="main">
<h3 class="main__title">Add Item</h3>
<section class="main__add-task task-add">
<input id="new-task" class="task-add__input" type="text">
<button class="task-add__btn">Add</button>
</section>
<h3 class="main__title">Todo</h3>
<ul id="incompleted-tasks" class="main__incomplate-task">
<li class="task">
<input type="checkbox" class="task__checkbox">
<label class="task__name">Pay Bills</label>
<input type="text" class="task__input">
<button class="task__btn task__btn_edit">Edit</button>
<button class="task__btn task__btn_delete"><img src="./remove.svg" alt="task delete button" class="task__del-btn-icon"></button>
</li>
<li class="task editMode">
<input type="checkbox" class="task__checkbox">
<label class="task__name">Go Shopping</label>
<input type="text" value="Go Shopping" class="task__input">
<button class="task__btn task__btn_edit">Save</button>
<button class="task__btn task__btn_delete"><img src="./remove.svg" alt="task delete button" class="task__del-btn-icon"></button>
</li>
</ul>
<h3 class="main__title">Completed</h3>
<ul id="completed-tasks" class="main__complate-task">
<li class="task">
<input type="checkbox" checked class="task__checkbox">
<label class="task__name">See the Doctor</label>
<input type="text" class="task__input">
<button class="task__btn task__btn_edit">Edit</button>
<button class="task__btn task__btn_delete"><img src="./remove.svg" alt="task delete button" class="task__del-btn-icon"></button>
</li>
</ul>
</main>
<script src="app.js"></script>
</body>
</html>
Loading