Skip to content

Instantly share code, notes, and snippets.

@vjrngn
Created September 26, 2021 11:27
Show Gist options
  • Save vjrngn/67b20520a49a2c77c0efe5fb25f5b8f6 to your computer and use it in GitHub Desktop.
Save vjrngn/67b20520a49a2c77c0efe5fb25f5b8f6 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.introduction {
color: red;
font-weight: bold;
font-style: italic;
}
</style>
<body>
<h3>My Todo Application</h3>
<br />
<form action="https://www.google.com">
<input type="text" id="todo-text" />
<button type="submit" id="add-todo-button">Add Todo</button>
</form>
<ol id="todo-list">
</ol>
<script>
(function () {
let todoInput = document.querySelector('#todo-text');
let addTodoButton = document.querySelector('#add-todo-button');
let todoList = document.querySelector('#todo-list');
let todoText = '';
todoInput.addEventListener('input', function (event) {
todoText = event.target.value;
});
addTodoButton.addEventListener('click', function (event) {
event.preventDefault();
todoList.innerHTML += `<li>${todoText}</li>`;
});
// Add a
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment