todo app with html interface in javascript

Here's a sample code snippet for a todo app with an HTML interface in JavaScript:


<!DOCTYPE html>
<html>
<head>
	<title>Todo App</title>
</head>
<body>
	<h1>Todo List</h1>
	<input id="taskInput" type="text" placeholder="New Task">
	<button onclick="addTask()">Add</button>
	<ul id="taskList">
	</ul>

	<script>
		var taskList = [];
        var ul = document.getElementById("taskList");

        function addTask() {
        	var taskInput = document.getElementById("taskInput");
        	var text = taskInput.value;
            taskList.push(text);
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(text));
            ul.appendChild(li);
            taskInput.value = "";
        }

	</script>
</body>
</html>
681 chars
30 lines

This code creates a simple HTML interface with an input text box, a button to add tasks, and an unordered list to display the tasks. The JavaScript code defines an empty array to store the tasks, retrieves the HTML elements using the getElementById() method, and adds an event listener to the button to call the addTask() function.

The addTask() function retrieves the value of the input text box, adds it to the taskList array, creates a new list item using the createElement() method, appends the text to the list item using the createTextNode() method, and appends the list item to the unordered list using the appendChild() method. Finally, the function resets the value of the input text box.

This is a basic example and you can add additional features and functionality based on your requirements.

similar javascript code snippets

todo app with interface in javascript

todo app in javascript

sortable list of todo items in javascript

how to use useeffect in javascript

how to parse a json string in javascript

loop in javascript

how to create fibonacci in javascript

how to create a proxy variable in javascript

how to use usestate in javascript

create a loop in javascript

related categories