Tugas Praktikum Pemrograman Web ke-5

Studi Kasus

Source Code

css file

body, header, section, footer{
width : 500px;
}

header, footer{
background-color : blue;
border-radius : 10px;
}

header{
padding-top : 10px;
height : 75px;
}

.title{
width : 450px;
font-style : italic;
background-color : rgba(255, 255, 255, 0.4);
border-bottom-right-radius : 30px;
border-top-left-radius : 30px;
}

section{
text-align : left;
}
footer{
color : white;
font-size : small;
height : 20px;
padding-top : 5px;
padding-bottom : 5px;
}

Javascript file

function hitung(){
var komponen = document.calc;
var bil1 = parseInt(komponen.bil1.value);
var bil2 = parseInt(komponen.bil2.value);
var op = komponen.op.value;
var hasil;

if(op == “add”){
hasil = bil1 + bil2;
}
else if(op == “sub”){
hasil = bil1 – bil2;
}
else if(op == “mpy”){
hasil = bil1 * bil2;
}
else{
hasil = bil1 / bil2;
}

komponen.hasil.value = hasil;
}

Html File

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Simple Calculator</title>
<script language=”JavaScript” type=”text/javascript” src=”javstyle.js”></script>
</head>
<body bgcolor=”black”>
<h2><font color=”white”>Studi kasus Praktikum</font></h2>
<form name=”calc” action=”#”>
<input type=”text” size=”5″ name=”bil1″>
<select name=”op”>
<option value=”add”>+</option>
<option value=”sub”>-</option>
<option value=”mpy”>*</option>
<option value=”div”>:</option>
</select>
<input type=”text” size=”5″ name=”bil2″>
<input type=”button” value=”=” onclick=”hitung()”/>
<input type=”text” size=”10″ name=”hasil” readonly>
</form>
<font face=”monotype corsiva” size=3 color=”white”> Developed by @zard</font>
</body>
</html>