ToDo - with javascript .. keyup-input listener,onsubmit-form,onclick-btn,difference bettween innerhtml and value,document.createelement() -> for html eliment creator
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tasks</title>
</head>
<body>
<h1>Tasks</h1>
<ul id="tasks"></ul>
<form>
<input id="task" placeholder = "New Task" type="text">
<button id="add" type="submit">add</button>
<button id="clear" type="submit">clear</button>
<button id="submit" type="submit">submit</button>
</form>
</body>
</html>
<script>
// Wait for page to load
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#clear').onclick = () => {
console.log('we are reacting to clear'); //writes log in console useful for debug
document.querySelector('#tasks').innerHTML = ''; //innerhtml should be used .. value is for human input or values
return false;
}
// Select the submit button and input to be used later
const add = document.querySelector('#add');
const newTask = document.querySelector('#task');
// Disable submit button by default:
add.disabled = true;
// Listen for input to be typed into the input field
newTask.onkeyup = () => {
if (newTask.value.length > 0) {
add.disabled = false;
}
else {
add.disabled = true;
}
}
// Listen for submission of form
// document.querySelector('form').onsubmit = () => { -- remember always
//that forms are to be submitted and buttoms are clicked --upkey means realtime typing
//in input(listening)
add.onclick = () => {
// Find the task the user just submitted
const task = newTask.value;
// Create a list item for the new task and add the task to it
const li = document.createElement('li');
li.innerHTML = task;
// Add new element to our unordered list:
document.querySelector('#tasks').append(li);
// Clear out input field:
newTask.value = '';
// Disable the submit button again:
add.disabled = true;
// Stop form from submitting
return false;
}
});
</script>
Comments
Post a Comment