Commita55d57e

committed

11th Project - How to Create Tree View Todo App

1 parent2479f79 commita55d57eCopy full SHA for a55d57e

File tree

+102

-0

lines changed

+102

-0

lines changed

Lines changed: 39 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,39 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<htmllang="en">`
	`3`	`+<head>`
	`4`	`+<metacharset="UTF-8"/>`
	`5`	`+<metaname="viewport"content="width=device-width, initial-scale=1.0"/>`
	`6`	`+<linkrel="stylesheet"href="style.css"/>`
	`7`	`+<title>Document</title>`
	`8`	`+</head>`
	`9`	`+<body>`
	`10`	`+<ulclass="todos"id="todos">`
	`11`	`+<liclass="todo">Task 1</li>`
	`12`	`+<liclass="todo active">Task 24/22/20</li>`
	`13`	`+<li>`
	`14`	`+<divclass="toggler">Task 3</div>`
	`15`	`+<ulclass="toggler-target">`
	`16`	`+<liclass="todo">Task 1</li>`
	`17`	`+<liclass="todo">Task 2</li>`
	`18`	`+<li>`
	`19`	`+<divclass="toggler">Task 3</div>`
	`20`	`+<ulclass="toggler-target">`
	`21`	`+<liclass="todo">Task 1</li>`
	`22`	`+<liclass="todo">Task 2</li>`
	`23`	`+<li>`
	`24`	`+<divclass="toggler">Task 3</div>`
	`25`	`+<ulclass="toggler-target">`
	`26`	`+<liclass="todo">Task 1</li>`
	`27`	`+<liclass="todo">Task 2</li>`
	`28`	`+<liclass="todo">Task 3</li>`
	`29`	`+</ul>`
	`30`	`+</li>`
	`31`	`+</ul>`
	`32`	`+</li>`
	`33`	`+</ul>`
	`34`	`+</li>`
	`35`	`+<liclass="todo">Task 4</li>`
	`36`	`+</ul>`
	`37`	`+<scriptsrc="script.js"defer></script>`
	`38`	`+</body>`
	`39`	`+</html>`

Lines changed: 15 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,15 @@`
	`1`	`+consttodos=document.querySelectorAll(".todo");`
	`2`	`+consttogglers=document.querySelectorAll(".toggler");`
	`3`	`+`
	`4`	`+todos.forEach((todo)=>{`
	`5`	`+todo.addEventListener("click",()=>{`
	`6`	`+todo.classList.toggle("active");`
	`7`	`+});`
	`8`	`+});`
	`9`	`+`
	`10`	`+togglers.forEach((toggler)=>{`
	`11`	`+toggler.addEventListener("click",()=>{`
	`12`	`+toggler.classList.toggle("active");`
	`13`	`+toggler.nextElementSibling.classList.toggle("active");`
	`14`	`+});`
	`15`	`+});`

Lines changed: 48 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,48 @@`
	`1`	`+body {`
	`2`	`+font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;`
	`3`	`+font-size:2rem;`
	`4`	`+padding:5rem;`
	`5`	`+}`
	`6`	`+`
	`7`	`+ul {`
	`8`	`+list-style-type: none;`
	`9`	`+}`
	`10`	`+`
	`11`	`+.todos {`
	`12`	`+cursor: pointer;`
	`13`	`+}`
	`14`	`+`
	`15`	`+.todo::before {`
	`16`	`+content:"\2610";`
	`17`	`+display: inline-block;`
	`18`	`+margin-right:0.5rem;`
	`19`	`+}`
	`20`	`+`
	`21`	`+.todo.active {`
	`22`	`+text-decoration: line-through;`
	`23`	`+color:#888;`
	`24`	`+}`
	`25`	`+`
	`26`	`+.todo.active::before {`
	`27`	`+content:"\2611";`
	`28`	`+}`
	`29`	`+`
	`30`	`+/* toggler */`
	`31`	`+.toggler::before {`
	`32`	`+content:"\25B6";`
	`33`	`+display: inline-block;`
	`34`	`+margin-right:0.5rem;`
	`35`	`+transition: transform0.3s ease-in-out;`
	`36`	`+}`
	`37`	`+`
	`38`	`+.toggler.active::before {`
	`39`	`+transform:rotate(90deg);`
	`40`	`+}`
	`41`	`+`
	`42`	`+.toggler-target {`
	`43`	`+display: none;`
	`44`	`+}`
	`45`	`+`
	`46`	`+.toggler-target.active {`
	`47`	`+display: block;`
	`48`	`+}`

Comments

(0)