Cara Membuat To Do List di Web

Di bawah ini kita akan mempelajari cara membuat “to do list” atau lebih akrab dengan “daftar tugas” dengan CSS dan JavaScript. To do list biasa digunakan untuk membuat kegiatan kita lebih efisien dengan cara membuat daftar yang akan kita lakukan pada “satu hari” kemudian mencoretnya jika sudah dilakukan. Nah kali ini hal tersebut bisa kita lakukan pada sebuah website dengan menggunakan css dan javascript seperti di bawah ini:

Daftar Yang Harus Dilakukan

Gunakan CSS dan JavaScript untuk membuat “to do list” untuk mengatur dan memprioritaskan hal-hal yang ingin dilakukan.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  min-width: 250px;
}

/*Sertakan padding dan border dalam total lebar dan tinggi elemen */
* {
  box-sizing: border-box;
}

/* Hapus margin dan padding dari list */
ul {
  margin: 0;
  padding: 0;
}

/* Style untuk item list  */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  
  /* buat daftar item yang tidak dapat dipilih */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Setel semua daftar item ganjil ke warna berbeda (garis-zebra) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Warna background yang lebih gelap saat mengarahkan kursor */
ul li:hover {
  background: #ddd;
}

/* Saat diklik, tambahkan warna background dan coret teks */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Tambahkan tanda "centang" saat diklik */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style utnuk button close */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

/* Style untuk header */
.header {
  background-color: 	#B0C4DE;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Hapus float setelah header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style untuk  input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style untuk button "Tambah"  */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}
</style>
</head>
<body>

<div id="myDIV" class="header">
  <h2 style="margin:5px">Daftar Harian</h2>
  <input type="text" id="myInput" placeholder="Kegiatan...">
  <span onclick="newElement()" class="addBtn">Tambah</span>
</div>

<ul id="myUL">
  <li>Berolahraga Pagi Hari</li>
  <li class="checked">Membayar Tagihan</li>
  <li>Sarapan</li>
  <li>Berbelanja Sayuran</li>
  <li>Bekerja</li>
  <li>Membaca Buku</li>
</ul>

<script>
// Buat tombol "tutup" dan tambahkan ke setiap item daftar
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Klik pada tombol tutup untuk menyembunyikan item daftar saat ini
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Tambahkan simbol "dicentang" saat mengklik item daftar
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Buat item daftar baru saat mengklik tombol "Tambah"
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}
</script>

</body>
</html>

Buat Daftar Yang Harus Dilakukan

Langkah 1) Tambahkan HTML:
Contoh

<div id="myDIV" class="header">
  <h2 style="margin:5px">Daftar Harian</h2>
  <input type="text" id="myInput" placeholder="Kegiatan...">
  <span onclick="newElement()" class="addBtn">Tambah</span>
</div>

<ul id="myUL">
  <li>Berolahraga Pagi Hari</li>
  <li class="checked">Membayar Tagihan</li>
  <li>Sarapan</li>
  <li>Berbelanja Sayuran</li>
  <li>Bekerja</li>
  <li>Membaca Buku</li>
</ul>

Langkah 2) Tambahkan CSS:
Style pada header dan daftar:
Contoh

/*Sertakan padding dan border dalam total lebar dan tinggi elemen */
* {
  box-sizing: border-box;
}

/* Hapus margin dan padding dari list */
ul {
  margin: 0;
  padding: 0;
}

/* Style utnuk item list  */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  
  /* buat daftar item yang tidak dapat dipilih */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Setel semua daftar item ganjil ke warna berbeda (garis-zebra) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Warna background yang lebih gelap saat mengarahkan kursor */
ul li:hover {
  background: #ddd;
}

/* Saat diklik, tambahkan warna background dan coret teks */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Tambahkan tanda "centang" saat diklik */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style utnuk button close */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

/* Style untuk header */
.header {
  background-color: #f44336;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Hapus float setelah header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style untuk  input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style untuk button "Tambah"  */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}

Langkah 3) Tambahkan JavaScript:
Contoh

// Buat tombol "tutup" dan tambahkan ke setiap item daftar
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Klik pada tombol tutup untuk menyembunyikan item daftar saat ini
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Tambahkan simbol "dicentang" saat mengklik item daftar
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Buat item daftar baru saat mengklik tombol "Tambah"
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

CSS How To

Cara Membuat To Do List di Web

Daftar Yang Harus Dilakukan

Buat Daftar Yang Harus Dilakukan

Cara Membuat Layout Kalender di Web

Cara Membuat Loader di Web

You may also like