Cara menggunakan javascript settimeout fadeout

Oke guys kali ini saya akan membagikan source code cara membuat simple todo list dengan html

Untuk membuat Todo List Dengan HTML. Pertama, Anda perlu membuat dua File: HTML & CSS. Setelah membuat file-file ini, rekatkan kode-kode berikut ke dalam file Anda. Anda juga dapat mengunduh file kode sumber dari program Deteksi Browser ini dari tombol unduh yang diberikan.

Pertama, buat file HTML dengan nama index.html dan tempel kode yang diberikan ke file HTML Anda. Ingat, Anda harus membuat file dengan ekstensi .html, dan gambar yang digunakan pada program ini tidak akan muncul. Anda harus mengunduh file dari tombol unduh yang diberikan untuk menggunakan gambar juga.

 


    
    
    
    
    
  
  
  
    

    
    

      
Sorry, your task list is empty.
      

      
    
    
    

        
        +
    
  
      
  
    
        
  
    
  
  
  
  
   
  
  

Selanjutnya, buatlah file dengan nama style.css lalu masukkan kode nya dibawah ini

  
body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    height: 100vh;
    background-color: #f0f0ff;
    font-family: "Poppins", sans-serif;
  }
  
  #container {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: stretch;
            align-items: stretch;
    width: 500px;
    background-color: #fafafa;
    padding: 0px;
    box-shadow: 0 20px 30px 0 rgba(1, 1, 1, 0.07);
    margin: 6rem 0;
    border-radius: 0.75rem;
  }
  
  #footer {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    align-self: flex-start;
    text-transform: uppercase;
    box-shadow: 0 -10px 10px 0 rgba(1, 1, 1, 0.05);
  }
  #footer #taskAdd {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    width: 3rem;
    height: 3rem;
    background: #3b44fb;
    color: white;
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    border-radius: 0.75rem;
    border: 0;
    outline: 0;
    will-change: transform;
  }
  #footer #taskAdd:hover {
    background: #050fe5;
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  #footer #taskAdd:active {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  #footer input#taskInput {
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    background: transparent;
    width: calc(100% - 3rem - 5px);
    border: none;
  }
  #footer input#taskInput:focus {
    outline: 0;
    border-color: white;
    color: #0d0d0d;
  }
  
  #tasks {
    padding: 1.5rem 2rem;
  }
  #tasks #tasksList {
    list-style-type: none;
    padding-left: 0;
  }
  #tasks #tasksList li {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 20px 30px 0 rgba(1, 1, 1, 0.07);
    border-radius: 0.75rem;
    color: #0d0d0d;
    padding: 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .03rem;
    -webkit-animation: fadeIn .5s linear;
            animation: fadeIn .5s linear;
    background-color: #fff;
    margin-bottom: 5px;
    position: relative;
    border-right: 0px solid lightgray;
    letter-spacing: -.015rem;
    will-change: transform;
  }
  #tasks #tasksList li:hover {
    border-right: 55px solid red;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    z-index: 20;
    box-shadow: 0 20px 30px 0 rgba(1, 1, 1, 0.2);
  }
  #tasks #tasksList li:hover .delete {
    right: -37px;
    color: white;
  }
  #tasks #tasksList li .delete {
    -webkit-transition: all 0.30s ease-in-out;
    transition: all 0.30s ease-in-out;
    position: absolute;
    color: transparent;
    background: none;
    border: none;
    outline: 0;
    line-height: .85rem;
    font-size: 1rem;
  }
  #tasks #tasksList li .delete:hover {
    opacity: .75;
  }
  #tasks #notification {
    padding-top: 1rem;
    text-align: center;
    color: gray;
    font-weight: 500;
    font-size: 1.25rem;
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
      margin-top: -50px;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      margin-top: 0px;
    }
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
      margin-top: -50px;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      margin-top: 0px;
    }
  }
  @-webkit-keyframes fadeOut {
    0% {
      opacity: 1;
      margin-top: 0px;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 0;
      margin-top: -50px;
    }
  }
  @keyframes fadeOut {
    0% {
      opacity: 1;
      margin-top: 0px;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 0;
      margin-top: -50px;
    }
  }
  

Atau bisa download source code nya dibawah ini sudah saya lampirkan