<!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
>