Tugas Membuat Kalkulator Sederhana
Screenshoot nya :
Berikut adalah Scriptnya :
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
<script type="text/javascript">
<!--Aditya Saputra-->
function calc() {
x = eval(form.bil1.value);
y = eval(form.bil2.value);
}
function alert_calc(){
if(document.getElementById('hasil').value == 'NaN'){
alert("Angkanya di isikan om");
}
}
function correct(num, c) {
if(isNaN(c) || c == ' '){
document.getElementsByTagName('input')[num].style.borderColor = "#f00";
} else {
document.getElementsByTagName('input')[num].style.borderColor = "#38d";
}
}
function minimize_calc(){
document.getElementById('bil2').style.display = "none";
document.getElementById('hasil').style.width = "230px";
}
function sum_calc(){
calc();
document.getElementById('hasil').value = x + y;
alert_calc();
}
function min_calc(){
calc();
document.getElementById('hasil').value = x - y;
alert_calc();
}
function split_calc(){
calc();
document.getElementById('hasil').value = x / y;
alert_calc();
}
function multiple_calc(){
calc();
document.getElementById('hasil').value = x * y;
alert_calc();
}
function reset_calc(){
document.getElementById('bil2').style.display = "block";
document.getElementById('hasil').style.width = "115px";
document.getElementsByTagName('input')[0].style.borderColor = "#38d";
document.getElementsByTagName('input')[1].style.borderColor = "#38d";
}
i = 1;
function bil1_calc() {
i = 1;
}
function bil2_calc() {
i = 2;
}
function num_calc(n) {
x = document.getElementById('bil'+i).value;
z = x + n;
document.getElementById('bil'+i).value = z;
document.getElementsByTagName('input')[i-1].style.borderColor = "#38d";
}</script>
<!--1502066-->
<style type="text/css">
.title {
font-family: Comic ;
font-size: 15pt;
color: red;
float: left;
width: 100%;
margin: 0 0 2% 0;
}
.calc {
padding: 1%;
margin: 2% 0 10% 4%;
float: left;
border: 3px solid black;
width: 30%;
background-color: #BBB;;
}
.bil {
float: left;
width: 115px;
margin-right: 2%;
}
.bil {
border: 2px solid #3388dd;
padding: 1%;
border-radius: 5px;
}
.opr {
margin: 1%;
float: center;
height: 50px;
width: 61px;
cursor: pointer;
border-radius: 5px;
}
.btnex {
background-color: #38d;
color: black;
border: 2px solid #38d;
}
.reset {
background-color: #d32;
color: #fff;
border: 1px solid #d32;
float: right;
}
.btnex:hover {
background-color: #25b;
border-color: #35b;
}
.reset:hover {
background-color: #b21;
border-color: #b21;
}
.num {
margin: 1%;
width: 78px;
height: 50px;
cursor: pointer;
border-radius: 8px;
background-color: silver;
border: 2px solid #30d;
}
.num:active {
background-color: #22d;
color: red;
}
.font {
color: #30d;
font-size: 14pt;
font-family: Times New Roman;
font-weight: 900;
}</style>
</head>
<body style="margin: 0; padding: 0;" >
<div class="calc" >
<div class="main1">
<div class="title" align="center">Calculator</div>
<form name="form">
<input type="text" name="bil1" class="bil" placeholder ="Angka 1" id="bil1" onfocus="bil1_calc()" onblur="correct(0, this.value)">
<input type="text" name="bil2" class="bil" placeholder ="Angka 2" id="bil2" onfocus="bil2_calc()" onblur="correct(1, this.value)">
<input type="text" id="hasil" class="bil" placeholder ="Hasil">
<!--untuk angka 1-3-->
<div class="groupnum">
<button class="num font" type="button" value="1" onclick="num_calc(this.value)">1</button>
<button class="num font" type="button" value="2" onclick="num_calc(this.value)">2</button>
<button class="num font" type="button" value="3" onclick="num_calc(this.value)">3</button>
<button class="opr btnex" type="button" onclick="sum_calc()"> + </button>
<!--untuk angka 4-6-->
<div class="groupnum">
<button class="num font" type="button" value="4" onclick="num_calc(this.value)">4</button>
<button class="num font" type="button" value="5" onclick="num_calc(this.value)">5</button>
<button class="num font" type="button" value="6" onclick="num_calc(this.value)">6</button>
<button class="opr btnex" type="button" onclick="min_calc()"> - </button>
<!--untuk angka 7-9-->
<div class="groupnum">
<button class="num font" type="button" value="7" onclick="num_calc(this.value)">7</button>
<button class="num font" type="button" value="8" onclick="num_calc(this.value)">8</button>
<button class="num font" type="button" value="9" onclick="num_calc(this.value)">9</button>
<button class="opr btnex" type="button" onclick="multiple_calc()"> X </button>
<div class="groupnum">
<button class="num font" type="button" value="0" onclick="num_calc(this.value)" style="width: 257px">0</button>
<input class="opr reset" type="reset" " onclick="reset_calc()" value="C">
<button class="opr btnex" type="button" onclick="split_calc()"> / </button>
</div>
</form>
</div>
<div class="main2">
</div>
</div>
</body>
</html>
<html>
<head>
<title>Kalkulator</title>
<script type="text/javascript">
<!--Aditya Saputra-->
function calc() {
x = eval(form.bil1.value);
y = eval(form.bil2.value);
}
function alert_calc(){
if(document.getElementById('hasil').value == 'NaN'){
alert("Angkanya di isikan om");
}
}
function correct(num, c) {
if(isNaN(c) || c == ' '){
document.getElementsByTagName('input')[num].style.borderColor = "#f00";
} else {
document.getElementsByTagName('input')[num].style.borderColor = "#38d";
}
}
function minimize_calc(){
document.getElementById('bil2').style.display = "none";
document.getElementById('hasil').style.width = "230px";
}
function sum_calc(){
calc();
document.getElementById('hasil').value = x + y;
alert_calc();
}
function min_calc(){
calc();
document.getElementById('hasil').value = x - y;
alert_calc();
}
function split_calc(){
calc();
document.getElementById('hasil').value = x / y;
alert_calc();
}
function multiple_calc(){
calc();
document.getElementById('hasil').value = x * y;
alert_calc();
}
function reset_calc(){
document.getElementById('bil2').style.display = "block";
document.getElementById('hasil').style.width = "115px";
document.getElementsByTagName('input')[0].style.borderColor = "#38d";
document.getElementsByTagName('input')[1].style.borderColor = "#38d";
}
i = 1;
function bil1_calc() {
i = 1;
}
function bil2_calc() {
i = 2;
}
function num_calc(n) {
x = document.getElementById('bil'+i).value;
z = x + n;
document.getElementById('bil'+i).value = z;
document.getElementsByTagName('input')[i-1].style.borderColor = "#38d";
}</script>
<!--1502066-->
<style type="text/css">
.title {
font-family: Comic ;
font-size: 15pt;
color: red;
float: left;
width: 100%;
margin: 0 0 2% 0;
}
.calc {
padding: 1%;
margin: 2% 0 10% 4%;
float: left;
border: 3px solid black;
width: 30%;
background-color: #BBB;;
}
.bil {
float: left;
width: 115px;
margin-right: 2%;
}
.bil {
border: 2px solid #3388dd;
padding: 1%;
border-radius: 5px;
}
.opr {
margin: 1%;
float: center;
height: 50px;
width: 61px;
cursor: pointer;
border-radius: 5px;
}
.btnex {
background-color: #38d;
color: black;
border: 2px solid #38d;
}
.reset {
background-color: #d32;
color: #fff;
border: 1px solid #d32;
float: right;
}
.btnex:hover {
background-color: #25b;
border-color: #35b;
}
.reset:hover {
background-color: #b21;
border-color: #b21;
}
.num {
margin: 1%;
width: 78px;
height: 50px;
cursor: pointer;
border-radius: 8px;
background-color: silver;
border: 2px solid #30d;
}
.num:active {
background-color: #22d;
color: red;
}
.font {
color: #30d;
font-size: 14pt;
font-family: Times New Roman;
font-weight: 900;
}</style>
</head>
<body style="margin: 0; padding: 0;" >
<div class="calc" >
<div class="main1">
<div class="title" align="center">Calculator</div>
<form name="form">
<input type="text" name="bil1" class="bil" placeholder ="Angka 1" id="bil1" onfocus="bil1_calc()" onblur="correct(0, this.value)">
<input type="text" name="bil2" class="bil" placeholder ="Angka 2" id="bil2" onfocus="bil2_calc()" onblur="correct(1, this.value)">
<input type="text" id="hasil" class="bil" placeholder ="Hasil">
<!--untuk angka 1-3-->
<div class="groupnum">
<button class="num font" type="button" value="1" onclick="num_calc(this.value)">1</button>
<button class="num font" type="button" value="2" onclick="num_calc(this.value)">2</button>
<button class="num font" type="button" value="3" onclick="num_calc(this.value)">3</button>
<button class="opr btnex" type="button" onclick="sum_calc()"> + </button>
<!--untuk angka 4-6-->
<div class="groupnum">
<button class="num font" type="button" value="4" onclick="num_calc(this.value)">4</button>
<button class="num font" type="button" value="5" onclick="num_calc(this.value)">5</button>
<button class="num font" type="button" value="6" onclick="num_calc(this.value)">6</button>
<button class="opr btnex" type="button" onclick="min_calc()"> - </button>
<!--untuk angka 7-9-->
<div class="groupnum">
<button class="num font" type="button" value="7" onclick="num_calc(this.value)">7</button>
<button class="num font" type="button" value="8" onclick="num_calc(this.value)">8</button>
<button class="num font" type="button" value="9" onclick="num_calc(this.value)">9</button>
<button class="opr btnex" type="button" onclick="multiple_calc()"> X </button>
<div class="groupnum">
<button class="num font" type="button" value="0" onclick="num_calc(this.value)" style="width: 257px">0</button>
<input class="opr reset" type="reset" " onclick="reset_calc()" value="C">
<button class="opr btnex" type="button" onclick="split_calc()"> / </button>
</div>
</form>
</div>
<div class="main2">
</div>
</div>
</body>
</html>
