antariksme

Tugas Membuat Kalkulator Sederhana

Screenshoot nya :

Berikut adalah Scriptnya :

<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
<script type="text/javascript">


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>


<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">


<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>

<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>

<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>

Syntax Untuk Membuat Form

Screenshoot :

Syntax :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <title>Form Registrasi</title>
 
</head>
<body bgcolor="darksalmon">
<br />
<br />
<br />

<!--aditya 1502066-->

<form method="" action="" id="form" name="form">
 
 <table bgcolor="bluebaby"align="center">
<tr>
   <td colspan=4 width="500" bgcolor="aqua"><center>
 Formulir Registrasi</td>
  </tr>
<tr>
   <td> NIM</td><td>:</td><td colspan=2> <input type="text" name="nim" value="" /></td>
  </tr>
<tr>
   <td> Nama</td><td>:</td><td colspan=2> <input type="text" name="nama" value="" /></td>
  </tr>
<tr>
   <td> Jenis Kelamin</td><td>:</td><td colspan=2> <input type="radio" name="nim" value="" />Laki-laki
             <input type="radio" name="nim" value="" />Perempuan</td>
  </tr>
<tr>
   <td> Asal</td><td>:</td><td colspan=2> <select name="asal">
   <option value="Pilih Kota Asal" selected="opsi">Bengkulu</option>
   <option value="" selected="jambi">Jambi</option>
   <option value="" selected="riau">Riau</option>
   <option value="" selected="pal">Palembang</option>
   <option value="" selected="beng">Pilih Kota Asal</option>
   </select></td>
  </tr>
<tr>
   <td> No. Telepon</td><td>:</td><td colspan=2> <input type="text" name="no" value="" /></td>
  </tr>
<tr>
   <td> Alamat E-mail</td><td>:</td><td colspan=2> <input type="text" name="mail" value="" /></td>
  </tr>
<tr>
   <td> Password</td><td>:</td><td colspan=2> <input type="text" name="pw" value="" /></td>
  </tr>
<tr>
   <td> Hobby</td><td>:</td><td> <input type="checkbox" name="hobi" value="" /> Membaca <br />
           <input type="checkbox" name="hby" value="" /> Badminton <br />
           <input type="checkbox" name="hby" value="" /> Sepak Bola </td>
         <td> <input type="checkbox" name="hby" value="" /> Bersepeda <br />
           <input type="checkbox" name="hby" value="" /> Berenang <br />
           <input type="checkbox" name="hby" value="" /> Memancing </td>
   </td>
  </tr>
<tr>
   <td> Deskripsi Diri</td><td>:</td><td colspan=2> <textarea name="deksripsi" rows="5" cols="40">
    
    <br /></td>
  </tr>
<tr>
  <td  align="center" colspan=4>
   <input type="button" name="ok" value="OK"/> <input type="reset" name="can" value="Cancel" />
  </td>
 </tr>
</form>
</table>
</body>
</html>

Tuesday, May 23, 2017

Membuat kalkulator sederhana di php

Tuesday, April 25, 2017

Syntax Untuk Membuat Form

Popular Posts

Advertisement

About Me

Blog Archive

Find us on Facebook