Skip to content

Conversation

@Dukel59
Copy link
Collaborator

@Dukel59 Dukel59 commented Jun 5, 2023

Попробовал реализовать функицонал кнопок. Почти все получилось, но не знаю как правильно сделать работу кнопки удаления на конкретном todo и отображения всех/выполненных todo

@antonpatotski
Copy link
Owner

ок, разберем про события на занятии

background-color: #f9f9f9;
width: 100%;
color: black;
}
Copy link
Owner

@antonpatotski antonpatotski Jun 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add empty line plaese between styles


const pushTodoList = () =>{
const main = document.querySelector('.main');
if(todoArray.length > 0) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const main = document.querySelector('.main');|
// empty line
 if/* space */ (todoArray.length > 0) {

</div>
</div>
`;
main.append(div);
Copy link
Owner

@antonpatotski antonpatotski Jun 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing dom in for is a bab idea. The most freezeing operation in js at all.
Do all changes in one tag. Add everything. Ad the apped result in DOM

Comment on lines +85 to +88
const label = document.querySelector(`#labelTodo${i}`);
const data = document.querySelector(`#dateTodo${i}`);
const checkBtn = document.querySelector(`#btnCompleteTodo${i}`);
label.textContent = todoArray[i].todoTheme;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

div.querySelector()

}

const addTodo = () =>{
let todoName = document.querySelector('#inputEnter');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Better to up thi variable and store in func globaly after append main layout
document.querySelector() also not so fast. Beteer to move it iutside this func

let todoName = document.querySelector('#inputEnter');
if(todoName.value){
const data = new Date().toLocaleString();
todoArray.push({todoTheme: `${todoName.value}`, data: data, isCompleted: false})
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In english better to name it as "topic" not a "theme". Theme is more about appearance

const deleteAllTodo = () =>{
const allTodo = todoArray.length;
for (let i = 0; i<allTodo; i++) {
deleteLastTodo();
Copy link
Owner

@antonpatotski antonpatotski Jun 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. you call func before declaration. Move please deleteLastTodo aboce this func.
  2. Why to hust set empty array and reset all data? It's musch faster

Avoid multiply document change. Always try to make one change

Comment on lines +120 to +126
const lastTodo = document.querySelector(`.todo${num}`);
lastTodo.remove();
if(todoArray[num].isCompleted){
isCompleted(num);
}
todoArray.splice(num, 1);
countTodo();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks ok

Comment on lines +130 to +131
const checkBtn = e.target;
const todo = document.querySelector(`.todo${checkBtn.id[checkBtn.id.length-1]}`)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hard to understand(

Comment on lines +141 to +155
const countTodo = () =>{
const labelAllTodo = document.querySelector('#labelAll');
labelAllTodo.textContent = 'All: ' + todoArray.length;
}
const countCompleteTodo = () =>{
const completedTodo = document.querySelector('#labelCompleted');
completedTodo.textContent = 'Completed: ' + countCompetedTodo;
}

const isCompleted = (index)=>{
const elem = todoArray[index];
elem.isCompleted ? countCompetedTodo-- : countCompetedTodo++;
elem.isCompleted = !elem.isCompleted;
countCompleteTodo()
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generaly ok

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants