Skip to content

Instantly share code, notes, and snippets.

@ayan-b

ayan-b/index.html

Created July 19, 2020 13:23
Show Gist options
  • Save ayan-b/0beaa26417bf3f73fff8230bbf4f14b3 to your computer and use it in GitHub Desktop.
Save ayan-b/0beaa26417bf3f73fff8230bbf4f14b3 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery TODO
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Todo App</title>
<link data-require="[email protected]" data-semver="4.1.3" rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="4.1.3"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script data-require="jquery" data-semver="3.2.1"
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="col-md-12">
<h1>jQuery Todo App</h1>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<textarea placeholder="Enter task" id="input" cols="50" maxlength="128"></textarea>
</div>
<div class="ui-block-b">
<input type="button" class="btn btn-outline-success" value="Add" id="add-btn" />
</div>
</fieldset>
<br />
<div data-role="content">
<ul class="list-group" id="taskListSection">
<li class="list-group-item active">Todos</li>
</ul>
<br />
</div>
</div>
</body>
</html>
Raw
script.js
let count = 0;
$(function () {
$('#add-btn').click(function () {
let newTask = $('#input').val();
if (newTask !== '') {
++count;
$('#taskListSection').append('<li class="list-group-item">' + '<button type="button" class="deletetask btn btn-outline-danger id="del-btn-' + count + '">Remove</button> ' + newTask + '</li>');
$('#input').val('');
$('.deletetask').click(function () {
$(this.parentNode).remove();
});
} else {
alert('Empty input not allowed!');
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment