js_final

src/main.js

@@ -24,20 +24,21 @@ class Todo {
 
     constructor() {
         this.rootElement = document.querySelector(this.selectors.root)
-        this.newTaskFormElement = this.rootElement.querySelector.querySelector(this.selectors.newTaskForm)
-        this.newTaskInputElement = this.rootElement.querySelector.querySelector(this.selectors.newTaskInput)
-        this.searchTaskFormElement = this.rootElement.querySelector.querySelector(this.selectors.searchTaskForm)
-        this.searchTaskInputElement = this.rootElement.querySelector.querySelector(this.selectors.searchTaskInput)
-        this.totalTasksElement = this.rootElement.querySelector.querySelector(this.selectors.totalTasks)
-        this.deleteAllButtonElement = this.rootElement.querySelector.querySelector(this.selectors.deleteAllButton)
-        this.listElement = this.rootElement.querySelector.querySelector(this.selectors.list)
-        this.emptyMessageElement = this.rootElement.querySelector.querySelector(this.selectors.emptyMessage)
+        this.newTaskFormElement = this.rootElement.querySelector(this.selectors.newTaskForm)
+        this.newTaskInputElement = this.rootElement.querySelector(this.selectors.newTaskInput)
+        this.searchTaskFormElement = this.rootElement.querySelector(this.selectors.searchTaskForm)
+        this.searchTaskInputElement = this.rootElement.querySelector(this.selectors.searchTaskInput)
+        this.totalTasksElement = this.rootElement.querySelector(this.selectors.totalTasks)
+        this.deleteAllButtonElement = this.rootElement.querySelector(this.selectors.deleteAllButton)
+        this.listElement = this.rootElement.querySelector(this.selectors.list)
+        this.emptyMessageElement = this.rootElement.querySelector(this.selectors.emptyMessage)
         this.state = {
             items: this.getItemsFromLocalStorage(),
             filteredItems: null,
             searchQuery: "",
         }
         this.render()
+        this.bindEvents()
     }
 
     getItemsFromLocalStorage() {
@@ -70,7 +71,7 @@ class Todo {
 
         this.deleteAllButtonElement.classList.toggle(
             this.stateClasses.isVisible,
-            rhis.state.items.length > 0
+            this.state.items.length > 0
         )
 
         const items = this.state.filteredItems ?? this.state.items
@@ -90,7 +91,7 @@ class Todo {
         `).join('')
 
         const isEmptyFilteredItems = this.state.filteredItems?.length === 0
-        const isEmptyItems = this.state.items.lenght === 0
+        const isEmptyItems = this.state.items.length === 0
 
         this.emptyMessageElement.textContent = 
         isEmptyFilteredItems ? 'Tasks not found'
@@ -115,7 +116,7 @@ class Todo {
     }
 
     toggleCheckedState(id) {
-        this.state.items = this.state.map((item) => {
+        this.state.items = this.state.items.map((item) => {
             if (item.id === id) {
                 return {
                     ...item,
@@ -146,8 +147,77 @@ class Todo {
         this.render()
     }
 
+    onNewTaskFormSubmit(event) {
+        event.preventDefault()
+
+        const newTodoItemTitle = this.newTaskInputElement.value
+
+        if (newTodoItemTitle.trim().length > 0) {
+            this.addItem(newTodoItemTitle)
+            this.resetFilter()
+            this.newTaskInputElement.value = ''
+            this.newTaskInputElement.focus()
+        }
+    }
+
+    onSearchTaskFormSubmit(event) {
+        event.preventDefault()
+    }
+
+    onSearchTaskInputChange({ target }) {
+        const value = target.value.trim()
+
+        if (value.length > 0) {
+            this.state.searchQuery = value
+            this.filter()
+        } else {
+            this.resetFilter()
+        }
+    }
+
+    onDeleteAllButtonClick() {
+        const isConfirmed = confirm('Are you sure you want to delete all?')
+
+        if (isConfirmed) {
+            this.state.items = []
+            this.saveItemsToLocalStorage()
+            this.render()
+        }
+    }
+
+    onClick({ target }) {
+        if (target.matches(this.selectors.itemDeleteButton)) {
+            const itemElement = target.closest(this.selectors.item)
+            const itemCheckboxElement = itemElement.querySelector(this.selectors.itemCheckbox)
+
+            itemElement.classList.add(this.stateClasses.isDisappearing)
+
+            setTimeout (() => {
+                this.deleteItem(itemCheckboxElement.id)
+            }, 400)
+        }
+    }
+
+    onChange({ target }) {
+        if (target.matches(this.selectors.itemCheckbox)) {
+            this.toggleCheckedState(target.id)
+        }
+    }
+
     bindEvents() {
-        
+        this.onNewTaskFormSubmit = this.onNewTaskFormSubmit.bind(this)
+        this.onSearchTaskFormSubmit = this.onSearchTaskFormSubmit.bind(this)
+        this.onSearchTaskInputChange = this.onSearchTaskInputChange.bind(this)
+        this.onDeleteAllButtonClick = this.onDeleteAllButtonClick.bind(this)
+        this.onClick = this.onClick.bind(this)
+        this.onChange = this.onChange.bind(this)
+
+        this.newTaskFormElement.addEventListener('submit', this.onNewTaskFormSubmit)
+        this.searchTaskFormElement.addEventListener('submit', this.onSearchTaskFormSubmit)
+        this.searchTaskInputElement.addEventListener('input', this.onSearchTaskInputChange)
+        this.deleteAllButtonElement.addEventListener('click', this.onDeleteAllButtonClick)
+        this.listElement.addEventListener('click', this.onClick)
+        this.listElement.addEventListener('change', this.onChange)
     }
 }