manasimuke

index.html

@@ -1,3 +1,36 @@
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
+<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
+<link href='https://fonts.googleapis.com/css?family=Alegreya:400,700' rel='stylesheet' type='text/css'>
+
+<!-- JQuery Library-->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
+
 <link rel="stylesheet" href="main.css">
-<h3>todo!</h3>
-<script src="main.js"></script>
+<script src="main.js"></script>
+
+
+<div class="container-fluid">
+    <div class="page-header">
+        ToDo!
+    </div>
+    <div class="row">
+        <div class="col-md-4"> </div>
+        <div class="col-md-4">
+            <button onClick="viewList1()" class="btn btn-primary listbtn"> <i class="fa fa-sticky-note-o"> </i> List</button>
+            <div id="list1" class="block">
+                <ul id="todo">
+                    <li> <input type="checkbox" class="strike" />  Feed the kittens  <button class="delete btn btn-warning"><i class="fa fa-trash-o"> </i> Delete </button></li>
+                    <li> <input type="checkbox" class="strike" /> Pay Tax  <button class="delete btn btn-warning fa fa-remove"><i class="fa fa-trash-o"> </i> Delete </button></li>
+                </ul>
+                <input type="text" id="input" placeholder="Add a ToDo."/>
+                <button class="btn btn-info" id="add"> <i class="fa fa-plus"> </i>ADD!</button>
+            </div>
+        </div>
+
+    </div>
+
+
+
+</div>

main.css

@@ -1,3 +1,51 @@
 body {
-    padding: 20px;
-}
+    padding: 30px;
+    background-image: url("back.jpg");
+}
+
+li {
+    color: white;
+    font-size: 20px;
+    font-family: 'Roboto Slab', serif;
+    margin: 10px;
+}
+
+
+
+#list1 {
+    display: none;
+    color: white;
+}
+
+
+.col-md-4 {
+    text-align: center;
+    margin:auto;
+}
+
+ul {
+    text-align: center;
+    margin: auto;
+}
+
+.page-header {
+    color: darkturquoise;
+    text-align: center;
+    font-family: 'Alegreya', serif;
+    font-size: 35px;
+}
+
+#input {
+    color: white;
+    border: none;
+    background: transparent;
+    border-bottom: 1px solid white;
+    outline: none;
+    min-height: 30px;
+}
+
+.btn {
+    font-family: 'Alegreya', serif;
+    font-size: 18px;
+}
+

main.js

@@ -1 +1,32 @@
-console.log('test');
+function addItem() {
+    var text = $("#input").val();
+    $("#todo").append('<li><input type="checkbox" class="strike" />' +text+ ' <button class="delete btn btn-warning"><i class="fa fa-trash-o"> </i> Delete </button> </li>');
+    $("#input").val('');
+}
+
+function deleteItem() {
+    $(this).parent().remove();
+}
+
+function strikeOut() {
+    if ($(this).parent().css('textDecoration') == 'line-through') {
+        $(this).parent().css('textDecoration','none');
+    }
+    else {
+        $(this).parent().css('textDecoration','line-through');
+    }
+}
+
+$(function() {
+    $("#add").on('click',addItem);
+    $(document).on('click','.delete',deleteItem);
+    $(document).on('click', '.strike', strikeOut);
+});
+
+
+
+function viewList1() {
+    document.getElementById("list1").style.display="block";
+}
+
+