Tutorial Membuat To - do list Menggunakan HTML, CSS, dan JQuery

Hallo guys, balik lagi nih kita desain web ^-^

Maaf jarang share artikel ya, ada kerjaan lain soalnya.. Hehe...

Tapi tenang aja, pasti saya terus update blog ini kok.. stay toon! aja untuk tutorial yang menarik lainnya ^-^

Nah, kesempatan kali ini saya akan share cara buat To - do list seperti Sticky Notes di windows lah kurang lebih.. Tapi dengan tampilan yang lebih elegan dan menarik ^-^

Oke.., Disini saya menggunakan HTML, CSS, dan JQuery (Untuk JQuery dan Style Font, saya menggunakan cloud) Bisa cek di website resminya ya JQuery dan FontAwesome ^-^

Ingat!! Saya hanya share Front - end untuk To - do list ini, jika ingin menggunakan database juga bisa kok.. bisa kalian tulis sendiri scriptnya atau menggunakan MySQL.. Hehehe...

Langsung aja ke coding nya ya..

Kita buat dulu file indeks.html lalu tulis script berikut.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>

    <div class="container">
      <input type="text" class="txtb" placeholder="Add a task">
      <div class="notcomp">
        <h3>
Not Completed</h3>
</div>
<div class="comp">
          <h3>
Completed</h3>
</div>
</div>
</body>
</html>

Lanjut kita buat file style.css lalu tulis script berikut.

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat", sans-serif;
  box-sizing: border-box;
}

body{
  background-image: linear-gradient(120deg,#487eb0,#fbc531);
  min-height: 100vh;
}

.container{
  max-width: 800px;
  margin: auto;
  padding: 10px;
}

.txtb{
  width: 100%;
  border: none;
  border-bottom: 2px solid #000;
  background: none;
  padding: 10px;
  outline: none;
  font-size: 18px;
}

h3{
  margin: 10px 0;
}

.task{
  width: 100%;
  background: rgba(255,255,255,0.5);
  padding: 18px;
  margin: 6px 0;
  overflow: hidden;
}

.task i{
  float: right;
  margin-left: 20px;
  cursor: pointer;
}

.comp .task{
  background: rgba(0,0,0,.5);
  color: #fff;
}

Setelah semua coding diatas selesai.. sekarang kita buat script java nya, biar tampilan lebih menarik dan dinamis ^-^

Buat tag <script> dan letakkan diakhir kode HTML (Sebelum tag penutup </html>) lalu tulis script berikut.

<script type="text/javascript">
  $(".txtb").on("keyup",function(e){
    //means enter button
    if(e.keyCode == 13 && $(".txtb").val() != "")
    {
      var task = $("<div class='task'>
</div>
").text($(".txtb").val());
      var del = $("<i class='fas fa-trash-alt'></i>").click(function(){
        var p = $(this).parent();
        p.fadeOut(function(){
          p.remove();
        });
      });

      var check = $("<i class='fas fa-check'></i>").click(function(){
        var p = $(this).parent();
        p.fadeOut(function(){
          $(".comp").append(p);
          p.fadeIn();
        });
        $(this).remove();
      });

      task.append(del,check);
      $(".notcomp").append(task);
      //to clear the input
      $(".txtb").val("");
    }
  })
</script>

Seharusnya sampai disini sudah selesai guys.. bisa kalian lihat demo video berikut. Jika ada error atau hasil tidak sama dengan tampilan di video, bisa kalian komentar dibawah. Kita disini sharing ilmu kok :)

Ingat!! Pastikan komputer kalian terkoneksi internet saat mencoba script ini.. karena disini kita menggunakan cloud JQuery dan FontAwesome, agar muncul tampilan dari cloudnya ^-^ (Bagi Newbie :v)

Bagi yang ingin mencoba saya siapkan demo-nya kok → LINK!
Bagi yang mau download source code nya bisa langsung ke Blog Dark Code ya.. [Ngoding kok copy/paste :v]

Note: Jika ada penulisan kata/script yang salah dan ada error pada kode bisa sharing ke kolom komentar ya.. Jangan lupa share artikel ini ke temen-temen kalian juga ya, semoga bermanfaat ^-^

Tutorial Membuat To - do list Menggunakan HTML, CSS, dan JQuery - ShareItCare Blog

Post a Comment

0 Comments

Popular Posts

Mengenal QR Code dan Barcode, Apakah Mereka Sama? - ShareItCare Blog