diff --git a/todo.css b/todo.css new file mode 100644 index 0000000..4a166ea --- /dev/null +++ b/todo.css @@ -0,0 +1,95 @@ +body { + background: #0f0c29; /* fallback for old browsers */ + background: -webkit-linear-gradient(left, #24243e, #302b63, #0f0c29); + background: -o-linear-gradient(left, #24243e, #302b63, #0f0c29); + background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + font-family: Roboto; +} + +h3 { + text-align: center; + color: #CFD60A; +} + +h2 { + color: rgb(123,230,123); +} + +.fa-plus { + float: right; +} + +.container { + width: 400px; + margin: 100px auto; +} + +ul { + list-style: none; + margin: 0; + padding: 0; + position: relative; +} + +li { + height: 40px; + line-height: 40px; + color: rgb(230,230,12); +} + +li:nth-child(2n) { + background: rgba(123,123,123,0.5); +} + +.left { + background: #e74c3c; + height: 40px; + text-align: center; + color: white; + display: inline-block; + width: 0; + opacity: 0; + transition: 0.2s linear; +} + +.right { + background: #e74c3c; + height: 40px; + text-align: center; + color: white; + display: inline-block; + width: 0; + opacity: 0; + transition: 0.2s linear; + position: absolute; + right: 0px; +} + +li:hover span{ + width: 35px; + opacity: 1; +} + +.todoinput { + width: 100%; + font-size: 18px; + padding: 10px 10px 10px 15px; + outline: none; + /*box-sizing: border-box; <-- This isn't really required for our code*/ +} + +.editinput { + height: 100%; + width: 100%; + outline: none; +} + +input:focus { + /*border: 1px solid black;*/ + /*Coz it's not really required though.*/ +} + +.completed { + text-decoration: line-through; + color: gray; +} \ No newline at end of file diff --git a/todo.html b/todo.html new file mode 100644 index 0000000..422c9fd --- /dev/null +++ b/todo.html @@ -0,0 +1,55 @@ + + + + + To-Do List + + + + + + +
+

Find the + at +

+

To-Do List

+ + +
+ + + diff --git a/todo.js b/todo.js new file mode 100644 index 0000000..1f67a6b --- /dev/null +++ b/todo.js @@ -0,0 +1,41 @@ +$(".todoinput").keypress(function(event) { + if(event.which === 13) { + if($(this).val()==="") return; + $("ul").prepend("
  • "+$(this).val()+"
    • "); + $(this).val(""); + } +}); + +$(".fa-plus").on("click", function() { + $("input").slideToggle(); +}); + +$("ul").on("click", "span.text", function(event) { + $(this).toggleClass("completed"); +}); + +$("ul").on("click", "span.left", function(event) { + $(this).parent().fadeOut(500, function(){ + $(this).remove(); + }); + event.stopPropagation(); +}); + +$("ul").on("click", "span.right", function(event) { + var parent = $(this).parent(); + var oldVal = parent.text(); + parent.html(""); + $(".editinput").keypress(function(e) { + if(e.which === 13) { + if($(this).val() === "") { + parent.html(" "+oldVal+""); + } + else { + var newVal = $(this).val(); + parent.html(" "+newVal+""); + } + } + e.stopPropagation(); + }); + event.stopPropagation(); +}); \ No newline at end of file