Skip to content

Instantly share code, notes, and snippets.

@zaimazhar
Created February 10, 2021 05:26
Show Gist options
  • Save zaimazhar/c87007bbd0a78e6e1febff4a3d047302 to your computer and use it in GitHub Desktop.
Save zaimazhar/c87007bbd0a78e6e1febff4a3d047302 to your computer and use it in GitHub Desktop.
Kalkulator JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Kalkulator</title>
</head>
<body>
<h1 id="paparan_hasil">Hasil Matematik</h1><br>
<h2 id="paparan">Operasi Matematik</h2><br>
<div class="kekunci-kalkulator">
<div class="satu-baris">
<div id="1" onclick="ambilNilai(this.id)">1</div>
<div id="2" onclick="ambilNilai(this.id)">2</div>
<div id="3" onclick="ambilNilai(this.id)">3</div>
</div>
<div class="satu-baris">
<div id="4" onclick="ambilNilai(this.id)">4</div>
<div id="5" onclick="ambilNilai(this.id)">5</div>
<div id="6" onclick="ambilNilai(this.id)">6</div>
</div>
<div class="satu-baris">
<div id="7" onclick="ambilNilai(this.id)">7</div>
<div id="8" onclick="ambilNilai(this.id)">8</div>
<div id="9" onclick="ambilNilai(this.id)">9</div>
</div>
<div class="satu-baris">
<div id="+" onclick="ambilNilai(this.id)">➕</div>
<div id="0" onclick="ambilNilai(this.id)">0</div>
<div id="-" onclick="ambilNilai(this.id)">➖</div>
</div>
<div class="satu-baris">
<div></div>
<div></div>
<div onclick="kiraNilai()">✔️</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
let simpanNilaiPaparan = "";
let simpanNilai = [];
let simpanPaparan = "";
let sudahLakukanOperasi = false;
function ambilNilai(nilai) {
if(sudahLakukanOperasi) {
simpanPaparan = "";
simpanNilaiPaparan = "";
sudahLakukanOperasi = false;
}
paparanOperasi(nilai);
if((nilai === "+" || nilai === "-")) {
simpanNilai.push(parseInt(simpanNilaiPaparan));
simpanNilai.push(nilai);
simpanNilaiPaparan = "";
} else {
simpanNilaiPaparan += `${nilai}`;
}
}
function paparanOperasi(paparan) {
if(paparan === "+" || paparan === "-") {
simpanPaparan += ` ${paparan} `;
} else {
simpanPaparan += `${paparan}`;
}
document.querySelector("#paparan").innerHTML = simpanPaparan;
}
function kiraNilai() {
let nombor_pertama = true;
let simpanOperasi = 0;
if((simpanNilai[simpanNilai.length - 1] === "+" || simpanNilai[simpanNilai.length - 1] === "-") && (simpanNilaiPaparan === null || simpanNilaiPaparan === "")) {
simpanNilai.push(0);
} else {
simpanNilai.push(parseInt(simpanNilaiPaparan));
}
for(let i=0; i < simpanNilai.length; i++) {
if(nombor_pertama) {
simpanOperasi = simpanNilai[0];
nombor_pertama = false;
}
if(simpanNilai[i] === "+") {
simpanOperasi += simpanNilai[i + 1];
} else if(simpanNilai[i] === "-") {
simpanOperasi -= simpanNilai[i + 1];
}
}
document.querySelector("#paparan_hasil").innerHTML = simpanOperasi;
simpanNilai = [];
simpanOperasi = 0;
sudahLakukanOperasi = true;
}
* {
padding: 0;
margin: 0;
}
body {
padding: 200px 400px 0 400px;
text-align: center;
background-color: coral;
color: white;
font-size: 1.2rem;
font-weight: bold;
}
.kekunci-kalkulator {
display: grid;
background-color: blueviolet;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.satu-baris {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
.satu-baris div {
padding: 10px;
}
.satu-baris div:hover {
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment