Membuat To Do List Dengan Vanilla Javascript

Tetap harus berlatih untuk meningkatkan skill dalam dunia programming, dan banyak cara untuk melakukan itu bisa dengan mengikuti programming quiz , atau latihan membuat aplikasi yang sesuai dengan bahasa pemograman yang sudah anda pelajari.

Karena mempelajari bahasa pemograman itu bukan dengan menghafal, tetapi memahaminya dan mempraktekkannya, bahasa kerennya learn then action (Action Learning).

Di artikel kali ini saya akan membagikan bagaimana cara membuat to do list app dengan bahasa pemograman Javascript, dan tidak lupa juga HTML dan CSS. Ngomong-ngomong saya tidak menyebut HTML dan CSS bahasa pemograman ya, soalnya takut ada yang komplain hehe.

Membuat To Do List Dengan Vanilla Javascript
To do list example (made by me)

To do list app sendiri bekerja dimana user akan menambahkan data dan mengumpulkannya ke suatu tempat yang ditentukan, dan user juga bisa menghapusnya.

Rekomendasi Untuk Anda

Membuat To Do List App Dengan Javascript/Vanilla.js (No Library)


Oke kalau begitu kita langsung saja, saya disini memiliki 2 file yaitu
  1. index.html
  2. scripts.js
Untuk stylingnya, saya menggunakan css framework Bootstrap yang saya load dari external link.

Program to do list yang saya buat ini memiliki perbedaan dimana kalian tidak bisa menambahkan data lebih dari 5, jika anda melakukannya akan ada alert yang muncul.

Untuk demo dari hasil code saya bisa anda lihat dibawah sendiri.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
  <title>To do List</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="container mt-2">
    <h1>To do List</h1>
  <form class="form-group">
    <div class="w-100">  
  <input type="text" id="skill" class="w-100 form-control" placeholder="add item... " required>
    </div>
  </form>
  <ul class="list-unstyled shadow-sm border p-2 res">
    <span class="alert-warning p-2 d-block no-skills-status my-1">No items Found</span>
  </ul>
  </div>
<script src="scripts.js"></script>
</body>
</html>

scripts.js
var formSubmit = document.querySelector('.form-group');
var counter = 0;
formSubmit.addEventListener('submit',
  function() {
    event.preventDefault();
    function addItem() {
      var getValue = document.querySelector('#skill').value;
      var listitem = document.createElement('li');
      var spanitem = document.createElement('span');
      var deleteitem = document.createElement('button');
      deleteitem.classList.add('btn','btn-sm','btn-danger','delete-item','ml-3');
      deleteitem.innerHTML = 'DELETE';
      spanitem.innerHTML = getValue;
      listitem.classList.add('list-item','my-1','shadow-sm','border','p-2','d-flex','justify-content-between','align-items-center');
      listitem.appendChild(spanitem);
      listitem.appendChild(deleteitem);
      document.querySelector('.res').append(listitem);
      document.querySelector('#skill').value = '';
    }
    if ( counter >= 5 ) {
      alert('You cannot submit more than 5 items');
    }
    else {
      document.querySelector('.no-skills-status').classList.remove('d-block');
      document.querySelector('.no-skills-status').classList.add('d-none');
      addItem();
    }
    counter = document.querySelectorAll('.list-item').length;
    // delete action
    deleteButtons = document.querySelectorAll('.delete-item');
    deleteButtons.forEach(function(deleteButton) {
      deleteButton.addEventListener('click', 
      function() {
        this.parentElement.remove();
        counter = document.querySelectorAll('.list-item').length;
        if ( counter == 0 ) {
           document.querySelector('.no-skills-status').classList.remove('d-none');
          document.querySelector('.no-skills-status').classList.add('d-block');
        }
      }
      )
    })
  }
)

DEMO

Comments

About This Blog

MaxRooted, sebuah blog yang menyediakan banyak sekali tutorial seputar teknologi mulai dari android, komputer khususnya linux, tips unik, trik terbaru, dan lain lain.

Pages

Subscribe