<th scope="col">Bounce rate</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">
                      Jan 2020
                    </th>
                    <td>
                      4,569
                    </td>
                    <td>
                      340
                    </td>
                    <td>
                      <i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      Feb 2020
                    </th>
                    <td>
                      3,985
                    </td>
                    <td>
                      319
                    </td>
                    <td>
                      <i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      March 2020
                    </th>
                    <td>
                      3,513
                    </td>
                    <td>
                      294
                    </td>
                    <td>
                      <i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                     April 2020
                    </th>
                    <td>
                      2,050
                    </td>
                    <td>
                      147
                    </td>
                    <td>
                      <i class="fas fa-arrow-up text-success mr-3"></i> 50,87%
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                     May 2020
                    </th>
                    <td>
                      1,795
                    </td>
                    <td>
                      190
                    </td>
                    <td>
                      <i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="col-xl-4">
          <div class="card">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col">
                  <h3 class="mb-0">Task List</h3>
                </div>
                <div class="col text-right">
                  <a href="#!" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#exampleModal">Add New Task</a>
                </div>
              </div>
            </div>

              






<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">




  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New Task</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="alert alert-success alert-dismissible fade show" role="alert">
    <span class="alert-icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-text"><strong>Success!</strong> This is a success alert—check it out!</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
        <div class=" d-flex flex-row">
    <input type="text" class="form-control form-control-alternative col-7" placeholder="Call all girls..." id="new_task">
     <button type="button" class="btn btn-outline-default  col-4 mx-2 btn-sm"  id="add_task">Add New  Task </button>
        </div>

        <ul class="list-group custom-list-group rounded-3 mt-3">
          
        </ul>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>





            <div class="table-responsive">
             
              <table class="table align-items-center table-flush">
                <thead class="thead-light">
                  <tr>
                    <th scope="col">Task </th>
                    <th scope="col">Complete</th>
                   
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">
                      Facebook
                    </th>
                    <td>
                        
                    <i class="fa fa-trash-alt"></i>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      Facebook
                    </th>
                    <td>
                        
                    <i class="fa fa-trash-alt"></i>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      Facebook
                    </th>
                    <td>
                        
                    <i class="fa fa-trash-alt"></i>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      Facebook
                    </th>
                    <td>
                        
                    <i class="fa fa-trash-alt"></i>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      Facebook
                    </th>
                    <td>
                        
                    <i class="fa fa-trash-alt"></i>
                    </td>
                  </tr>


                </tbody>
              </table>
            </div>
            
          </div>
        </div>
      </div>
     
    </div>
  </div>
 <?php include("includes/footer.php");?>
 
 <script>

   $(document).ready(function(){
// default alert hidden
    $('.alert').hide()


     $("#add_task").click(function(e){
      //  hide the alert is there
  $('.alert').hide()
  $('.alert').toggle(".show.fade");
  $('.alert').show();
  let li=document.createElement("li"),
      span=document.createElement("span"),
      i=document.createElement("i")
  li.classList.add("list-group-item")
  li.classList.add("d-flex")
  li.classList.add("flex-row")
  li.classList.add("justify-content-between")
  li.classList.add("custom-list-group-item")
  li.classList.add("tasks")

  i.classList.add("fa")
  i.classList.add("fa-trash-alt")
  i.classList.add("text-danger")
  i.classList.add("tasks-delete")
  i.classList.add("pt-1")
  i.classList.add("pt-1")

  li.append(span);
  li.append(i);
  span.innerText=$("#new_task").val()
  $(".custom-list-group").prepend(li)

     })

     console.log($(".tasks-delete"))

     

      $("ul.custom-list-group").on( "click",".tasks-delete",function(e){

       
        console.log(e.target.parentElement)
        e.target.parentElement.classList.add("delete")

        setTimeout(() => {
          $(e.target.parentElement).remove()
        }, 1000);
        
        // e.target.parentElement.style.display="none!important"
      })
     
   })
 </script>KINGSTON - 21 AUGUST: Programmes for sale outside the the Combined Counties League match between AFC Wimbledon and Chipstead at the Kingsmeadow Stadium in Kingston, England on 21 August, 2002. The match ended AFC Wimbledon 1 - Chipstead 2 and was the first