API tools faq
paste
Advertisement
AyaAbouzeid

Untitled

AyaAbouzeid
Apr 22nd, 2016
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.      <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8.   <meta name="viewport" content="width=device-width, initial-scale=1">
  9.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  10.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  11.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  12.   <script src="https://code.jquery.com/jquery-2.2.3.js"></script>
  13.  
  14.  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  15. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  16. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  17.   <link rel="stylesheet" href="/resources/demos/style.css">
  18.  
  19. <style>
  20.     body { font-size: 62.5%; }
  21.     label, input { display:block; }
  22.     input.text { margin-bottom:12px; width:95%; padding: .4em; }
  23.     fieldset { padding:0; border:0; margin-top:25px; }
  24.     h1 { font-size: 1.2em; margin: .6em 0; }
  25.     div#users-contain { width: 350px; margin: 20px 0; }
  26.     div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
  27.     div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
  28.     .ui-dialog .ui-state-error { padding: .3em; }
  29.     .validateTips { border: 1px solid transparent; padding: 0.3em; }
  30.     .dropdown{
  31. position: relative;
  32. display: inline-block;
  33. }
  34.  
  35.  
  36.  
  37.  
  38. <style>
  39.     fieldset {
  40.       border: 0;
  41.     }
  42.     label {
  43.       display: block;
  44.       margin: 30px 0 0 0;
  45.     }
  46.     select {
  47.       width: 200px;
  48.     }
  49.     .overflow {
  50.       height: 200px;
  51.     }
  52.   </style>
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59. <script>
  60.  
  61.  
  62.     var all_tasks_counter =0 ;
  63.  
  64. var in_progress_counter =0;
  65. var completed_counter =0;
  66. var arch_counter =0;
  67.  
  68. function newtask(id,name,date,description,status)
  69. {
  70.     this.id = id ;
  71.     this.name=name;
  72.     this.date =date;
  73.     this.description = description ;
  74.     this.status = status;
  75. }
  76.  
  77.     var all=[];
  78.     var arch=[];
  79.     var completed=[];
  80.     var progress=[];
  81.  
  82.  
  83. function show(){
  84.    
  85. document.getElementById("dialog").style.display = 'block'}
  86. function hide(){
  87.    
  88. document.getElementById("dialog").style.display = 'none'}
  89.  
  90. function add()
  91. {
  92.     var trry=document.getElementById('task').value;
  93.  var trry1=document.getElementById('datepicker').value;
  94. var trry2=document.getElementById('description').value;
  95. var status = progress ;
  96.     var task = new newtask(all_tasks_counter+1,trry,trry1,trry2,status);
  97.  
  98. all_tasks_counter ++;
  99.     in_progress_counter++ ;
  100.      all.push(task);
  101.      progress.push(task);
  102.      hide();
  103.      drawall();
  104.      
  105. }
  106.  
  107. var i;
  108.  
  109.  
  110.  
  111.  
  112.  
  113.  
  114.  
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121.  
  122. function CtoP (i)
  123. {
  124. progress.push(completed[i]);
  125.   in_progress_counter ++ ;
  126.   var count ;completed_counter -- ;
  127.  
  128. for (count = i ; count < completed_counter ; count++)
  129. {
  130.       completed[count].date=completed[count+1].date ;
  131.       completed[count].description=completed[count+1].description ;
  132.       completed[count].name=completed[count+1].name ;
  133.       completed[count].status=completed[count+1].status ;
  134. }
  135.  
  136. drawcompleted();
  137.  
  138. }
  139.  
  140.  
  141.  
  142.  
  143.  
  144. function CtoA (i)
  145. {
  146. arch.push(completed[i]);
  147. arch_counter ++ ;
  148. var count ;completed_counter-- ;
  149. for (count = i ; count < completed_counter ; count++)
  150. {
  151. completed[count].date=completed[count+1].date ;
  152.   completed[count].description=completed[count+1].description ;
  153.   completed[count].name=completed[count+1].name ;
  154.       completed[count].status=completed[count+1].status ;
  155. }
  156.  
  157.  
  158. drawcompleted();
  159.  
  160. }
  161.  
  162.  
  163.  
  164.  
  165.  
  166. function PtoC (i)
  167. {
  168. completed.push(progress[i]);
  169. completed_counter ++ ;
  170. var count ;in_progress_counter-- ;
  171.  
  172. for (count = i ; count < in_progress_counter ; count++)
  173. {
  174.   progress[count].date=progress[count+1].date ;
  175.   progress[count].description=progress[count+1].description ;
  176.   progress[count].name=progress[count+1].name ;
  177.   progress[count].status=progress[count+1].status ;
  178. }
  179. drawprogress();
  180. }
  181.  
  182.  
  183.  
  184.  
  185.  
  186.  
  187.  
  188. function PtoA (i)
  189. {
  190. arch.push(progress[i]);
  191.  arch_counter++ ;
  192. var count ;in_progress_counter-- ;
  193.  
  194. for (count = i ; count < in_progress_counter ; count++)
  195. {
  196.   progress[count].date=progress[count+1].date ;
  197.   progress[count].description=progress[count+1].description ;
  198.   progress[count].name=progress[count+1].name ;
  199.       progress[count].status=progress[count+1].status ;
  200.  
  201. }
  202. drawprogress();
  203. }
  204.  
  205.  
  206.  
  207.  
  208.  
  209.  
  210.  
  211.  
  212.  
  213.  
  214.  
  215. function AtoP (i)
  216. {
  217. progress.push(arch[i]);
  218.  progress_counter++ ;
  219. var count ;arch_counter-- ;
  220.  
  221. for (count = i ; count < arch_counter ; count++)
  222. {
  223.   arch[count].date=arch[count+1].date ;
  224.   arch[count].description=arch[count+1].description ;
  225.   arch[count].name=arch[count+1].name ;
  226.   arch[count].status=arch[count+1].status ;
  227.  
  228. }
  229. drawarch();
  230. }
  231.  
  232.  
  233.  
  234.  
  235.  
  236.  
  237.  
  238.  
  239. function AtoC (i)
  240. {
  241. completed.push(arch[i]);
  242.  completed_counter++ ;
  243. var count ;arch_counter-- ;
  244.  
  245. for (count = i ; count < arch_counter ; count++)
  246. {
  247.   arch[count].date=arch[count+1].date ;
  248.   arch[count].description=arch[count+1].description ;
  249.   arch[count].name=arch[count+1].name ;
  250.   arch[count].status=arch[count+1].status ;
  251.  
  252. }
  253. drawarch();
  254. }
  255.  
  256.  
  257.  
  258.  
  259.  
  260.  
  261.  
  262. function drawall()
  263. {   if(all_tasks_counter == 0 )
  264.       {
  265.           var text = "<tr>";
  266.         text += "<td></td>";
  267.         text += "<td>" + "NO TASKS" + "</td>";
  268.                 text += "<td></td>";
  269.         text += "<td></td>";
  270.  
  271.              text += "<td></td>";
  272.             text += "</tr>";        
  273.         document.getElementById("pagee").innerHTML = text;
  274.         }
  275.         else{
  276.             var text ="<table>";
  277.         for(i = 0; i< all_tasks_counter; i++){
  278.   text += "<tr>";
  279.         text += "<td><input type=\"checkbox\" id=\"all[i].status\" + i></td>";
  280.         text += "<td>" + (i+1) + "</td>";
  281.        
  282.            text += "<td>"+all[i].name + "</td>";
  283.            text += "<td>"+all[i].date + "</td>";
  284.            text += "<td><button>Edit Task</button><button>Delete Task</button><button>Archive Task</button><button>Mark As Completed</button></td>";
  285.            text += "</tr>";
  286.                }    
  287.             text +="</table>";
  288.  
  289.             document.getElementById("pagee").innerHTML = text;
  290.             document.getElementById("allnumber").innerHTML = all_tasks_counter;
  291.                         document.getElementById("progressnumber").innerHTML = in_progress_counter;
  292.             document.getElementById("completednumber").innerHTML = completed_counter;
  293.             document.getElementById("archnumber").innerHTML = arch_counter;
  294.  
  295. }
  296.  
  297. }
  298.  
  299. function drawcompleted(){
  300.     if(completed_counter == 0 )
  301.         {
  302.             var text = "<tr>";
  303.         text += "<td></td>";
  304.         text += "<td>" + "NO TASKS" + "</td>";
  305.                 text += "<td></td>";
  306.         text += "<td></td>";
  307.  
  308.              text += "<td></td>";
  309.             text += "</tr>";        
  310.         document.getElementById("pagee").innerHTML = text;
  311.         }
  312.         else{           var text ="<table>";
  313.  
  314.         for(i = 0; i< completed_counter; i++){
  315.  text = "<tr>";
  316.         text += "<td> <input type=\"checkbox\" id=\"completed[i].status\" + i></td>";
  317.         text += "<td>" + (i+1)  + "</td>";
  318.        
  319.             text += "<td>"+completed[i].name + "</td>";
  320.             text += "<td>"+completed[i].date + "</td>";
  321.            text += "<td><button>Edit Task</button><button>Delete Task</button><button onclick = \"CtoA("+i+")\">Archive Task</button><button onclick =\"CtoP("+i+")\">In Progress</button></td>";
  322.             text += "</tr>";      }
  323.                                     text +="</table>";
  324.                                       document.getElementById("pagee").innerHTML = text;
  325.                                       document.getElementById("allnumber").innerHTML = all_tasks_counter;
  326.                         document.getElementById("progressnumber").innerHTML = in_progress_counter;
  327.             document.getElementById("completednumber").innerHTML = completed_counter;
  328.             document.getElementById("archnumber").innerHTML = arch_counter;
  329.  
  330.  
  331. }
  332. }
  333. // var x ;
  334. // function PtoC (x)
  335. // {
  336. //     var y=x;
  337. // completed.push(progress[y]);
  338. // completed_counter++ ;
  339. // PtoC2 ();
  340.  
  341. // }
  342. // function PtoC2()
  343. // {
  344. //     var count ;
  345. //     in_progress_counter-- ;
  346. // for (count = x ; count < in_progress_counter ; count++)
  347. //  {
  348. //    progress[count].date=progress[count+1].date ;
  349. //    progress[count].description=progress[count+1].description ;
  350. //    progress[count].name=progress[count+1].name ;
  351. //        progress[count].status=progress[count+1].status ;
  352.  
  353. // }
  354.  
  355.  // progress.splice(x,1);
  356.  
  357. // drawprogress();
  358. // }
  359.  
  360.  
  361.  
  362.  
  363.  
  364.  
  365. function drawarch()
  366. {   if(arch_counter == 0 )
  367.      {
  368.          var text = "<tr>";
  369.         text += "<td></td>";
  370.         text += "<td>" + "NO TASKS" + "</td>";
  371.                 text += "<td></td>";
  372.         text += "<td></td>";
  373.  
  374.              text += "<td></td>";
  375.             text += "</tr>";        
  376.         document.getElementById("pagee").innerHTML = text;
  377.         }
  378.         else{
  379.                         var text ="<table>";
  380.  
  381.         for(i = 0; i< arch_counter; i++){
  382.   text = "<tr>";
  383.         text += "<td><input type=\"checkbox\" id=\"arch[i].status\" + i></td>";
  384.         text += "<td>" + (i+1)  + "</td>";
  385.        
  386.             text += "<td>"+arch.name + "</td>";
  387.             text += "<td>"+arch.date + "</td>";
  388.            text += "<td><button>Edit Task</button><button>Delete Task</button><button onclick = \"AtoC("+i+")\">Mark As Completed</button><button onclick = \"AtoP("+i+")\">In Progress</button></td>";
  389.             text += "</tr>"; }
  390.                         text +="</table>";
  391.                               document.getElementById("pagee").innerHTML = text;
  392.                               document.getElementById("allnumber").innerHTML = all_tasks_counter;
  393.                         document.getElementById("progressnumber").innerHTML = in_progress_counter;
  394.             document.getElementById("completednumber").innerHTML = completed_counter;
  395.             document.getElementById("archnumber").innerHTML = arch_counter;
  396.  
  397.  
  398. }
  399. }
  400. function drawprogress()
  401. {   if(in_progress_counter == 0 )
  402.         {
  403.             var text = "<tr>";
  404.         text += "<td></td>";
  405.         text += "<td>" + "NO TASKS" + "</td>";
  406.                 text += "<td></td>";
  407.         text += "<td></td>";
  408.  
  409.              text += "<td></td>";
  410.             text += "</tr>";        
  411.         document.getElementById("pagee").innerHTML = text;
  412.         }
  413.         else{
  414.             var text ="<table>";
  415.         for(i = 0; i< in_progress_counter; i++){
  416.   text += "<tr>";
  417.         text += "<td><input type=\"checkbox\" id=\"progress[i].status\" + i></td>";
  418.         text += "<td>" + (i+1) + "</td>";
  419.        
  420.             text += "<td>"+progress[i].name + "</td>";
  421.             text += "<td>"+progress[i].date + "</td>";
  422.            text += "<td><button>Edit Task</button><button>Delete Task</button><button onclick = \"PtoA("+i+")\">Archive Task</button><button onclick = \"PtoC("+i+")\">Mark As Completed</button></td>";
  423.             text += "</tr>";        }
  424.             text +="</table>";
  425.  
  426.             document.getElementById("pagee").innerHTML = text;
  427.             document.getElementById("allnumber").innerHTML = all_tasks_counter;
  428.                         document.getElementById("progressnumber").innerHTML = in_progress_counter;
  429.             document.getElementById("completednumber").innerHTML = completed_counter;
  430.             document.getElementById("archnumber").innerHTML = arch_counter;
  431.  
  432. }
  433. }
  434.  
  435.          
  436.  $(function(){
  437.   $.datepicker.setDefaults(
  438.     $.extend( $.datepicker.regional[ '' ] )
  439.   );
  440.   $( '#datepicker' ).datepicker();
  441.  
  442. });
  443. </script>
  444.  
  445.  
  446.  
  447.         <style>
  448.          
  449.              table#one td , td  {
  450.                  width : 100 % ;
  451.                  left-side : 100 % ;
  452.                  margin-right : 80% ;
  453.                  margin-top : 80% ;
  454.                  border : 1px solid black;
  455.                  border-collapse: collapse;
  456.                  table-layout:fixed;
  457.             }
  458.             td, td {
  459.                  padding: 45px;
  460.             }
  461.              
  462.  
  463.  
  464.              <style>
  465.     fieldset {
  466.       border: 0;
  467.     }
  468.     label {
  469.       display: block;
  470.       margin: 30px 0 0 0;
  471.     }
  472.     select {
  473.       width: 200px;
  474.     }
  475.     .overflow {
  476.       height: 200px;
  477.     }
  478.   </style>
  479.          
  480.          
  481.          
  482.         </style>
  483.  
  484.  
  485.     </head>
  486.      
  487.      
  488.     <body>
  489.       <div class="container-fluid" style="background-color:#B28AB2" >
  490.   <h1 style="font-size:20px;"><strong>ToDoList</h1>
  491.   <p style="font-size:20px;"> <strong>helps you manage your time</p>
  492.   <div class="row">
  493.     <div class="col-sm-4" style="background-color:lavender; height : 1000px ;width:400px">
  494.         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  495.                         <button id="Rbutton1" name="choose action" onclick="drawall()" value="(1) All Tasks"><label  style ="font-size : 20px;width:200px">  All Tasks </label><strong><p id="allnumber" style ="font-size : 20px;"></p></button>
  496.                             <br>
  497.                             <br>
  498.                      
  499.                         <button id="Rbutton2" name="choose action" onclick="drawprogress()" value="(2) In Progress"> <label  style ="font-size : 20px; width:200px ">  In Progress </label> <p id="progressnumber" style ="font-size : 20px;"></p></button>
  500.                             <br>
  501.                             <br>
  502.                         <button  id="Rbutton3" name="choose action" onclick="drawcompleted()" value="(3) Completed Tasks">  <label  style ="font-size : 20px;width:200px "> Completed Tasks </label> <p id="completednumber" style ="font-size : 20px;"></p></button>
  503.                             <br>
  504.                             <br>
  505.                         <button  id="Rbutton4" name="choose action" onclick="drawarch()" value="(4) Archived">  <label  style ="font-size : 20px; width:200px"> Archived</label><p id="archnumber" style ="font-size : 20px;"></p> </button>
  506.     </div>
  507.    
  508.     <div class="col-sm-8" style="background-color:lavenderblush; height : 1000px ; width : 1500px">
  509.    
  510.     <br><br>
  511.    
  512.  
  513. <table id="page"></table>
  514. <br>
  515. <br>
  516.  
  517.  
  518.  
  519.                
  520.  
  521. <div id="users-contain" class="ui-widget">
  522.   <h1 id="heading" style="font-size :20px"></h1>
  523.   <table id="users" class="ui-widget ui-widget-content" style= "width:1250px ; font-size : 20px">
  524.     <thead>
  525.       <tr class="ui-widget-header ">
  526.         <th></th>
  527.         <th>ID</th>
  528.         <th>Task name</th>
  529.         <th>Date</th>
  530.         <th>options</th>
  531.       </tr>
  532.     </thead>
  533.     <tbody id="pagee" >
  534.      
  535.     </tbody>
  536.   </table>
  537.                
  538.  
  539. <button id="addbutton" type="button" class="btn btn-default" onclick="show()" ; style = "background-color: #D96C77; font-size : 30px;">+ Add Task </button>
  540.  
  541. <div id="dialog" class="container" style="display:none; font-size:20px">
  542.  
  543.       <label for="task">Task</label>
  544.       <input type="text" name="task" id="task" >
  545.       <label for="date">Date</label>
  546.       <input type="text" name="date" id="datepicker" >
  547.       <label for="description">Description</label>
  548.         <textarea id="description" rows="4" cols="30" ></textarea>
  549.       <input id= "submit" onclick="add()" type="submit"></input>
  550.  
  551.  
  552. </div>
  553.  
  554.  
  555.  
  556. </div>
  557.    
  558. </div>
  559.   </div>
  560. </div>
  561.      
  562.     </body>
  563.     </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!