SHARE
TWEET

index.gtlm

a guest Dec 7th, 2019 161 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  10.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  11.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  12.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  13. </head>
  14.  
  15. <body>
  16.  
  17.     <div class="container mt-5 mb-5">
  18.         <div class="jumbotron">
  19.             <h1 class="display-4">C.R.U.D Without Database Just Single File HTML !</h1>
  20.             <p class="lead">This is a Crud demo whithout database sql or no sql, just using single file html and some
  21.                 javascript code.</p>
  22.             <hr class="my-4">
  23.             <p>Created by <a href="http://facebook.com/fachry.ansyah/10">fahriansyah</a>.</p>
  24.             <button class="btn btn-primary" data-toggle="modal" data-target="#modalAdd">Add Todo</button>
  25.         </div>
  26.  
  27.  
  28.  
  29.         <div class="row">
  30.             <div class="col-md-12 col-12 mt-4">
  31.                 <table class="table table-striped table-hover">
  32.                     <thead class="thead-dark">
  33.                         <tr>
  34.                             <th scope="col">#</th>
  35.                             <th scope="col">Name</th>
  36.                             <th scope="col">Description</th>
  37.                             <th scope="col">Action</th>
  38.                         </tr>
  39.                     </thead>
  40.                     <tbody id="list">
  41.  
  42.                     </tbody>
  43.                 </table>
  44.             </div>
  45.         </div>
  46.     </div>
  47.  
  48.     <!-- Modal Add Data -->
  49.     <div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  50.        aria-hidden="true">
  51.         <div class="modal-dialog" role="document">
  52.             <div class="modal-content">
  53.                 <div class="modal-header">
  54.                     <h5 class="modal-title" id="exampleModalLabel">Add Todo</h5>
  55.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  56.                         <span aria-hidden="true">&times;</span>
  57.                     </button>
  58.                 </div>
  59.                 <div class="modal-body">
  60.                     <form id="formAdd">
  61.                         <div class="form-group">
  62.                             <label>Name</label>
  63.                             <input id="txtAddName" type="text" class="form-control form-control-sm">
  64.                         </div>
  65.                         <div class="form-group">
  66.                             <label>Description</label>
  67.                             <textarea id="txtAddDescription" cols="4" rows="4"
  68.                                class="form-control form-control-sm"></textarea>
  69.                         </div>
  70.                     </form>
  71.                 </div>
  72.                 <div class="modal-footer">
  73.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  74.                     <button type="button" class="btn btn-info" onclick="onSave()">Save changes</button>
  75.                 </div>
  76.             </div>
  77.         </div>
  78.     </div>
  79.  
  80.     <!-- Modal Update Data -->
  81.     <div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  82.        aria-hidden="true">
  83.         <div class="modal-dialog" role="document">
  84.             <div class="modal-content">
  85.                 <div class="modal-header">
  86.                     <h5 class="modal-title" id="exampleModalLabel">Update Todo</h5>
  87.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  88.                         <span aria-hidden="true">&times;</span>
  89.                     </button>
  90.                 </div>
  91.                 <div class="modal-body">
  92.                     <form id="formUpdate">
  93.                         <div class="form-group">
  94.                             <label>Name</label>
  95.                             <input id="txtUpdateName" type="text" class="form-control form-control-sm">
  96.                         </div>
  97.                         <div class="form-group">
  98.                             <label>Description</label>
  99.                             <textarea id="txtUpdateDescription" cols="4" rows="4"
  100.                                class="form-control form-control-sm"></textarea>
  101.                         </div>
  102.                     </form>
  103.                 </div>
  104.                 <div class="modal-footer">
  105.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  106.                     <button id="btnUpdate" type="button" class="btn btn-info" onclick="onUpdate()" data-key="">Save changes</button>
  107.                 </div>
  108.             </div>
  109.         </div>
  110.     </div>
  111.  
  112.     <!-- Modal Remove Todo  -->
  113.     <div class="modal fade" id="modalRemove" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  114.        aria-hidden="true">
  115.         <div class="modal-dialog" role="document">
  116.             <div class="modal-content">
  117.                 <div class="modal-header">
  118.                     <h5 class="modal-title" id="exampleModalLabel">Remove Todo</h5>
  119.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  120.                         <span aria-hidden="true">&times;</span>
  121.                     </button>
  122.                 </div>
  123.                 <div class="modal-body">
  124.                     <h4>Are you sure want to remove this todo ?</h4>
  125.                 </div>
  126.                 <div class="modal-footer">
  127.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  128.                     <button id="btnRemove" type="button" class="btn btn-outline-danger" onclick="onRemove()" data-key="">Yes, do it!</button>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.     </div>
  133.  
  134. </body>
  135.  
  136. <script>
  137.     let database = {
  138.         tableTodo: []
  139.     }
  140.  
  141.     const addTodo = ({ name, description }) => {
  142.         database.tableTodo.push({ name, description })
  143.     }
  144.  
  145.     const getTodo = () => {
  146.         const todoList = document.getElementById('list')
  147.         todoList.innerHTML = ''
  148.  
  149.         database.tableTodo.map((item, key) => {
  150.             todoList.insertAdjacentHTML('beforeend', `
  151.                 <tr>
  152.                     <th scope="row">${key + 1}</th>
  153.                     <td>${item.name}</td>
  154.                     <td>${item.description}</td>
  155.                     <td>
  156.                         <button class="btn btn-outline-danger btn-sm" onclick="onShowModalRemove(${key})">REMOVE</button>
  157.                         <button class="btn btn-primary btn-sm" onclick="onShowModalUpdate(${key})">UPDATE</button>
  158.                     </td>
  159.                 </tr>
  160.             `)
  161.         })
  162.  
  163.     }
  164.  
  165.     const updateTodo = (key, {name, description}) => {
  166.         database.tableTodo[key].name = name
  167.         database.tableTodo[key].description = description
  168.     }
  169.  
  170.     const removeTodo = (key) => {
  171.         database.tableTodo.splice(key, 1);
  172.     }
  173.  
  174.     /*
  175.         EVENT LISTENER
  176.         call some function when DOM event called
  177.     */
  178.     const onSave = () => {
  179.         const name = document.getElementById('txtAddName').value
  180.         const description = document.getElementById('txtAddDescription').value
  181.  
  182.         addTodo({ name, description })
  183.         getTodo()
  184.  
  185.         document.getElementById('formAdd').reset()
  186.         $('#modalAdd').modal('hide')
  187.     }
  188.  
  189.     const onShowModalRemove = (key) => {
  190.         const data = database.tableTodo[key]
  191.         const buttonRemove = document.getElementById('btnRemove')
  192.         buttonRemove.setAttribute('data-key', key)
  193.         $('#modalRemove').modal('show')
  194.     }
  195.  
  196.     const onRemove = () => {
  197.         const buttonRemove = document.getElementById('btnRemove')
  198.         const key = buttonRemove.getAttribute('data-key')
  199.         removeTodo(key)
  200.         $('#modalRemove').modal('hide')
  201.         getTodo()
  202.     }
  203.  
  204.     const onShowModalUpdate = (key) => {
  205.         const data = database.tableTodo[key]
  206.         document.getElementById('txtUpdateName').value = data.name
  207.         document.getElementById('txtUpdateDescription').value = data.description
  208.         const buttonUpdate = document.getElementById('btnUpdate')
  209.         buttonUpdate.setAttribute('data-key', key)
  210.         $('#modalUpdate').modal('show')
  211.     }
  212.  
  213.     const onUpdate = () => {
  214.         const buttonUpdate = document.getElementById('btnUpdate')
  215.         const key = buttonUpdate.getAttribute('data-key')
  216.         const name = document.getElementById('txtUpdateName').value
  217.         const description = document.getElementById('txtUpdateDescription').value
  218.  
  219.         updateTodo(key, {
  220.             name,
  221.             description
  222.         })
  223.        
  224.         $('#modalUpdate').modal('hide')
  225.  
  226.         getTodo()
  227.     }
  228.  
  229. </script>
  230.  
  231. </html>
RAW Paste Data
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
 
Top