<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
integrity=
"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<style>
.container {
width: 80%;
height: auto;
}
.foot {
position: fixed;
left: 10%;
bottom: 0;
width: 80%;
text-align: center;
}
</style>
</head>
<body>
<center>
<div class="foot">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Add Task"
id="text">
<div class="input-group-btn">
<button class="btn btn-success">
<i class="glyphicon glyphicon-plus">
</i></button>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
<br>
<h2 class="text text-success">My Tasks:</h2>
<br>
<div class="container">
</div>
</center>
<script>
$(document).ready(function() {
$('.btn-success').click(function() {
if ($('#text').val().length != 0) {
var x = $('.container').html();
var y =
`<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
` + $('#text').val() + `</div>`;
$('.container').html(y + x);
$('#text').val("");
} else alert("Enter some Text!");
});
// When Task is clicked
$(document).on('click', '.alert', function() {
if ($(this).css('text-decoration-line') == "none")
$(this).css('text-decoration-line', 'line-through');
else
$(this).css('text-decoration-line', 'none');
});
});
</script>
</body>
</html>