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.
<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>
$(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 :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
