Contents
Halo semua, berjumpa kembali dengan tutorial yang baru dan pastinya akan menambah pengetahuan kita mengenai pemrograman. Pada tutorial kali ini, kita akan membuat sebuah program berupa Stopwatch yang dapat digunakan untuk menghitung waktu. Ya, stopwatch sendiri biasa digunakan untuk mengukur berapa lama sebuah aksi dilakukan. Dan sudah sangat wajib stopwatch ini ada di perangkat kita, stopwatch sendiri sudah menjadi aplikasi bawaan pada setiap perangkat. Namun kali ini kita akan mencoba membuatnya sendiri menggunakan komponen HTML, CSS dan logic-nya menggunakan Javascript.
Langkah Pertama Stopwatch – Javascript
Buat sebuah folder, untuk menyimpan file HTML, CSS dan Javascript kita
Setelah folder berhasil dibuat, langkah selanjutnya adalah dengan membuka folder tersebut menggunakan text editor. Di sini saya menggunakan Visual Studio Code untuk membuat program stopwatch kita. ”Open folder” dan arahkan ke folder yang telah kita buat.
Buatlah tiga file yang di antaranya berupa
1. index.html untuk file html
2. style.css untuk memberikan sentuhan pada website agar memiliki tampilan yang baik
3. script.js untuk menyimpan logika stopwatch
Langkah Kedua, index.html
Untuk file index.html ini tidak terlalu banyak kodingan. Karena hanya menampilkan angka saja yang kemudian akan dimanipulasi oleh Javascript.
<!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.0">
<title>Stopwatch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h1>Stopwatch</h1>
<h2>JavaScript Stopwatch</h2>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
Penjelasan Kode
Perhatikan kode di bawah ini. Kode di bawah ini bertugas untuk memanggil file css. Karena file style.css berada pada folder sama dengan file index.html maka penulisannya langsung seperti di bawah ini.
<link rel="stylesheet" href="style.css">
Sama halnya dengan file css, hal ini berlaku pula pada pemanggilan file Javascript, tetapi berbeda pada pemanggilannya saja. Contoh seperti pada kode di bawah ini.
<script src="script.js"></script>
<div class="wrapper">
<h1>Stopwatch</h1>
<h2>JavaScript Stopwatch</h2>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
Coba perhatikan pada kode script di atas, terdapat sebuah atribut id. Atribut “id” inilah yang akan dimanfaatkan agar bisa dimanipulasi oleh Javascript.
Langkah Ketiga, style.css
Untuk file css boleh di isi seperti ini atau ingin menggunakan style yang lain. Perlu diperhatikan, penulisan kode di bawah ini menggunakan SCSS. SCSS sendiri merupakan sintaks terbaru dari SASS (Syntactically Awesome Style Sheets). Penulisan menggunakan CSS dan SCSS memiliki beberapa perbedaan yakni jika kita menggunakan CSS biasa, maka kita tidak bisa membuat variabel seperti contoh di bawah ini. Itu merupakan salah satu keunggulan dari penggunaan SCSS.
/* Variabes */
$orange: #ffa600;
$grey: #f3f3f3;
$white: #fff;
$base-color: $orange;
/* Mixin's */
@mixin transition {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
@mixin corners($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
-khtml-border-radius: $radius;
}
body {
background: $base-color;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
height: 100%;
}
.wrapper {
width: 800px;
margin: 30px auto;
color: $white;
text-align: center;
}
h1,
h2,
h3 {
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 2.6em;
text-transform: uppercase;
}
#seconds,
#tens {
font-size: 2em;
}
button {
@include corners(5px);
background: $base-color;
color: $white;
border: solid 1px $white;
text-decoration: none;
cursor: pointer;
font-size: 1.2em;
padding: 18px 10px;
width: 180px;
margin: 10px;
outline: none;
&:hover {
@include transition;
background: $white;
border: solid 1px $white;
color: $base-color;
}
}
Langkah Keempat, script.js
window.onload = function () {
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens")
var appendSeconds = document.getElementById("seconds")
var buttonStart = document.getElementById('button-start');
var buttonStop = document.getElementById('button-stop');
var buttonReset = document.getElementById('button-reset');
var Interval;
buttonStart.onclick = function() {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
buttonStop.onclick = function() {
clearInterval(Interval);
}
buttonReset.onclick = function() {
clearInterval(Interval);
tens = "00";
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
}
function startTimer () {
tens++;
if(tens <= 9){
appendTens.innerHTML = "0" + tens;
}
if (tens > 9){
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9){
appendSeconds.innerHTML = seconds;
}
}
}
Penjelasan Kode
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens")
var appendSeconds = document.getElementById("seconds")
var buttonStart = document.getElementById('button-start');
var buttonStop = document.getElementById('button-stop');
var buttonReset = document.getElementById('button-reset');
var Interval;
Di sini kita mendefinisikan variabel agar dapat digunakan dengan mudah untuk koding nantinya. Terdapat document.getElementById ini berfungsi mencari elemen yang memiliki id tertentu. Seperti contoh pada variabel appendTens document.getElementById(“tens”). Ini berfungsi untuk mengambil elemen yang memiliki id dengan nama “tens”.
Kemudian terdapat sebuah function dan sebuah aksi yang terjadi jika nantinya tombol ditekan.
buttonStart.onclick = function() {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
buttonStop.onclick = function() {
clearInterval(Interval);
}
buttonReset.onclick = function() {
clearInterval(Interval);
tens = "00";
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
}
Hasil
Inilah hasil jika program kita berhasil dijalankan di browser kita. Stopwatch sudah bisa digunakan, meskipun program ini sangat sederhana setidaknya kita tahu konsep dari stopwatch ini. Demikianlah tutorial kali ini, kita akan bertemu di tutorial selanjutnya.
