Membuat To Do List Menggunakan Javascript

Sharing Teknologi – Membuat To Do List Menggunakan Javascript Di WordPress. Apakah Sobat teknologi[dot]visitklaten[dot]com ingin Membuat Todo List Template Di WordPress dengan hanya bermodal JavaScript. To do list adalah daftar pekerjaan yang harus diselesaikan, diurutkan berdasarkan skala prioritas.

Apabila Sobat ingin mempercantik tampilan website dengan animasi dengan hanya bermodal JavaScript. Maka salah satu metode ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki terutama CMS WordPress.

Dengan hanya bermodal HTML ,style CSS dan sedikit JavaScript bisa membuat website lebih menarik. Selain itu untuk membuatnya juga cukup mudah.

Tanpa plugin dengan bermodalkan JavaScript yang cukup sederhana dan simple maka rekan-rekan bisa Membuat To Do List .

JavaScript adalah suatu bahasa pemrograman level tinggi yang pada awalnya didesain untuk membuat efek interaktif pada browser. Dahulu bahasa pemrograman ini sebagian besar hanya digunakan untuk program-program front-end. Akan tetapi sekarang ruang lingkupnya sudah lebih luas dan menjadi favorit Pengembang sepanjang masa.

JavaScript memiliki daftar framework yang tidak ada habisnya. Dilengkapi dengan library, dan juga solusi perangkat lunak seperti Electron, node.js, Angular JS, dan masih banyak lagi lainnya. JavaScript saat ini sudah digunakan untuk membuat program front-end, back-end, dan juga berbagai macam permainan.

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Membuat To Do List Dengan Tambahan Javascript. 

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat To Do List Menggunakan Javascript

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai kebutuhan. Dalam kode dibawah ini kami menggunakan sistem shortcode yang bisa dipasang atau diletakkan di functions.php agar lebih mudah untuk dipasang dimanapun nantinya. Silakan nanti bisa disesuaikan dengan kebutuhan.

function todo_list() {
ob_start(); ?>
<div class="frame-todolist alert-info p-4 rounded">
  <div id="app">  
   <div class="textfrost-gradient h3style h3 mb-4">To Do List</div>  
   <ul>  
   </ul>  
   <input class="form-control" type="text" placeholder="Tugas Baru">  
   <button class='btn_add mt-3'>Tambah</button>  
   <p class="mt-3">Masukkan Tugas Baru</p>  
  </div> 
</div>

<script type="text/javascript">
 var listElement = document.querySelector("#app ul");  
 var inputElement = document.querySelector("#app input");  
 var buttonElement = document.querySelector("#app button");  
 var todos = JSON.parse(localStorage.getItem("list_todos")) || [];  
 function renderTodos() {  
  listElement.innerHTML = "";  
  for (todo of todos) {  
   var todoElement = document.createElement("li");  
   var todoText = document.createTextNode(todo);  
   var linkElement = document.createElement("a");  
   linkElement.setAttribute("href", "#");  
   var pos = todos.indexOf(todo);  
   linkElement.setAttribute("onclick", "deleteTodo(" + pos + ")");  
   var linkText = document.createTextNode("done");  
   linkElement.appendChild(linkText);  
   todoElement.appendChild(todoText);  
   todoElement.appendChild(linkElement);  
   listElement.appendChild(todoElement);  
  }  
 }  
 renderTodos();  
 function addTodo() {  
  var todoText = inputElement.value;  
  todos.push(todoText);  
  inputElement.value = "";  
  renderTodos();  
  saveToStorage();  
 }  
 buttonElement.onclick = addTodo;  
 function deleteTodo(pos) {  
  todos.splice(pos, 1);  
  renderTodos();  
  saveToStorage();  
 }  
 function saveToStorage() {  
  localStorage.setItem("list_todos", JSON.stringify(todos));  
 }  
</script>

<style>
.frame-todolist li a {
    border-radius: 5px;
    background: #0170b9;
    color: #fff;
    padding: 4px 8px;
    margin-left: 7px;
    font-size: small;
}
</style>

    <?php return ob_get_clean();
}
add_shortcode('todolist', 'todo_list');

Kemudian masukkan shortcode dibawah ini di tempat yang diinginkan. Jika berupa halaman atau post bisa langsung dicopas.

[*todolist*] //hilangkan tanda bintang

Namun jika berupa tag HTML atau php maka bisa menggunakan dibawah ini

<?php echo do_shortcode('[*todolist*]') ;?> //hilangkan tanda bintang

Tampilannya kurang lebih bisa dilihat dibawah ini. 

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.