dukex/links.md

## links.md

      
    Raw
  

              links.md
            
          
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery
https://software.hixie.ch/utilities/js/live-dom-viewer/
https://css-tricks.com
https://github.com/kamranahmedse/developer-roadmap
https://todoist.com/_next/static/images/screenshot@2x_44c1cf78bc12457546d889573e04345a.webp


## resource.md

      
    Raw
  

              resource.md
            
          
Syntax da linguagem

Variaveis (var, const, let)
Block (escopo)
Condicionais (if, else if, else) (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals)
Operadores (+,-,*,/,%,>,<,>=,<=,!=,==,===,!==)
Funções (function, () => {}) (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions) (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function) (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Return_values)
Loop (for, forEach,while, do while) (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code)


Estrutura de dados

String (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings) (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods)
Number (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math)
Boolean
Array (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays)
Object (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects)


DOM

Estrutura do DOM
Alteração do DOM (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
Eventos (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)


## todolist.html
<html>

<head>

  <style>
    ul {
      padding: 0
    }

    li label {
      display: flex;
    }

    li.completed {
      text-decoration: line-through;
    }

    li p {
      margin: 0
    }

  </style>
</head>

<body>
  <div id="app">
    <label for="todo">Todo:</label>
    <input id="todo" />

    <ul id="todos">
      <li class="--js-todo-template">
        <label>
          <input type="checkbox" />
          <p>sample data</p>
        </label>
      </li>
    </ul>
  </div>

  <script type="text/javascript">
    const todoTemplate = document.querySelector(".--js-todo-template");
    todoTemplate.style.display = "none"

    const app = document.querySelector("#app")
    const input = document.querySelector("#todo")
    const list = document.querySelector("#todos")

    const renderTodo = (todo) => {
      const listItem = todoTemplate.cloneNode(true)
      listItem.classList.remove("--js-todo-template")
      listItem.style.display = "block"

      const text = listItem.querySelector("p")
      const checkbox = listItem.querySelector("input")

      console.log("render");
      console.log(listItem)

      checkbox.addEventListener('change', function (e) {
        const completed = e.currentTarget.checked

        if (completed) {
          listItem.classList.add('completed')
        } else {
          listItem.classList.remove('completed')
        }
      });

      if (todo.completed) {
        listItem.classList.add('completed')
      } else {
        listItem.classList.remove('completed')
      }

      checkbox.checked = todo.completed
      text.innerText = todo.text

      return listItem
    }

    // todos.forEach(function (todo) {
    //   const listItem = renderTodo(todo);
    //   list.appendChild(listItem)
    // })

    app.appendChild(list)

    // -------------------------

    input.addEventListener("keyup", function (e) {
      const input = e.target;

      if (e.keyCode === 13 && input.value.length > 0) {
        const listItem = renderTodo({ text: input.value, completed: false })
        list.appendChild(listItem)

        input.value = ""
      }
    })
  </script>
</body>

</html>
	<html>

	<head>

	<style>
	ul {
	padding: 0
	}

	li label {
	display: flex;
	}

	li.completed {
	text-decoration: line-through;
	}

	li p {
	margin: 0
	}

	</style>
	</head>

	<body>
	<div id="app">
	<label for="todo">Todo:</label>
	<input id="todo" />

	<ul id="todos">
	<li class="--js-todo-template">
	<label>
	<input type="checkbox" />
	<p>sample data</p>
	</label>
	</li>
	</ul>
	</div>

	<script type="text/javascript">
	const todoTemplate = document.querySelector(".--js-todo-template");
	todoTemplate.style.display = "none"

	const app = document.querySelector("#app")
	const input = document.querySelector("#todo")
	const list = document.querySelector("#todos")

	const renderTodo = (todo) => {
	const listItem = todoTemplate.cloneNode(true)
	listItem.classList.remove("--js-todo-template")
	listItem.style.display = "block"

	const text = listItem.querySelector("p")
	const checkbox = listItem.querySelector("input")

	console.log("render");
	console.log(listItem)

	checkbox.addEventListener('change', function (e) {
	const completed = e.currentTarget.checked

	if (completed) {
	listItem.classList.add('completed')
	} else {
	listItem.classList.remove('completed')
	}
	});

	if (todo.completed) {
	listItem.classList.add('completed')
	} else {
	listItem.classList.remove('completed')
	}

	checkbox.checked = todo.completed
	text.innerText = todo.text

	return listItem
	}

	// todos.forEach(function (todo) {
	// const listItem = renderTodo(todo);
	// list.appendChild(listItem)
	// })

	app.appendChild(list)

	// -------------------------

	input.addEventListener("keyup", function (e) {
	const input = e.target;

	if (e.keyCode === 13 && input.value.length > 0) {
	const listItem = renderTodo({ text: input.value, completed: false })
	list.appendChild(listItem)

	input.value = ""
	}
	})
	</script>
	</body>

	</html>