lemansky

Untitled

May 12th, 2021
589
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  9.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  10.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  11.     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
  12.     <script>
  13.     $(document).ready(() => {
  14.        
  15.     });
  16.     </script>
  17.     <style>
  18.         .task-list {
  19.           width: 250px;
  20.           float: left;
  21.           margin: 0 5px;
  22.           background-color: #e3e3e3;
  23.           min-height: 240px;
  24.           border-radius: 10px;
  25.           padding-bottom: 15px;
  26.         }
  27.         .todo-task{
  28.             background:white;
  29.             padding:6px;
  30.         }
  31.         #delete-div {
  32.           background-color: #fff;
  33.           border: 3px dotted #000;
  34.          
  35.           height: 75px;
  36.           line-height: 75px;
  37.           text-align: center;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="container mt-4">
  43.         <div class="task-list task-container p-2" id="pending">
  44.             <h3 class="text-center">Pending</h3>
  45.             <div class="todo-task" id="randomid-123">
  46.                 <div class="task-header">Sample Header</div>
  47.                 <div class="task-date">25/06/1992</div>
  48.                 <div class="task-description">Lorem Ipsum Dolor Sit Amet</div>
  49.             </div>
  50.         </div>
  51.  
  52.         <div class="task-list task-container p-2" id="inProgress">
  53.             <h3 class="text-center">In Progress</h3>
  54.         </div>
  55.  
  56.         <div class="task-list task-container p-2" id="completed">
  57.             <h3 class="text-center">Completed</h3>
  58.         </div>
  59.  
  60.         <div class="task-list task-container p-2">
  61.             <h3 class="text-center">Add a task</h3>
  62.             <form id="todo-form">
  63.                 <div class="form-group">
  64.                     <input type="text" class="form-control" id="title" placeholder="Title" />
  65.                     <textarea placeholder="Descrtipion" id="description" class="form-control"></textarea>
  66.                     <input type="text" id="datepicker" class="form-control" placeholder="Due Date (dd/mm/yyyy)" />
  67.                 </div>
  68.                 <div class="form-group">
  69.                     <input type="button" class="btn btn-block btn-primary" id="addtask" value="Add Task" />
  70.                 </div>
  71.             </form>
  72.             <input type="button" class="btn btn-block btn-primary" value="Clear Data" />
  73.  
  74.             <div id="delete-div" class=" mt-3">Drag Here to Delete</div>
  75.         </div>
  76.     </div>
  77. </body>
  78. </html>
RAW Paste Data