Skip to content
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

Clean code s1e1 #118

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Clean code s1e1 #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f05bb4f
fix(basic-1.1,2.1,2.5,3.5,3.8): add indentation, formatting, line-wra…
sergei404 Dec 14, 2024
50857b9
fix(basic-1.2): add use lowercase
sergei404 Dec 14, 2024
83d5fb7
fix(basic-1.3): add quotes in html and css files
sergei404 Dec 14, 2024
936696e
fix(basic-2.2): add doctype
sergei404 Dec 14, 2024
209fbf8
fix(basic-2.3): add named character references
sergei404 Dec 14, 2024
435bfb3
fix(basic-2.4): remove type attribute
sergei404 Dec 14, 2024
d0b1f25
fix(basic-3.1,3.2,3.3,3.4): add single style for selectors naming, na…
sergei404 Dec 16, 2024
1aa2f54
fix(basic-3.6,3.7): space after property name, semicolon after proper…
sergei404 Dec 16, 2024
17cabc5
fix(advanced-1.1): semantics
sergei404 Dec 16, 2024
05c5d52
fix(advanced-1.2): alt
sergei404 Dec 16, 2024
15d40ae
fix(advanced-2.2): bem
sergei404 Dec 16, 2024
ba841b8
fix: remark js
sergei404 Dec 16, 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
4 changes: 4 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"liveServer.settings.port": 5501,
"cSpell.words": ["incompleted"]
}
34 changes: 19 additions & 15 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
// 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(".todos__btn.todos__btn--add");//first button
var incompleteTaskHolder=document.getElementById("incompleted");//ul of #incompleteTasks
var completedTasksHolder=document.getElementById("completed");//completed-tasks


//New task list item
Expand All @@ -32,18 +32,22 @@ var createNewTaskElement=function(taskString){
var deleteButton=document.createElement("button");//delete button
var deleteButtonImg=document.createElement("img");//delete button image

listItem.className = 'todos__item'

label.innerText=taskString;
label.className='task';
label.className='todos__task-label';

//Each elements, needs appending
checkBox.className="todos__check";
checkBox.type="checkbox";
editInput.type="text";
editInput.className="task";
editInput.className="todos__task-input";

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

deleteButton.className="delete";
deleteButton.className="todos__btn todos__btn--delete";
deleteButtonImg.className='todos__img-delete';
deleteButtonImg.src='./remove.svg';
deleteButton.appendChild(deleteButtonImg);

Expand Down Expand Up @@ -82,10 +86,10 @@ 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");
var editInput=listItem.querySelector('.todos__task-input');
var label=listItem.querySelector(".todos__task-label");
var editBtn=listItem.querySelector(".todos__btn.todos__btn--edit");
var containsClass=listItem.classList.contains("todos__item--edit");
//If class of the parent is .editmode
if(containsClass){

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

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


Expand Down Expand Up @@ -155,9 +159,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(".todos__check");
var editButton=taskListItem.querySelector(".todos__btn.todos__btn--edit");
var deleteButton=taskListItem.querySelector(".todos__btn.todos__btn--delete");


//Bind editTask to edit button.
Expand Down
74 changes: 57 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,59 @@
<!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>
<section class="matrix">
<img src="./eisenhower-matrix.jpg" class="matrix__img" alt="matrix photo">
<a class='matrix__info' href="https://goal-life.com/page/method/matrix-eisenhower">
Want more details?
</a>
</section>
<article class="todos">
<section id="add-task" class="todos__add-task">
<label for="new-task" class="todos__new-task">Add Item</label>
<div class="todos__wrapper">
<input id="new-task" class="todos__new-todo" type="text">
<button class="todos__btn todos__btn--add">Add</button>
</div>
</section>
<h3 class="todos__title">Todo</h3>
<ul id="incompleted" class="todos__list todos__list--incompleted">
<li class="todos__item">
<input type="checkbox" class="todos__check">
<label class="todos__task-label">Pay Bills</label>
<input type="text" class="todos__task-input">
<button class="todos__btn todos__btn--edit">Edit</button>
<button class="todos__btn todos__btn--delete">
<img class="todos__img-delete" src="./remove.svg" alt="delete icon">
</button>
</li>
<li class="todos__item todos__item--edit">
<input type="checkbox" class="todos__check">
<label class="todos__task-label">Go Shopping</label>
<input type="text" value="Go Shopping" class="todos__task-input">
<button class="todos__btn todos__btn--edit">Save</button>
<button class="todos__btn todos__btn--delete">
<img class="todos__img-delete" src="./remove.svg" alt="delete icon">
</button>
</li>
</ul>
<h3 class="todos__title">Completed</h3>
<ul id="completed" class="todos__list todos__list--incompleted">
<li class="todos__item">
<input type="checkbox" class="todos__check" checked>
<label class="todos__task-label">See the Doctor</label>
<input type="text" class="todos__task-input">
<button class="todos__btn todos__btn--edit">Edit</button>
<button class="todos__btn todos__btn--delete">
<img class="todos__img-delete" src="./remove.svg" alt="delete icon">
</button>
</li>
</ul>
</article>
<script src="app.js"></script>
</body>
</html>
Loading