update

2026-04-07 12:08:01 +02:00
parent cc752a0fc9 814f67d312
commit d1e3f215aa
10 changed files with 608 additions and 0 deletions
@@ -0,0 +1,83 @@
+class View {
+	charLimit = 70;
+
+	constructor() {
+		this.form   = document.querySelector("#add_form")
+		this.input  = document.querySelector("#input_todo")
+		this.list   = document.querySelector("#todos_list")
+		this.tabs   = document.querySelectorAll("#add_form span a")
+		this.loader = document.querySelector("#loader")
+		this.count = document.querySelector("#count")
+		
+		
+		this.input.addEventListener("input", (e) => {
+			if (e.target.value.length >= this.charLimit) {
+				e.target.value = e.target.value.substring(0,this.charLimit);
+			}
+			count.textContent = e.target.value.length;
+		});
+		count.nextSibling.textContent = `/${this.charLimit} characters`
+	}
+
+	#getTodo() {
+		return this.input.value
+	}
+
+	#resetInput() {
+		this.input.value = ''
+		count.textContent = 0
+	}
+
+	#createNewTodoElement(todo){
+		let li = document.createElement("li")
+
+		// TODO
+
+		return li
+	}
+
+
+	setFilterTabs(filter){
+		this.tabs.forEach( tab => {
+			if (filter === tab.id)		
+				tab.classList.add("is-active")
+			else 
+				tab.classList.remove("is-active")
+		})
+	}
+
+	renderTodoList(todos) {
+		let list = new DocumentFragment()
+		for (let todo of todos){
+			list.appendChild(this.#createNewTodoElement(todo))
+		}
+		this.list.replaceChildren(list)
+	}
+
+
+
+
+	/** Abonnements événements **/
+
+	bindAddTodo(handler) {
+		this.form.addEventListener("submit", (e=>{
+			e.preventDefault()
+			let text = this.#getTodo()
+			handler(text)
+			this.#resetInput()
+		}))
+	}
+
+
+	bindDeleteTodo(handler) {
+		// TODO
+	}
+
+	bindEditTodo(handler) {
+		// TODO
+	}
+
+	bindToggleTodo(handler) {
+		// TODO
+	}
+}