Di tutorial kali ini kita akan membuat sebuah counter angka yang dapat di kurangkan atau ditambahkan dengan cara menekan tombol plus atau minus.
Tutorialnya ini sebenarnya berhubungan dengan salah satu fungsi yang ada di marketplace online kebanyakan.
Selayaknya toko online pasti ketika pelanggan membeli sesuatu yang pertama ditekan adalah tombol yang dapat menambahkan jumlah barang yang dia beli atau sebaliknya.
Bagaimana cara membuatnya? Berikut langkah-langkahnya.
Buat kerangka html
buat sebuah file html dulu dengan nama index.html dan tambahkan kode berikut didalamnya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Counter HTML CSS JS</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="counter">
<div id="number">
0
</div>
<div id="minus">
-
</div>
<div id="plus">
+
</div>
</div>
</section>
<!-- Project -->
<script src="main.js"></script>
</body>
</html>Menambahkan style dengan css
Buat sebuah file dengan nama style.css dan ketikan kode dibawah
*{
font-family: "poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.35s linear;
}
section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1cbfc3;
}
.counter {
background-color: #0C0D0F;
height: 120px;
width: 240px;
border-radius: 20px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.counter:hover {
height: 150px;
}
.counter:hover #minus,
.counter:hover #plus {
height: 50px;
}
#minus,#plus{
position: absolute;
top: 30%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid white;
padding: 10px;
color: white;
background-color: #1cbfc3;
}
#minus{
left: -10%;
}
#plus{
right: -10%;
}
#number {
color: white;
font-size: 3em;
}maka tampilan desain untuk counter angka kita sudah jadi seperti dibawah ini saat dibuka lewat browser
Lalu bagaimana supaya tombol plus dan minusnya berfungsi? Kita dapat membuat fungsinya dengan menggunakan javascript.
Menambahkan fungsi counter dengan javascript
Buat file main.js dan tuliskan kode berikut didalamnya
var Number = document.getElementById("number");
var Up = document.getElementById("plus");
var Down = document.getElementById("minus");
count = 0;
Up.addEventListener("click", function(e){
count++;
Number.textContent=count;
})
Down.addEventListener("click", function(e) {
if (count > 0) {
count--;
Number.textContent = count;
}
})
Dan beginilah hasil akhirnya.
Sekian tutorial yang saya bagikan kali ini semoga bermanfaat ya
0 Komentar