Created
February 10, 2021 05:26
-
-
Save zaimazhar/c87007bbd0a78e6e1febff4a3d047302 to your computer and use it in GitHub Desktop.
Kalkulator JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| 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