andygimma/simple-todo-tutorial.js

## simple-todo-tutorial.js
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>

        <form>
            <input type="text" id="todo-text-bar"/>
            <button id="todo-button">Add Todo</button>
        </form>

        <div id="todo-list-container"></div>
    </div>
    <script>
        // Nouns
        // #todo-text-bar
        // #todo-text-button
        // #todo-list-container
        // #todo-list-item


        // Verbs
        // - click the button *
        // - read text in text bar *
        // - adds text from text bar to some list *
        // - clear the text bar *
        // - display the list in the container so the user can see their list items
        const todoButton = document.getElementById('todo-button')
        const todoTextBar = document.getElementById('todo-text-bar')
        const todoListContainer = document.getElementById('todo-list-container')

        const todoList = []

        todoButton.addEventListener("click", function(event){
            event.preventDefault()
            const todo = todoTextBar.value

            todoTextBar.value = ""

            todoList.push(todo);

            for (x = 0; x < todoList.length; x++) {
                const item = todoList[x]
                const textnode = document.createTextNode(item)
                todoListContainer.appendChild(textnode)
            }
        });
    </script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<div>

	<form>
	<input type="text" id="todo-text-bar"/>
	<button id="todo-button">Add Todo</button>
	</form>

	<div id="todo-list-container"></div>
	</div>
	<script>
	// Nouns
	// #todo-text-bar
	// #todo-text-button
	// #todo-list-container
	// #todo-list-item


	// Verbs
	// - click the button *
	// - read text in text bar *
	// - adds text from text bar to some list *
	// - clear the text bar *
	// - display the list in the container so the user can see their list items
	const todoButton = document.getElementById('todo-button')
	const todoTextBar = document.getElementById('todo-text-bar')
	const todoListContainer = document.getElementById('todo-list-container')

	const todoList = []

	todoButton.addEventListener("click", function(event){
	event.preventDefault()
	const todo = todoTextBar.value

	todoTextBar.value = ""

	todoList.push(todo);

	for (x = 0; x < todoList.length; x++) {
	const item = todoList[x]
	const textnode = document.createTextNode(item)
	todoListContainer.appendChild(textnode)
	}
	});
	</script>
	</body>
	</html>