aitoss · RAVANv2 · Feb 13, 2019 · Feb 13, 2019
diff --git a/css/bootstrap-theme.css b/css/bootstrap-theme.css
diff --git a/css/bootstrap-theme.css.map b/css/bootstrap-theme.css.map
diff --git a/css/bootstrap-theme.min.css b/css/bootstrap-theme.min.css
diff --git a/css/bootstrap-theme.min.css.map b/css/bootstrap-theme.min.css.map
diff --git a/css/bootstrap.css b/css/bootstrap.css
diff --git a/css/bootstrap.css.map b/css/bootstrap.css.map
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/bootstrap.min.css.map b/css/bootstrap.min.css.map
diff --git a/download.jpg b/download.jpg
diff --git a/index.css b/index.css
diff --git a/todo.js b/todo.js
@@ -6,17 +6,25 @@ function get_todos() {
     }
     return todos;
 }
- let cnt=1;
- var da;
+
+
+
 function add() {
-    var task = new Date();
-    task = task.toLocaleString();
+    var task = document.getElementById('task').value;
     task+='<td>';
-    da = document.getElementById('task').value;
-
+    var d=new Date();    //date and time will be added by this object
+    var date=d.toLocaleDateString();
+    task+=date;
+    task+='</td>';
+
 
-    task+=da;
+    task+='<td>';
+    var time=d.toLocaleTimeString();
+    task+=time;
     task+='</td>';
+
+
+
     var todos = get_todos();
     todos.push(task);
     localStorage.setItem('todo', JSON.stringify(todos));
@@ -25,7 +33,24 @@ function add() {
 
     return false;
 }
-
+// I want to disabled the add function when i don't write any thing in task
+  function Empty(){
+            var h='<button class="btn btn-primary" id="add" disabled="disabled" style="width:100%;">Add</button>';
+            var x='<button class="btn btn-primary" id="add" style="width:100%;">Add</button>'
+
+            var text=document.getElementById('task').value; //taking the stored value
+            if(text=="")
+            {
+                document.getElementById("add").innerHTML=h;//adding the value of h into of id add
+            }
+            else
+            {
+                document.getElementById("add").innerHTML=x;
+            }
+
+        }
+
+
 function remove() {
     var id = this.getAttribute('id');
     var todos = get_todos();
@@ -39,43 +64,36 @@ function remove() {
 
 function show() {
     var todos = get_todos();
-
-    var html = '<table class="table table-striped table-bordered table-hover">';
-    html+='<tr><th>S.No</th><th>Date & Time </th><th>Saved Work ToDo</th><th>Done</th></tr>';
-
-
 
+    var html = '<table class="table table-striped">';
+        html+='<tr> <th> Number </th>  <th>Task</th>  <th>Date</th> <th>Time</th> <th>Check</th></tr>';
     for(var i=0; i<todos.length; i++) {
-        var x=i+1;
-        html += '<tr><td>'+x+'</td><td>' + todos[i] +" " + '</td><td><button class="close" data-dismiss="alert" id="' + i  + '">X</button></td></tr>';
+        html += '<tr> <td>'+ (i+1) + " " + '</td> <td>'  + todos[i] + " "+ '</td><td> <input type="checkbox"  class="checkbox"  ></td> <td><button  class="remove" id="' + i  + '">&times;</button></td></tr> ';
     };
     html += '</table>';
+
+    html+='<span>';
+        document.getElementById('demo').innerHTML=i;
+        if(i>=3)
+        {
+         document.getElementById('total').innerHTML= '<button class="btn btn-danger " type="button"  style="padding:15px;" >Task Remaining <span class="badge" id="demo" >'+i+'</span></button>'   
+        }
+        else
+        {
+          document.getElementById('total').innerHTML= '<button class="btn btn-primary " type="button" style="padding:15px;" >Task Remaining <span class="badge" id="demo" >'+i+'</span></button>'  
+        }
+    html+='</span>';    
 
+
+
     document.getElementById('todos').innerHTML = html;
-    document.getElementById('tr').innerHTML = i ;
 
-    var buttons = document.getElementsByClassName('close');
+    var buttons = document.getElementsByClassName('remove');
     for (var i=0; i < buttons.length; i++) {
         buttons[i].addEventListener('click', remove);
     };
-
 }
 
-
 document.getElementById('add').addEventListener('click', add);
 show();
 
-function IsEmpty() {
-
-    if (document.getElementById('task').value == "") {
-        var khali = '<button class="btn btn-primary" disabled="disabled" style="width:100%;" id="add">Add</button>';
-        document.getElementById("add").innerHTML = khali;
-    }
-    else {
-        var not = '<button class="btn btn-primary" style="width:100%;" id="add">Add</button>';
-        document.getElementById('add').innerHTML = not;
-
-    }
-
-
-}
diff --git a/welcome.html b/welcome.html
@@ -1,40 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <link href="bootstrap.min.css" rel="stylesheet">
-<style>
-.main-div{
-min-width: 800px;
-}
-</style>
-</head>
-<body>
+  <link  rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+
+  <link  rel="stylesheet" type="text/css" href="index.css" >
+
 
-  <div class="main-div">
-    <div class="container" style="margin-top:40px;">
+</head>
+<body style="background: white; ">
+    <div class="container"  style="border:3px solid red; ">
+
+<header  style="background: blue; color: white; padding: 10px; border-radius:5px; margin:0px;  ;padding: 15px; width: 100%;" >
+    <h1>New Task</h1>
+</header>    
+
+<div class="body">  
+    <form style="background: white;">
+
+
 
+    <label style="color: blueviolet; margin-top: 30px">What is to be done ?</label>
+    <input type="text" class="form-control"  id="task" placeholder="Enter Task Here" onclick="Empty();" >
 
-  <form class="form-group">
-    <div class="list-group">
-  <li class="list-group-item list-group-item-primary list-group-item-active">
-    <h4 style="font-family: Verdana, Geneva, Tahoma, sans-serif;" class="text-center">Add work to your
-      list -</h4>
-    <button class="btn btn-primary"  type="button">Work left to do<span id="tr" class="badge"
-        style="font-size:20px;"></span></button>
-  </li><br>
-<div><br></div>
-   <input class="form-control" placeholder="Type text here" id="task" onclick="IsEmpty();"><div><br></div>
-  <div id="todos"></div><hr>
-  <div id='add'>
-<button class="btn btn-primary" disabled="disabled" style="width:100%;" id="add">Add</button>
-</div>
+    <div id="add">
+    <button class="btn btn-primary form-control" id="add" disabled="disabled" >Add</button>
+    </div>  
+
+    <div id="total">
+    <button class="btn btn-primary " type="button"  style="padding:15px;" >Task Remaining <span class="badge" id="demo" >i</span></button>
     </div>
+
+    </form>
 
-</form>
 
-</div>
-</div>
+<div  id="todos"></div>
+ 
 <script src="todo.js"></script>
-
+    </div>    
+    </div>
 </body>
 </html>