Membuat To Do List Menggunakan Javascript

Kita sebagai seorang individu yang memiliki banyak aktifitas dan kegiatan pastinya kita ingin membuat list apa saja yang harus dikerjakan untuk setiap harinya. Hal ini dilakukan supaya kita dapat melakukan sesutau secara urut dan terperinci. Nah, pada javascript kita dapat melakukan hal itu. Kita dapat membuat sebuah list apa saja yang harus kita lakukan. Pada tutorial kali ini, kita akan membuat sebuah program sederhana, yaitu membuat To-Do List menggunakan bahasa pemrograman javascript.

Langkah Pertama

  • Buat file index.html
  • Buat file style.css
  • Buat file script.js

Langkah Kedua

File index.html

Untuk file index ini nantinya hanya kita gunakan untuk memanggil file css dan javascript yang kita buat nanti. Untuk kode pada index nantinya hanya akan seperti ini.

Kita sebagai seorang individu yang memiliki banyak aktifitas dan kegiatan pastinya kita ingin membuat list apa saja yang harus dikerjakan untuk setiap harinya. Hal ini dilakukan supaya kita dapat melakukan sesutau secara urut dan terperinci. Nah, pada javascript kita dapat melakukan hal itu. Kita dapat membuat sebuah list apa saja yang harus kita lakukan. Pada tutorial kali ini, kita akan membuat sebuah program sederhana, yaitu membuat To-Do List menggunakan bahasa pemrograman javascript.

Langkah Pertama

  • Buat file index.html
  • Buat file style.css
  • Buat file script.js

Langkah Kedua

File index.html

Untuk file index ini nantinya hanya kita gunakan untuk memanggil file css dan javascript yang kita buat nanti. Untuk kode pada index nantinya hanya akan seperti ini.

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
  <meta charset="UTF-8"&gt;
  <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  <title&gt;ToDo List</title&gt;

  <link rel="stylesheet" href="style.css"&gt;
</head&gt;
<body&gt;
  <div class="container"&gt;
    <div class="row"&gt;
      <div class="intro col-12"&gt;
        <h1&gt;To Do List</h1&gt;
        <div&gt;
          <div class="border1"&gt;</div&gt;
        </div&gt;
      </div&gt;
    </div&gt;

    <div class="row"&gt;
      <div class="col-12"&gt;
        <input id="userInput" type="text" placeholder="Buat List Baru...." maxlength="27"&gt;
	  <button id="enter"&gt;Tambah</button&gt;
      </div&gt;
    </div&gt;

    <!-- Empty List --&gt;
    <div class="row"&gt;
      <div class="listItems col-12"&gt;
        <ul class="col-12 offset-0 col-sm-8 offset-sm-2"&gt;
        </ul&gt;
      </div&gt;
    </div&gt;

  </div&gt;

  <script src="script.js"&gt;</script&gt;
</body&gt;
</html&gt;

Style.css

body {
  background: #04a1bf;
  text-align: center;
  font-family: "Open Sans", sans-serif;
}

.intro {
  margin: 30px 0px;
  font-weight: bold;
}

h1 {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 800;
}

p {
  font-weight: 600;
}

#first {
  margin-top: 10px;
  color: #ffcd5d;
}

#second {
  color: #51df70;
}

#third {
  color: #025f70;
  margin-bottom: 30px;
}

#enter {
  border: none;
  padding: 5px 15px;
  border-radius: 5px;
  color: #04a1bf;
  background-color: #025f70;
  transition: all 0.75s ease;
  -webkit-transition: all 0.75s ease;
  -moz-transition: all 0.75s ease;
  -ms-transition: all 0.75s ease;
  -o-transition: all 0.75 ease;
  font-weight: normal;
}

#enter:hover {
  background-color: #02798f;
  color: #ffcd5d;
}

ul {
  text-align: left;
  margin-top: 20px;
}

li {
  list-style: none;
  padding: 10px 20px;
  color: #ffffff;
  text-transform: capitalize;
  font-weight: 600;
  border: 2px solid #025f70;
  border-radius: 5px;
  margin-bottom: 10px;
  background: #4eb9cd;
  transition: all 0.75s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5 ease;
}

li:hover {
  background: #76cfe0;
}

li &gt; button {
  font-weight: normal;
  background: none;
  border: none;
  float: right;
  color: #025f70;
  font-weight: 800;
}

input {
  border-radius: 5px;
  min-width: 65%;
  padding: 5px;
  border: none;
}

.done {
  background: #51df70 !important;
  color: #00891e;
}

.delete {
  display: none;
}

Script.js

var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
var item = document.getElementsByTagName("li");

Variabel Input, berfungsi untuk mengambil sebuah elemen yang didapatkan dari id yang sudah kita berikan pada file html sebelumnya, tepatnya pada tag input. Var ul dan item mengambil elemen html langsung, jadi tidak menggunakan getElementById. Ini dikarenakan tag ul dan li hanya ada satu tag saja, tidak tag ul dan li lain.

function inputLength(){
    return input.value.length;
} 

function listLength(){
    return item.length;
}

Kode diatas berfungsi untuk menghitung panjang dari sebuah inputan yang sudah di masukkan oleh user.

function createListElement() {
    var li = document.createElement("li"); // creates an element "li"
    li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text
    ul.appendChild(li); //adds li to ul
    input.value = ""; //Reset text input field

    //START STRIKETHROUGH
    // because it's in the function, it only adds it for new items
    function crossOut() {
        li.classList.toggle("done");
    }

    li.addEventListener("click",crossOut);
    //END STRIKETHROUGH

    // START ADD DELETE BUTTON
    var dBtn = document.createElement("button");
    dBtn.appendChild(document.createTextNode("X"));
    li.appendChild(dBtn);
    dBtn.addEventListener("click", deleteListItem);
    // END ADD DELETE BUTTON

    //ADD CLASS DELETE (DISPLAY: NONE)
    function deleteListItem(){
        li.classList.add("delete")
    }
    //END ADD CLASS DELETE

Kemudian terdapat sebuah function yang mengatur logika dari pembuatan todo list ini. Ada dua fungsi di dalamnya, yaitu fungsi untuk menambah dan menghapus sebuah list yang sudah kita buat.

function addListAfterClick(){
    if (inputLength() &gt; 0) { //makes sure that an empty input field doesn't create a li
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() &gt; 0 &amp;&amp; event.which ===13) { //this now looks to see if you hit "enter"/"return"
        //the 13 is the enter key's keycode, this could also be display by event.keyCode === 13
        createListElement();
    } 
}

enterButton.addEventListener("click",addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

Function juga sama seperti sebelumnya, yaitu menambahkan list setelah tombol yang sudah ditentukan tersebut di tekan. Disini kita sudah mengset tombol enter untuk menambahkan sebuah list.

Kemudian kita bisa mencoba menambahkan sesuatu. Dan ini hasilnya.

Nah itulah tutorial membuat to do list menggunakan javascript, memang sangat sederhana tetapi setidaknya kita sudah tau bagaimana proses atau logika dari membuat sebuah to do list. Sekian Tutorial kali ini semoga dapat membantu kita semua dalam memahami javascript. Sampai berjumpa pada tutorial selanjutnya.

Leave a Reply