Sesi kali ini saya akan berbagi sedikit pengetahuan dalam membuat Stopwatch menggunakan bahasa pemrograman javascript.Seperti Biasa saya menggunakan Text Editor Visual Studio Code untuk menjalankan codingan saya.Bagi Teman-teman yang belum mempunyai Text Editor tersebut,silahkan download di Situs web resminya ya.Akan tetapi Teman-teman bisa juga menggunakan Text editor yang lain,seperti subleme text,notepad,notepad++ dan yang lain-lain.Untuk Penampilan Visual studio code seperti Gambar dibawah ini.
Untuk Code HTML nya seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stop Watch</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<!-- start of stop watch -->
<div class="container-fluid">
<div class="row">
<div class="col sm-3 text-center" id="down">
<button type="button" class="btn btn-primary border" onclick="start()">Start</button>
<button type="button" class="btn btn-secondary border" onclick="pause()">Pause</button>
<button type="button" class="btn btn-warning border" onclick="stop()">Reset</button>
<button type="button" class="btn btn-info border" onclick="restart()">Restart</button>
<button type="button" class="btn btn-danger border" onclick="laps()">Lap</button>
<button type="button" class="btn btn-success border" id="neechy" onclick="resetlaps()">Lap Reset</button>
<p class="display-3 stopwatch">00:00:00</p>
<ul class="laps"></ul>
<p id="wasi">Developer: Dharma Gunawan Tambunan,S.T</p>
</div>
</div>
</div>
<!-- end of calculator -->
</body>
<script src="app.js">
</script>
</html>
Untuk Code CSS nya seperti berikut:
container-fluid ,body{
color: #f6f6f6;
width: auto !important;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgb(101, 245, 132) 0%, rgb(86, 244, 117) 35%, rgb(55, 236, 107) 100%);
}
.stopwatch{
font-size: 16em;
font-family: monospace;
}
ul{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
padding: 10px 0;
}
#down{
margin-top: 10rem !important;
}
@media screen and (min-width: 360px) {
#neechy{
margin-top: 5px;
}
}
#wasi{
font-size: 30px;
}
/* ----------end of code----------------------- */
Untuk Code JAVASCRIPT nya seperti berikut:
//start of code
var ms = 0; s = 0; m = 0; //milli,seconds,minutes are = 0
var timer;//take name as timer..//
var stopwatch = document.querySelector('.stopwatch');
var lapsContainer = document.querySelector('.laps');//we take class in html and put here//
function start(){
if(!timer){
timer = setInterval(run,10);
}
}
function run(){
stopwatch.textContent = getTimer()
ms++;
if(ms == 100){
ms = 0;
s++;
}
if(s == 60){
s = 0;
m++;
}
}//for start the function
function pause(){
stopTimer();
}//pause
function stop(){
stopTimer();
ms = 0;
s = 0;
m = 0;
stopwatch.textContent = getTimer()
}//stop and reset to factory mode
function stopTimer(){
clearInterval(timer);
timer = false;
}//pause the function
function getTimer(){
return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
}//for no less then 10 we take 0 before that like 02:09:60...//
function restart(){
stop();
start();
}//restart
function laps(){
if(timer){
var li = document.createElement('li');
li.innerText = getTimer();
lapsContainer.appendChild(li);
}
}//laps
function resetlaps(){
lapsContainer.innerHTML = '';
}//reset laps
Setelah Itu anda simpan di Folder yang sudah anda sediakan sebelumnya,dan setelah anda simpan kemudian anda Run atau jalankan.Maka hasilnya seperti Gambar berikut ini
SELAMAT MENCOBA!!!😉
Comments
Post a Comment