Membuat Kalkulator dengan HTML,CSS,JavaScript di notepad
Cara membuat kalkulator dengan HTML,CSS,JavaScript di Notepad
Disini saya ingin memberikan tutorial kepada teman-teman membuat kalkulator dengan html melalu notepad yang sangat mudah dan bisa diikuti oleh tema-teman
berikut langkah-langkah yang dapat teman-teman ikuti untuk cara membuat kalkulator dengan HTML,CSS,JavaSript di Notepad
langkah 1 : Buat Folder dengan nama ''calculator " lalu buka notepad
<!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">
<!--title digunakan untuk membuat judul dan ditampilkan di browser-->
<title>My Calculator</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!--digunakan untuk mendefisinikan bagian dari dokumen sehingga dapat diidentifikasi-->
<div class="container">
<div class="output">
<div class="title">Calculator Cindy</div>
<div class="overoutput"></div>
<div class="underoutput"></div>
<div class="tempoutput"></div>
</div>
<!--Digunakan untuk sebuah tombol yang dapat diklik untuk menjalankan tindakan tertentu-->
<button class="clear">Clear</button>
<button class="delete">Delete</button>
<button class="operation">%</button>
<button class="operation">/</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operation">x</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operation">-</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operation">+</button>
<button class="number">0</button>
<button class="number">00</button>
<button class="number">.</button>
<button class="result">=</button>
</div>
</body>
</html>
langkah 2 : kemudian klik tab file di notepad > Pilih "Save as" > Buat File name "index.html" > Ubah "Save as type" menjadi "All Files" > kemudian "Save" di dalam folder "calculator".
langkah 3 : Disini kita akan membuat css agar tampilannya lebih menarik. Salin kode di bawah ini dan simpan ke folder yang sama dengan nama style.css
<!--digunakan untuk mengatur tampilan elemen seperti latar belakang, warna dan lain-lain ini adalah kerangka style untuk memperindah kalkulator kita-->
body {
background-color: #add8e6;
display: flex;
justify-content: center;
align-items: center;
}
<!--digunakan untuk membungkus blok didalamnya, sehingga terlihat rapi terhadap ukuran layar-->
.container {
display: grid;
justify-content: center;
align-content: center;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(100px, auto) repeat(5, 100px);
min-height: 100vh;
}
<!--digunakan untuk tombol yang dapat diklik, meletakkan teks, teks tulisan, serta ukuran, latar belakang dan warna-->
button {
cursor: pointer;
outline: none;
font-size: 20px;
background-color: white;
border: 3px solid #333;
}
<!--digunakan untuk meletakkan latar belakang dan warna-->
button:hover {
background-color: rgba(225, 225, 225, 70);
color: white;
}
<!--digunakan untuk mewakili hasil perhitungan -->
.output {
grid-column: 1 / -1;
background-color: #333;
border-radius: 20px 20px 0 0;
word-wrap: break-word;
word-break: break-all;
-ms-word-break: break-all;
-ms-word-wrap: break-word;
}
<!--digunakan untuk memberikan warna pada colum calculator agar terlihat rapi-->
.overoutput {
background-color: rgb(42, 101, 128);
padding-right: 10px;
padding: 10px;
text-align: end;
font-size: 20px;
color: rgba(225, 225, 225, 100);
min-height: 25px;
}
<!--digunakan untuk menampilkan seberapa besar tinggi dan lebar pada colum calculator-->
.tempoutput {
background-color: #333;
color: #fff;
font-size: 20px;
padding: 10px;
min-height: 25px;
}
<!--digunakan untuk lapisan, perataan teks, ukuran huruf, tinggi minimum-->
.underoutput {
padding: 20px;
text-align: end;
font-size: 30px;
color: #66ff66;
min-height: 50px;
}
<!-- digunakan untuk warna pada judul dalam tampilan calculator berapa ukuran dan warna apa yang ingin kita beri-->
.title {
text-align: center;
height: 40px;
padding-top: 10px;
font-size: 25px;
color: white;
}
langkah 4 : Untuk membuat suatu fungsi kita menggunakan javascript agar tombol yang dibuat berfungsi dengan baik. Cukup salin kode di bawah ini dan simpan ke folder yang sama dengan nama app.js
<!--digunakan untuk hasil penjumlahan dan pengurangan data yang sudah kita bikin-->
const number = document.querySelectorAll('.number')
const operation = document.querySelectorAll('.operation')
const resultLast = document.querySelector('.result')
const clear = document.querySelector('.clear')
const del = document.querySelector('.delete')
const overoutput = document.querySelector('.overoutput')
const underoutput = document.querySelector('.underoutput')
const tempoutput = document.querySelector('.tempoutput')
<!--digunakan untuk mendefinisikan variabel dalam pemrograman atau dalam ekspresi matematika-->
var output1 = ''
var output2 = ''
var result = null
var operationLast = ''
var oneDot = false
<!--
number.forEach( number => {
number.addEventListener('click', (e) => {
if ( e.target.innerText === '.' && !oneDot) {
oneDot = true
} else if ( e.target.innerText === '.' && oneDot) {
return
}
output2 += e.target.innerText
underoutput.innerText = output2
})
})
operation.forEach( (operation) => {
operation.addEventListener('click', (e) => {
if (!output2) return
oneDot = false
const operationName = e.target.innerText
if (output1 && output2 && operationLast) {
mathOperation()
} else {
result = parseFloat(output2)
}
clearVar(operationName)
operationLast = operationName;
})
})
function clearVar(name = '') {
output1 += output2 + ' ' + name + ' '
overoutput.innerText = output1
underoutput.innerText = ''
output2 = ''
tempoutput.innerText = result
}
function mathOperation() {
if (operationLast === "x") {
result = parseFloat(result) * parseFloat(output2);
} else if (operationLast === "+") {
result = parseFloat(result) + parseFloat(output2);
} else if (operationLast === "-") {
result = parseFloat(result) - parseFloat(output2);
} else if (operationLast === "/") {
result = parseFloat(result) / parseFloat(output2);
} else if (operationLast === "%") {
result = parseFloat(result) % parseFloat(output2);
}
}
resultLast.addEventListener('click', (e) => {
if ( !output1 || !output2 ) return
oneDot = false
mathOperation()
clearVar()
underoutput.innerText = result
tempoutput.innerText = ''
output2 = result
output1 = ''
})
clear.addEventListener('click', (e) => {
underoutput.innerText = ''
overoutput.innerText = ''
tempoutput.innerText = ''
output1 = ''
output2 = ''
result = ''
})
del.addEventListener('click', (e) => {
underoutput.innerText = underoutput.innerText.toString().slice(0, -1)
output2 = output2.toString().slice(0, -1)
})
window.addEventListener('keydown', (e) => {
if (
e.key === '0' ||
e.key === '1' ||
e.key === '2' ||
e.key === '3' ||
e.key === '4' ||
e.key === '5' ||
e.key === '6' ||
e.key === '7' ||
e.key === '8' ||
e.key === '9' ||
e.key === '.'
) {
clicknumber(e.key)
} else if (
e.key === '+' ||
e.key === '-' ||
e.key === '/' ||
e.key === '%'
) {
clickoperation(e.key)
} else if (e.key === '*') {
clickoperation('x')
} else if (e.key === 'Enter' || e.key === '=') {
clickresult()
} else if (e.key === 'Backspace') {
clickdel()
} else if (e.key === 'Delete') {
clickclear()
}
})
function clicknumber(key) {
number.forEach((button) => {
if (button.innerText === key) {
button.click()
}
})
}
function clickoperation(key) {
operation.forEach((button) => {
if (button.innerText === key) {
button.click()
}
})
}
function clickresult() {
resultLast.click()
}
function clickdel() {
del.click()
}
function clickclear() {
clear.click()
}
Hasil Tampilan
.jpeg)
.png)
Komentar
Posting Komentar