Membuat Aplikasi Stopwatch dengan HTML dan CSS di Smartphone Android

Screenshot_2016-05-31-18-34-40

Saat ini untuk membuat program dapat dilakukan dimanapun dengan menggunakan smartphone dan tablet Android. Dengan menggunakan editor DroidEdit, saya share script untuk membuat aplikasi stopwatch. Bahasa pemrograman yang digunakan adalah HTML, CSS, dan Javascript. Aplikasi ini berjalan di browser. Berikut ini script codenya

<!DOCTYPE html>
<html>
<head>
<style>
	body {
		background-color:gray;
	}
	h1 {
		font-size: 5em;
	}

	button {
		font-size: 25px;
		width: 130px;
		height: 50px;
		border-radius: 3px;
	}

    #startPause {
    	background-color: blue;
    	border-color: blue;
    }

    #reset {
    	background-color: yellow;
    	border-color: yellow;
    }

	.container {
		margin: auto;
		margin-top: 200px;
		width: 400px;
		height: 400px;
	}
	#controls {
		margin-left: 7px;
		width: 310px;
		height:70px;
	}
</style>
</head>
<body>
<script>
	var time = 0;
var running = 0;
function startPause(){
	if(running == 0){
		running = 1;
		increment();
	document.getElementById("start").innerHTML = "Pause";
	document.getElementById("startPause").style.backgroundColor = "red";	
	document.getElementById("startPause").style.borderColor = "red";
	}
	else{
		running = 0;
	document.getElementById("start").innerHTML = "Resume";	
	document.getElementById("startPause").style.backgroundColor = "green";	
	document.getElementById("startPause").style.borderColor = "green";
	}
}
function reset(){
	running = 0;
	time = 0;
	document.getElementById("start").innerHTML = "Start";
	document.getElementById("output").innerHTML = "0:00:00:00";
	document.getElementById("startPause").style.backgroundColor = "green";	
	document.getElementById("startPause").style.borderColor = "green";
}
function increment(){
	if(running == 1){
		setTimeout(function(){
			time++;
			var mins = Math.floor(time/10/60);
			var secs = Math.floor(time/10 % 60);
			var hours = Math.floor(time/10/60/60); 
			var tenths = time % 10;
			if(mins < 10){
				mins = "0" + mins;
			} 
			if(secs < 10){
				secs = "0" + secs;
			}
			document.getElementById("output").innerHTML = hours + ":" + mins + ":" + secs + ":" + tenths + "0";
			increment();
		},100)
	}
}
</script>
<div class="container">
<h1><p id="output"><b>0:00:00:00</b></p></h1>
<div id="controls" align="center">
	<button id= "startPause" onclick="startPause()"><b id="start">Mulai</b></button>
	<button onclick="reset()" id="reset"><b id="reset"> Ulang</b></button>
</div>
</div>
</body>
</html>

Screenshot_2016-05-31-18-33-38

Aplikasi ini juga dapat dijalankan di komputer desktop.

Berikut ini tampilan programnya

Screenshot_2016-05-31-18-34-20

Screenshot_2016-05-31-18-34-32

Selamat mencoba dan semoga bermanfaat🙂

Untuk pertanyaan, saran dan kritik silahkan ditulis di kolom komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s