Cara Membuat Todo List dengan jQuery

Cara Membuat Todo List dengan jQuery - Todo list merupakan suatu pengingat agar tidak lupa dengan semua pekerjaan karena sudah ada daftar didalam todo yang harus dikerjakan. sehingga kita bisa tau apa saja yang harus dikerjakan terlebohdahulu. Pada kesempatan kali ini saya akan bagikan tutorial bagaimana Cara Membuat Todo List dengan jQuery. Nah, penasaran seperti apa cara membuat todo list ? berikut akan saya praktekan cara membuat todo list.

Langkah 1 : Cara Membuat Todo List dengan jQuery

Langkah pertama untuk membuat todo list, buat satu file dengan nama index.html kemudian silahkan ketikan struktur awal HTML untuk todo list nya.

<body>
    <div id="wrapper">
        <h2><span class="bracket">[ </span>To Do List <span class="bracket"> ]</span></h2>
        <form>
            <input type="text" name="itemName"/>
        </form>
    
        <div id="button">Add</div>
        <br/>
        <ol></ol>
    </div>
</body>

Langkah 2 : Cara Membuat Todo List dengan jQuery

Langkah selanjutnya, agar terlihat tampilan todo list lebih menarik kita akan desain tampilan todo list dengan memanfaatkan CSS untuk layout, warna dan desain lainnya.

@import url('https://fonts.googleapis.com/css?family=Poppins');
#wrapper{
    font-family: 'Poppins', sans-serif;
    padding: 20px;
    width: 300px;
    margin: 0 auto;
    margin-top: 40px;
    background: #E4E4E4;
    border-radius: 5px;
}

form { display: inline-block; }
input {
    padding: 10px;
    width: 209px;
    border: 1px solid #0988A9;
    border-radius: 3px;
}
.bracket { color: #0988A9; }
#button{
    display: inline-block;
    background-color: #0988A9;
    color:#ffffff;
    padding: 6px 15px;
    cursor: pointer;
    border: 1px solid #0988A9;
    border-radius: 3px;
}

ol { padding-left: 20px;}
ol li { padding: 5px; color:#000;}
ol li:nth-child(even){ background: #63cdda; }
li:hover{ cursor: pointer; }

Langkah 3 : Cara Membuat Todo List dengan jQuery

Selanjutnya, agar todo list bisa berjalan dengan baik, kita akan menambahkan perintah jQuery untuk bisa menambahkan daftar pada todo listnya.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(
    function(){
        $('#button').click(
            function(){
                var add = $('input[name=itemName]').val();
                $('ol').append('<li>' + add + '</li>');
            });
       
       $("input[name=itemName]").keyup(function(event){
          if(event.keyCode == 13){
            $("#button").click();
          }         
      });
      
      $(document).on('dblclick','li', function(){
        $(this).toggleClass('strike').fadeOut('slow');    
      });
      
      $('input').focus(function() {
        $(this).val('');
      });
      
      $('ol').sortable();  
      
    }
);
</script>

Setelah semua sintak telah diketikan, silahkan buka pada browser masing - masing dan silahkan kalian tambahkan daftar todo, jika berhasil maka akan list akan bertambah. Dengan begitu kita bisa tau daftar tugas yang harus dikerjakan.

Baiklah, cukup sekian tutorial mengenai bagaimana Cara Membuat Todo List dengan jQuery, semoga tutorial ini bisa bermanfaat dan menambah wawasan lagi buat kalian yang lagi belajar perograman. Selamat mencoba :)

4 Juli 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat