Cara Membuat TodoList Menu Makanan

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini saya akan membahas tentang Cara Membuat TodoList Menu Makanan. Pada tutorial kali ini saya akan membahas tentang cara membuat todolist menggunakan javascript dan CSS. Tutorial sekedar berbagi tips dan triks saja. Todolist ini biasa digunakan membuat catatan harian tentang hari ini, bisa di bilang agenda kerja hari ini , daftar aktifitas atau kegiatan yang harus diselesaikan pada hari tersebut. Sederhana memang, namun dengan menuliskan daftar kegiatan yang harus dilakukan ada banyakmanfaat yang kita dapatkan.

Pada pembahasan kali ini kita akan membahas Bagaimana caranya membuat list menu makanan kesukaan menggunakan Javascript dan CSS, penasarankan teman – teman, ikuti langkah – langkah saya berikut ini biar gak penasaran.

Pertama kita buat dulu file HTML-nya,

Todolist.html

Silahkan teman – teman buat script di bawah ini, yang terdiri dari dua elemen pembungkus yaitu class header dan class list.

<!DOCTYPE html> 
<html> 
	<head> 
		<title>Cara Membuat TodoList </title>
		<link rel="stylesheet" href="Todo_list.css">
	</head>
<body> 
	<div class="container">
		<div id="myDIV" class="header">
		  <h2 style="margin:5px">Makanan Kesukaan Saya</h2>
		  <input type="text" id="myInput" placeholder="Menu...">
		  <span onclick="newElement()" class="addBtn">Tambah</span>
		</div>
	
		<div class="list">
			<ul id="myUL">
			  <li>Martabak</li>
			  <li class="checked">Pempek Kapal Selam</li>
			  <li>Ayam Panggang</li>
			  <li>Piscok</li>
			  <li>Kacang</li>
			  <li>Coklat</li>
			</ul>
		</div>
		<script src="script.js"></script>
	</div>		
</body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>Cara Membuat TodoList </title>

</head>

<body>

<h2 style="margin:5px">Makanan Kesukaan Saya</h2>

<span onclick="newElement()" class="addBtn">Tambah</span>

</div>

<li>Martabak</li>

<li class="checked">Pempek Kapal Selam</li>

<li>Ayam Panggang</li>

<li>Piscok</li>

<li>Kacang</li>

<li>Coklat</li>

</ul>

</div>

</div>

</body>

</html>

Oke kalau sudah kita masuk kedalam pembuatan CSS-nya, CSS ini yang akan membuat bentuk Todolist menu makanan kita. Seperti yang kita tahu bahwa fungsi CSS ini adalah untuk mengatur tata letak tampilan website, mengatur jenis font, color, background serta masih banyak lagi. Oke langsung saja silahkan teman – teman baut CSS untuk file HTML di atas , silahkan lihat file scriptÂ CSS di bawah ini;

body { 
	margin: 0; 
	min-width: 250px; 
	} 

.container {
	width:700px;
	margin:auto;
}

* { 
	box-sizing: border-box; 
	} 

ul { 
	margin: 0; padding: 0; 
}  

ul li { 
		cursor: pointer;
		position: relative; 
		padding: 12px 8px 12px 40px;
		list-style-type: none; 
		background: #eee; 
		font-size: 18px; 
		transition: 0.2s;
		-webkit-user-select: none;
		-moz-user-select: none; 
		-ms-user-select: none; 
		user-select: none; 
	} 
			
ul li:nth-child(odd) { 
			background: #f9f9f9; 
		} 

ul li:hover { background: #ddd; } 

ul li.checked { 
			background: #888; 
			color: #fff; 
			text-decoration: line-through; 
		} 

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; 
		} 

.close { 
		position: absolute; 
		right: 0; 
		top: 0; 
		padding: 12px 16px 12px 16px; 
	} 
.close:hover { 
	background-color: #f44336; 
	color: white; 
}  

.list {
	width: 660px;
	margin: auto;
	padding: 10px;

}

.header { 
	background-color: #20eaaa; 
	padding: 30px 40px; 
	color: white; 
	text-align: center; 
} 

.header:after {
	 content: ""; 
	 display: table; 
	 clear: both; 
	}  

input { 
	border: none; 
	width: 75%; 
	padding: 10px; 
	float: left; 
	font-size: 16px; 
}  

.addBtn { 
	padding: 10px; 
	width: 25%; 
	background: #d9d9d9; 
	color: #555; 
	float: left; 
	text-align: center; 
	font-size: 16px; 
	cursor: pointer; 
	transition: 0.3s; 
} 

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

100

101

102

103

104

105

106

107

108

109

110

body {

margin: 0;

min-width: 250px;

}

.container {

width:700px;

margin:auto;

}

* {

box-sizing: border-box;

}

ul {

margin: 0; padding: 0;

}

ul li {

cursor: pointer;

position: relative;

padding: 12px 8px 12px 40px;

list-style-type: none;

background: #eee;

font-size: 18px;

transition: 0.2s;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

ul li:nth-child(odd) {

background: #f9f9f9;

}

ul li:hover { background: #ddd; }

ul li.checked {

background: #888;

color: #fff;

text-decoration: line-through;

}

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;

}

.close {

position: absolute;

right: 0;

top: 0;

padding: 12px 16px 12px 16px;

}

.close:hover {

background-color: #f44336;

color: white;

}

.list {

width: 660px;

margin: auto;

padding: 10px;

}

.header {

background-color: #20eaaa;

padding: 30px 40px;

color: white;

text-align: center;

}

.header:after {

content: "";

display: table;

clear: both;

}

input {

border: none;

width: 75%;

padding: 10px;

float: left;

font-size: 16px;

}

.addBtn {

padding: 10px;

width: 25%;

background: #d9d9d9;

color: #555;

float: left;

text-align: center;

font-size: 16px;

cursor: pointer;

transition: 0.3s;

}

.addBtn:hover {

background-color: #bbb;

}

Oke kalau sudah kita akan masuk pada step pembuat fungsi todolist-nya menggunakan javascript, dimana fungsi ini bergunaka untuk membuat item daftar baru saat mengklik tombol “Tambah”, menambahkan simbol “ceklis” saat mengklik item daftar, membuat tombol “close” ke setiap item daftar untuk menyembunyikan item daftar.
Penasarankan pastinya langsung saja teman – teman ketikan fungsi atau Script javascript di bawah ini;

//Buat tombol "close"  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 close untuk menyembunyikan item daftar 
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";
  }
}

// menambahkan simbol "ceklis" 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("Silahkan Masukan Menu Terlebih Dahulu!");
  } 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";
    }
  }
}

//Buat tombol "close" 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 close untuk menyembunyikan item daftar

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";

}

// menambahkan simbol "ceklis" 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("Silahkan Masukan Menu Terlebih Dahulu!");

} 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";

}

OKe kalau sudah silahkan teman – teman save dan jalankan pada browsernya, maka hasilnya akan seperti di bawah ini;

Oke cukup mudah bukan teman – teman, Dari tampilan di atas ketika memasukan menu baru lalu meng-klik tambah maka otomatis menu tersebut akan bertambah dan begitu juga sebaliknya ketiak teman – teman mengklik tombol close maka menu tersebut akan di sembunyikan. Oke itulah tadi pembahasan saya tentang Cara Membuat TodoList Menu Makanan, semoga bermanfaat.

Facebook DUMET School

Categories