Pada tahap pertama buatlah file html pada file ini kita akan membuat 1 form yang di dalamnya terdapat 3 input, dan 4 tombol.
input angka pertama, dan kedua, lalu terdapat tombol input KABATAKU (kali, bagi, tambah, dan kurang) dibawah input angka pertama dan kedua lalu tombol reset untuk hapus data yang telah di buat. berikut tampilannya.
1.sourcecode HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="soal2.css">
<title>Document</title>
</head>
<body>
<div class="container ">
<h1>kalkulator sederhana dengan JavaScript</h1>
<form class="dua" name="kalkulator">
<!-- input angka pertama -->
<input type="text"
id="angka1"
placeholder="masukkan angka pertama"
style="text-align: center;"
autofocus>
<!-- input angka ke dua -->
<input type="text"
id="angka2"
placeholder="masukkan angka ke dua"
style="text-align: center;">
<!-- Membuat input KABATAKU(kali, bagi, tambah, kurang) -->
<div class="operator">
<input class="tambah aritmatika"
type="button" onclick="tambah()"
value="+""></input>
<input class="kurang aritmatika"
type="button"
onclick="kurang()"
value="-"></input>
<input class="kali aritmatika"
type="button"
onclick="kali()"
value="x"></input>
<input class="bagi aritmatika"
type="button"
onclick="bagi()"
value="/"></input>
</div>
<!-- input hasil penghitungan -->
<input type="text"
id="hasil"
placeholder="Hasil"
style="text-align: center;">
<br>
<!-- button reset -->
<button class="refresh
"type="reset"
value="refresh" > refresh
</button>
</form>
<!-- footer -->
<div class="footer">
<p class="copy"> ©Copyright 2020. Ilham Nopi Hendri</p>
</div>
</div>
<script src="soal2.js"></script>
</body>
</html>
2. Style Css
Nah setelah anda membuat File HTML, langkah selanjutnya buat file CSS(Cascading Style Sheets) buatlah nama sesuai dengan project yang ingin anda buat contoh: nama.css.
pada tahap ini saya menggunakan External Stylesheet karena lebih praktis, Nah css ini berguna untuk memper cantik tampilah Website yang anda buat.
berikut kodingannya.Download source code
*{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
body, html{
background-image: url(webb.png);
display: flex;
justify-content: center;
height: 100%;
box-shadow:1px 2px 9px rgba(165, 255, 104, 0.678),
-1px -2px 9px rgba(38, 204, 255, 0.5);
}
div.container{
display: flex;
flex-direction: column;
text-align: center;
margin: 0px 0px 0px 0px;
align-items: center;
width: 800px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.8);
}
h1{
margin-top: 50px;
font-size: 2em;
color: white;
text-shadow:1px 2px 5px rgba(0, 0, 0, 0.5);
transition: 1s;
}
h1:hover{
font-size: 2em;
color: white;
text-shadow:1px 2px 5px rgba(165, 255, 104, 0.678),
-1px -2px 5px rgba(38, 204, 255, 0.5);
}
form.dua{
margin: 20px;
}
input#angka2, input#angka1, input#hasil{
padding: 12px;
border-radius: 5px;
border: none;
border-bottom: 1px solid gray;
background-color: transparent;
}
input#angka2, input#angka1{
margin: 10px;
}
input:focus {
outline: none !important;
border-color: #719ECE;
box-shadow: 1px 2px 5px rgba(165, 255, 104, 0.678),
-1px -2px 5px rgba(38, 204, 255, 0.5);
}
div.operator{
display: block;
margin: 20px;
}
input.aritmatika{
display: inline-block;
padding: 10px;
border-radius: 5px;
background-color: transparent;
border: none;
transition: 1s;
}
input.aritmatika:hover{
display: inline-block;
padding: 10px;
border-radius: 5px;
background-color: lightblue;
border: none;
top: 10px;
position: relative;
}
button.refresh{
margin-top: 20px;
padding: 2px 20px 2px 20px;
border: none;
box-shadow: 1px 2px 5px rgba(165, 255, 104, 0.678),
-1px -2px 5px rgba(38, 204, 255, 0.5);
border-radius: 10px;
font-weight: bold;
margin-top: 30px;
transition: 1s;
color: gray;
outline: none !important;
}
button.refresh:hover{
padding: 2px 20px 2px 20px;
box-shadow: 1px 2px 5px rgba(165, 255, 104, 0.678),
-1px -2px 5px rgba(38, 204, 255, 0.5);
border: none;
border-radius: 10px;
font-weight: bold;
color: rgb(98, 98, 98);
background-color:lavender;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
div.footer{
background-color: #333333;
padding: 10px;
opacity: 0.8;
bottom: 0;
margin-top: 30px;
width: 780px;
position: absolute;
}
.copy{
color: #eaeaea;
text-align: center;
font-size: 12px;
}
3.Membuat File Javascript.
Setelah anda menyelesaikan pengetikan file CSS langkah selanjutnya kita akan membuat file JS(JavaScript). berikut kodingan nya.
function tambah(){
var angka1 = parseFloat(document.kalkulator.angka1.value);
var angka2 = parseFloat(document.kalkulator.angka2.value);
var hasil = angka1 + angka2;
document.kalkulator.hasil.value=hasil;
}
function kurang(){
var angka1 = parseFloat(document.kalkulator.angka1.value);
var angka2 = parseFloat(document.kalkulator.angka2.value);
var hasil = angka1 - angka2;
document.kalkulator.hasil.value=hasil;
}
function kali(){
var angka1 = parseFloat(document.kalkulator.angka1.value);
var angka2 = parseFloat(document.kalkulator.angka2.value);
var hasil = angka1 * angka2;
document.kalkulator.hasil.value=hasil;
}
function bagi(){
var angka1 = parseFloat(document.kalkulator.angka1.value);
var angka2 = parseFloat(document.kalkulator.angka2.value);
var hasil = angka1 / angka2;
document.kalkulator.hasil.value=hasil;
}
Sekian tutorial dari pada kali ini jika anda malas untuk mmengetik kan satu persatu codingannya saya sudah mmenyiapkan source code yang bisa di download click button download dibawah.
Berikut hasil program kalkulator sederhana kita hari ini terimakasih sudah berkenan membaca.
0 Komentar