html 任务列表App.html
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 任务列表App.html相关的知识，希望对你有一定的参考价值。
<script>
// Define UI Vars
const form = document.querySelector('#task-form');
const taskList = document.querySelector('.collection');
const clearBtn = document.querySelector('.clear-tasks');
const filter = document.querySelector('#filter');
const taskInput = document.querySelector('#task');
// Load all event Listeners
loadEventListeners();
// Load all event Listeners
function loadEventListeners(){
// Add task event
form.addEventListener('submit', addTask);
/* Remove Task Event (II) */
taskList.addEventListener('click', removeTask);
/* Clear Task Event (II) */
clearBtn.addEventListener('click', clearTasks);
/* Filter Tasks Event (III) */
filter.addEventListener('keyup', filterTasks);
}
// Add task
function addTask(e){
if(taskInput.value === '') {
alert('Add a task');
}
// Create Li Element
const li = document.createElement('li');
// Add class
li.className = 'collection-item';
// Create Text Node and append to li
li.appendChild(document.createTextNode(taskInput.value));
// Create new a element (link)
const link = document.createElement('a');
// Add class
link.className = 'delete-item secondary-content';
// Add icon html
link.innerHTML = '<i class="fa fa-remove"></li>"';
// Append the link to li
li.appendChild(link);
// Append li to ul
taskList.appendChild(li);
// Clear input
taskInput.value = '';
e.preventDefault();
}
/* Remove Task (II) */
function removeTask(e){
if(e.target.parentElement.classList.contains('delete-item')){
if(confirm('Are You Sure?')){
e.target.parentElement.parentElement.remove();
}
}
}
/* Clear Task (II) */
function clearTasks(e){
// taskList.innerHTML = '';
// Faster Way**
while(taskList.firstChild){
taskList.removeChild(taskList.firstChild);
}
}
/* Filter Tasks (III) */
function filterTasks(e) {
const text = e.target.value.toLowerCase();
document.querySelectorAll('.collection-item').forEach(function(task){
const item = task.firstChild.textContent;
if (item.toLowerCase().indexOf(text) != -1){
task.style.display = 'block';
} else {
task.style.display = 'none';
}
});
}
</script>
-----HTML BELOW--------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>Task List</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-content">
<span class="card-title">Task List</span>
<div class="row">
<form id="task-form">
<div class="input-field col s12">
<input type="text" name="task" id="task">
<label for="task">New Task</label>
</div>
<input type="submit" value="Add Task" class="btn">
</form>
</div>
</div>
<div class="card-action">
<h5 id="task-title">Tasks</h5>
<div class="input-field col s12">
<input type="text" name="filter" id="filter">
<label for="filter">Filter Tasks</label>
</div>
<ul class="collection"></ul>
<a href="#" class="clear-tasks btn black">Clear Tasks</a>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="app.js"></script>
</body>
以上是关于html 任务列表App.html的主要内容，如果未能解决你的问题，请参考以下文章
jquery-ui sortable - 在列表之间移动任务