Skip to content

Clean code s1e1 #1

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

Clean code s1e1 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
7781786
refactor: adjust HTML-formating according ro rule 2.1 in html-css.md
AlexanderSUS Nov 26, 2021
b378b11
refactor: adjust HTML-formating according ro rule 2.2 in html-css.md
AlexanderSUS Nov 26, 2021
4e41c78
refactor: adjust HTML-formating according ro rule 2.3 in html-css.md
AlexanderSUS Nov 26, 2021
04764be
refactor: adjust HTML-formating according ro rule 2.4 in html-css.md
AlexanderSUS Nov 26, 2021
5c546a3
refactor: adjust HTML-formating according ro rule 1.2 in html-css.md
AlexanderSUS Nov 26, 2021
2b4ab79
refactor: adjust HTML-formating according ro rule 1.3 in html-css.md
AlexanderSUS Nov 26, 2021
710f5c2
refactor: adjust CSS-formating according ro rule 1.1 in html-css.md
AlexanderSUS Nov 26, 2021
b4cd8c5
refactor: adjust CSS-formating according ro rule 3.5 in html-css.md
AlexanderSUS Nov 26, 2021
02c3c4d
refactor: adjust CSS-formating according ro rule 3.7 in html-css.md
AlexanderSUS Nov 26, 2021
549edfa
refactor: adjust CSS-formating according ro rule 1.2 in html-css.md
AlexanderSUS Nov 26, 2021
cd0e0b4
refactor: adjust CSS-formating according ro rule 3.6 in html-css.md
AlexanderSUS Nov 27, 2021
7fde444
refactor: adjust HTML-formating according ro rule 1.1 in html-css-ext…
AlexanderSUS Nov 28, 2021
5581b1f
refactor: implement BEM notaition accordig to rule 2.1 in html-css-ex…
AlexanderSUS Nov 28, 2021
0fd08be
refactor: add alt attribute to multimedia accordig to rule 1.2 in htm…
AlexanderSUS Nov 28, 2021
599a144
refactor: add lang attribure to HTML file
AlexanderSUS Nov 28, 2021
3f58c13
fix: replace character encoding to separate meta tag
AlexanderSUS Nov 28, 2021
6e840e6
refactor: adjust formating to app.js file according rule 2.4 from htm…
AlexanderSUS Nov 28, 2021
08cd98f
fix: fix classes name in all files according to rule 3.1 in html-and-…
AlexanderSUS Nov 29, 2021
b290577
fix: fix missed non devided element in css file according rule 3.6 in…
AlexanderSUS Nov 29, 2021
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
53 changes: 37 additions & 16 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,33 +18,54 @@ var completedTasksHolder=document.getElementById("completed-tasks");//completed-
var createNewTaskElement=function(taskString){

var listItem=document.createElement("li");
listItem.classList.add("list-item")

//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
//list-item__element_button_edit
var editButton=document.createElement("button");//edit button

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


label.innerText=taskString;
label.className='task';
label.classList.add("list-item__element");
label.classList.add("list-item__element_label");
label.classList.add("list-item__element_task");

// label.className="list-item__element_task";

//Each elements, needs appending
checkBox.type="checkbox";
checkBox.classList.add("list-item__element");
checkBox.classList.add("list-item__element_input");
checkBox.classList.add("list-item__element_checkbox");

editInput.type="text";
editInput.className="task";
editInput.classList.add("list-item__element");
editInput.classList.add("list-item__element_input");
editInput.classList.add("list-item__element_text-input");
editInput.classList.add("list-item__element_task");
// editInput.className="list-item__element_task";

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

deleteButton.className="delete";
deleteButtonImg.src='./remove.svg';
editButton.classList.add("list-item__element");
editButton.classList.add("list-item__element_button");
editButton.classList.add("list-item__element_button_edit");
// editButton.className="list-item__element_button_edit";

// deleteButton.className="delete";
deleteButton.classList.add("list-item__element");
deleteButton.classList.add("list-item__element_button_delete");
deleteButton.classList.add("list-item__element_button");
deleteButtonImg.src="./remove.svg";
deleteButtonImg.classList.add("list-item__element_delete_image");
deleteButtonImg.setAttribute("alt", "remove task");
deleteButton.appendChild(deleteButtonImg);


Expand Down Expand Up @@ -82,10 +103,10 @@ var editTask=function(){

var listItem=this.parentNode;

var editInput=listItem.querySelector('input[type=text]');
var editInput=listItem.querySelector(".list-item__element_text-input");
var label=listItem.querySelector("label");
var editBtn=listItem.querySelector(".edit");
var containsClass=listItem.classList.contains("editMode");
var editBtn=listItem.querySelector(".list-item__element_button_edit");
var containsClass=listItem.classList.contains("list-item_edit-mode");
//If class of the parent is .editmode
if(containsClass){

Expand All @@ -99,7 +120,7 @@ var editTask=function(){
}

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


Expand Down Expand Up @@ -155,9 +176,9 @@ 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(".list-item__element_checkbox");
var editButton=taskListItem.querySelector(".list-item__element_button_edit");
var deleteButton=taskListItem.querySelector(".list-item__element_button_delete");


//Bind editTask to edit button.
Expand Down
83 changes: 65 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,66 @@
<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" media="screen">
<title>Todo App</title>
</head>
<body class="body">
<header class="header">
<img class="header__img" src="./eisenhower-matrix.jpg" alt="eisenhower matrix">
<a class="header__link" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</header>
<main class="main">
<section class="section section_new-task">
<h3 class="section__title section__title_new-task">Add Item</h3>
<ul class="section__list_new-task">
<li class="list-item_new-task">
<input class="list-item__element_new-task list-item__element_input_new-task" id="new-task" type="text">
<button class="list-item__element_button">Add</button>
</li>
</ul>
</section>
<section class="section">
<h3 class="section__title">Todo</h3>
<ul class="section__list" id="incompleteTasks">
<li class="list-item">
<input class="list-item__element list-item__element_input list-item__element_checkbox" type="checkbox">
<label class="list-item__element list-item__element_label list-item__element_task">Pay Bills</label>
<input class="list-item__element list-item__element_input list-item__element_text-input list-item__element_task" type="text">
<button class="list-item__element list-item__element_button list-item__element_button_edit">Edit</button>
<button class="list-item__element list-item__element_button list-item__element_button_delete">
<img class="list-item__element_delete_image" src="./remove.svg" alt="remove task">
</button>
</li>
<li class="list-item list-item_edit-mode">
<input class="list-item__element list-item__element_input list-item__element_checkbox" type="checkbox">
<label class="list-item__element list-item__element_label list-item__element_task">Go Shopping</label>
<input class="list-item__element list-item__element_input list-item__element_text-input list-item__element_task" type="text" value="Go Shopping">
<button class="list-item__element list-item__element_button list-item__element_button_edit">Save</button>
<button class="list-item__element list-item__element_button list-item__element_button_delete">
<img class="list-item__element_delete_image" src="./remove.svg" alt="remove task">
</button>
</li>
</ul>
</section>
<section class="section">
<h3 class="section__title">Completed</h3>
<ul class="section__list section__list_completed" id="completed-tasks">
<li class="list-item">
<input class="list-item__element list-item__element_input list-item__element_checkbox" type="checkbox" checked>
<label class="list-item__element list-item__element_label list-item__element_task">See the Doctor</label>
<input class="list-item__element list-item__element_input list-item__element_text-input list-item__element_task" type="text">
<button class="list-item__element list-item__element_button list-item__element_button_edit">Edit</button>
<button class="list-item__element list-item__element_button list-item__element_button_delete">
<img class="list-item__element_delete_image" src="./remove.svg" alt="remove task">
</button>
</li>
</ul>
</section>
</main>
<script src="app.js"></script>
</body>
</html>
Loading