Membuat Kalkulator Menggunakan Html, Css dan Javascript
Sobat sebagai tambahan referensi dalam belajar pemrograman, berikut ini kami bagikan sebuah tutorial membuat aplikasi kalkulator menggunakan html, css dan javascript. Aplikasi sangat cocok bagi anda yang baru belajar html dan css. Dalam aplikasi ini kita akan belajar beberapa fungsi sederhana dalam javascript dan koneksi html dengan css.
Dari segi tampilan aplikasi kalkulator ini cukup menarik, tentu saja anda dapat mengedit dan mengembangkannya lagi. Aplikasi ini hanya sekedar bahan referensi dan belajar membuat program menggunakan html, css dan javascript. semoga bermanfaat dan selamat mencoba.
Berikut ini adalah source code aplikasi kalkulator menggunakan html :
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%2F*%20Basic%20reset%20*%2F%0A*%20%7B%0A%09margin%3A%200%3B%0A%09padding%3A%200%3B%0A%09box-sizing%3A%20border-box%3B%0A%09%0A%09%2F*%20Better%20text%20styling%20*%2F%0A%09font%3A%20bold%2014px%20Arial%2C%20sans-serif%3B%0A%7D%0A%0A%2F*%20Finally%20adding%20some%20IE9%20fallbacks%20for%20gradients%20to%20finish%20things%20up%20*%2F%0A%0A%2F*%20A%20nice%20BG%20gradient%20*%2F%0Ahtml%20%7B%0A%09height%3A%20100%25%3B%0A%09background%3A%20white%3B%0A%09background%3A%20radial-gradient(circle%2C%20%23fff%2020%25%2C%20%23ccc)%3B%0A%09background-size%3A%20cover%3B%0A%7D%0A%0A%2F*%20Using%20box%20shadows%20to%20create%203D%20effects%20*%2F%0A%23calculator%20%7B%0A%09width%3A%20325px%3B%0A%09height%3A%20auto%3B%0A%09%0A%09margin%3A%2010px%20auto%3B%0A%09padding%3A%2020px%2020px%209px%3B%0A%09%0A%09background%3A%20%239dd2ea%3B%0A%09background%3A%20linear-gradient(%239dd2ea%2C%20%238bceec)%3B%0A%09border-radius%3A%203px%3B%0A%09box-shadow%3A%200px%204px%20%23009de4%2C%200px%2010px%2015px%20rgba(0%2C%200%2C%200%2C%200.2)%3B%0A%7D%0A%0A%2F*%20Top%20portion%20*%2F%0A.top%20span.clear%20%7B%0A%09float%3A%20left%3B%0A%7D%0A%0A%2F*%20Inset%20shadow%20on%20the%20screen%20to%20create%20indent%20*%2F%0A.top%20.screen%20%7B%0A%09height%3A%2040px%3B%0A%09width%3A%20212px%3B%0A%09%0A%09float%3A%20right%3B%0A%09%0A%09padding%3A%200%2010px%3B%0A%09%0A%09background%3A%20rgba(0%2C%200%2C%200%2C%200.2)%3B%0A%09border-radius%3A%203px%3B%0A%09box-shadow%3A%20inset%200px%204px%20rgba(0%2C%200%2C%200%2C%200.2)%3B%0A%09%0A%09%2F*%20Typography%20*%2F%0A%09font-size%3A%2017px%3B%0A%09line-height%3A%2040px%3B%0A%09color%3A%20white%3B%0A%09text-shadow%3A%201px%201px%202px%20rgba(0%2C%200%2C%200%2C%200.2)%3B%0A%09text-align%3A%20right%3B%0A%09letter-spacing%3A%201px%3B%0A%7D%0A%0A%2F*%20Clear%20floats%20*%2F%0A.keys%2C%20.top%20%7Boverflow%3A%20hidden%3B%7D%0A%0A%2F*%20Applying%20same%20to%20the%20keys%20*%2F%0A.keys%20span%2C%20.top%20span.clear%20%7B%0A%09float%3A%20left%3B%0A%09position%3A%20relative%3B%0A%09top%3A%200%3B%0A%09%0A%09cursor%3A%20pointer%3B%0A%09%0A%09width%3A%2066px%3B%0A%09height%3A%2036px%3B%0A%09%0A%09background%3A%20white%3B%0A%09border-radius%3A%203px%3B%0A%09box-shadow%3A%200px%204px%20rgba(0%2C%200%2C%200%2C%200.2)%3B%0A%09%0A%09margin%3A%200%207px%2011px%200%3B%0A%09%0A%09color%3A%20%23888%3B%0A%09line-height%3A%2036px%3B%0A%09text-align%3A%20center%3B%0A%09%0A%09%2F*%20prevent%20selection%20of%20text%20inside%20keys%20*%2F%0A%09user-select%3A%20none%3B%0A%09%0A%09%2F*%20Smoothing%20out%20hover%20and%20active%20states%20using%20css3%20transitions%20*%2F%0A%09transition%3A%20all%200.2s%20ease%3B%0A%7D%0A%0A%2F*%20Remove%20right%20margins%20from%20operator%20keys%20*%2F%0A%2F*%20style%20different%20type%20of%20keys%20(operators%2Fevaluate%2Fclear)%20differently%20*%2F%0A.keys%20span.operator%20%7B%0A%09background%3A%20%23FFF0F5%3B%0A%09margin-right%3A%200%3B%0A%7D%0A%0A.keys%20span.eval%20%7B%0A%09background%3A%20%23f1ff92%3B%0A%09box-shadow%3A%200px%204px%20%239da853%3B%0A%09color%3A%20%23888e5f%3B%0A%7D%0A%0A.top%20span.clear%20%7B%0A%09background%3A%20%23ff9fa8%3B%0A%09box-shadow%3A%200px%204px%20%23ff7c87%3B%0A%09color%3A%20white%3B%0A%7D%0A%0A%2F*%20Some%20hover%20effects%20*%2F%0A.keys%20span%3Ahover%20%7B%0A%09background%3A%20%239c89f6%3B%0A%09box-shadow%3A%200px%204px%20%236b54d3%3B%0A%09color%3A%20white%3B%0A%7D%0A%0A.keys%20span.eval%3Ahover%20%7B%0A%09background%3A%20%23abb850%3B%0A%09box-shadow%3A%200px%204px%20%23717a33%3B%0A%09color%3A%20%23ffffff%3B%0A%7D%0A%0A.top%20span.clear%3Ahover%20%7B%0A%09background%3A%20%23f68991%3B%0A%09box-shadow%3A%200px%204px%20%23d3545d%3B%0A%09color%3A%20white%3B%0A%7D%0A%0A%2F*%20Simulating%20%22pressed%22%20effect%20on%20active%20state%20of%20the%20keys%20by%20removing%20the%20box-shadow%20and%20moving%20the%20keys%20down%20a%20bit%20*%2F%0A.keys%20span%3Aactive%20%7B%0A%09box-shadow%3A%200px%200px%20%236b54d3%3B%0A%09top%3A%204px%3B%0A%7D%0A%0A.keys%20span.eval%3Aactive%20%7B%0A%09box-shadow%3A%200px%200px%20%23717a33%3B%0A%09top%3A%204px%3B%0A%7D%0A%0A.top%20span.clear%3Aactive%20%7B%0A%09top%3A%204px%3B%0A%09box-shadow%3A%200px%200px%20%23d3545d%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<div id="calculator">
<!-- Screen and clear key -->
<div class="top">
<span class="clear">C</span>
<div class="screen"></div>
</div>
<div class="keys">
<!-- operators and other keys -->
<span>7</span>
<span>8</span>
<span>9</span>
<span class="operator">+</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="operator">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="operator">รท</span>
<span>0</span>
<span>.</span>
<span class="eval">=</span>
<span class="operator">x</span>
</div>
</div>
<!-- PrefixFree -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%2F%2F%20Get%20all%20the%20keys%20from%20document%0Avar%20keys%20%3D%20document.querySelectorAll('%23calculator%20span')%3B%0Avar%20operators%20%3D%20%5B'%2B'%2C%20'-'%2C%20'x'%2C%20'%C3%B7'%5D%3B%0Avar%20decimalAdded%20%3D%20false%3B%0A%0A%2F%2F%20Add%20onclick%20event%20to%20all%20the%20keys%20and%20perform%20operations%0Afor(var%20i%20%3D%200%3B%20i%20%3C%20keys.length%3B%20i%2B%2B)%20%7B%20keys%5Bi%5D.onclick%20%3D%20function(e)%20%7B%20%2F%2F%20Get%20the%20input%20and%20button%20values%20var%20input%20%3D%20document.querySelector('.screen')%3B%20var%20inputVal%20%3D%20input.innerHTML%3B%20var%20btnVal%20%3D%20this.innerHTML%3B%20%2F%2F%20Now%2C%20just%20append%20the%20key%20values%20(btnValue)%20to%20the%20input%20string%20and%20finally%20use%20javascript's%20eval%20function%20to%20get%20the%20result%20%2F%2F%20If%20clear%20key%20is%20pressed%2C%20erase%20everything%20if(btnVal%20%3D%3D%20'C')%20%7B%20input.innerHTML%20%3D%20''%3B%20decimalAdded%20%3D%20false%3B%20%7D%20%2F%2F%20If%20eval%20key%20is%20pressed%2C%20calculate%20and%20display%20the%20result%20else%20if(btnVal%20%3D%3D%20'%3D')%20%7B%20var%20equation%20%3D%20inputVal%3B%20var%20lastChar%20%3D%20equation%5Bequation.length%20-%201%5D%3B%20%2F%2F%20Replace%20all%20instances%20of%20x%20and%20%C3%B7%20with%20*%20and%20%2F%20respectively.%20This%20can%20be%20done%20easily%20using%20regex%20and%20the%20'g'%20tag%20which%20will%20replace%20all%20instances%20of%20the%20matched%20character%2Fsubstring%20equation%20%3D%20equation.replace(%2Fx%2Fg%2C%20'*').replace(%2F%C3%B7%2Fg%2C%20'%2F')%3B%20%2F%2F%20Final%20thing%20left%20to%20do%20is%20checking%20the%20last%20character%20of%20the%20equation.%20If%20it's%20an%20operator%20or%20a%20decimal%2C%20remove%20it%20if(operators.indexOf(lastChar)%20%3E%20-1%20%7C%7C%20lastChar%20%3D%3D%20'.')%0A%09%09%09%09equation%20%3D%20equation.replace(%2F.%24%2F%2C%20'')%3B%0A%09%09%09%0A%09%09%09if(equation)%0A%09%09%09%09input.innerHTML%20%3D%20eval(equation)%3B%0A%09%09%09%09%0A%09%09%09decimalAdded%20%3D%20false%3B%0A%09%09%7D%0A%09%09%0A%09%09%2F%2F%20Basic%20functionality%20of%20the%20calculator%20is%20complete.%20But%20there%20are%20some%20problems%20like%20%0A%09%09%2F%2F%201.%20No%20two%20operators%20should%20be%20added%20consecutively.%0A%09%09%2F%2F%202.%20The%20equation%20shouldn't%20start%20from%20an%20operator%20except%20minus%0A%09%09%2F%2F%203.%20not%20more%20than%201%20decimal%20should%20be%20there%20in%20a%20number%0A%09%09%0A%09%09%2F%2F%20We'll%20fix%20these%20issues%20using%20some%20simple%20checks%0A%09%09%0A%09%09%2F%2F%20indexOf%20works%20only%20in%20IE9%2B%0A%09%09else%20if(operators.indexOf(btnVal)%20%3E%20-1)%20%7B%0A%09%09%09%2F%2F%20Operator%20is%20clicked%0A%09%09%09%2F%2F%20Get%20the%20last%20character%20from%20the%20equation%0A%09%09%09var%20lastChar%20%3D%20inputVal%5BinputVal.length%20-%201%5D%3B%0A%09%09%09%0A%09%09%09%2F%2F%20Only%20add%20operator%20if%20input%20is%20not%20empty%20and%20there%20is%20no%20operator%20at%20the%20last%0A%09%09%09if(inputVal%20!%3D%20''%20%26%26%20operators.indexOf(lastChar)%20%3D%3D%20-1)%20%0A%09%09%09%09input.innerHTML%20%2B%3D%20btnVal%3B%0A%09%09%09%0A%09%09%09%2F%2F%20Allow%20minus%20if%20the%20string%20is%20empty%0A%09%09%09else%20if(inputVal%20%3D%3D%20''%20%26%26%20btnVal%20%3D%3D%20'-')%20%0A%09%09%09%09input.innerHTML%20%2B%3D%20btnVal%3B%0A%09%09%09%0A%09%09%09%2F%2F%20Replace%20the%20last%20operator%20(if%20exists)%20with%20the%20newly%20pressed%20operator%0A%09%09%09if(operators.indexOf(lastChar)%20%3E%20-1%20%26%26%20inputVal.length%20%3E%201)%20%7B%0A%09%09%09%09%2F%2F%20Here%2C%20'.'%20matches%20any%20character%20while%20%24%20denotes%20the%20end%20of%20string%2C%20so%20anything%20(will%20be%20an%20operator%20in%20this%20case)%20at%20the%20end%20of%20string%20will%20get%20replaced%20by%20new%20operator%0A%09%09%09%09input.innerHTML%20%3D%20inputVal.replace(%2F.%24%2F%2C%20btnVal)%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09decimalAdded%20%3Dfalse%3B%0A%09%09%7D%0A%09%09%0A%09%09%2F%2F%20Now%20only%20the%20decimal%20problem%20is%20left.%20We%20can%20solve%20it%20easily%20using%20a%20flag%20'decimalAdded'%20which%20we'll%20set%20once%20the%20decimal%20is%20added%20and%20prevent%20more%20decimals%20to%20be%20added%20once%20it's%20set.%20It%20will%20be%20reset%20when%20an%20operator%2C%20eval%20or%20clear%20key%20is%20pressed.%0A%09%09else%20if(btnVal%20%3D%3D%20'.')%20%7B%0A%09%09%09if(!decimalAdded)%20%7B%0A%09%09%09%09input.innerHTML%20%2B%3D%20btnVal%3B%0A%09%09%09%09decimalAdded%20%3D%20true%3B%0A%09%09%09%7D%0A%09%09%7D%0A%09%09%0A%09%09%2F%2F%20if%20any%20other%20key%20is%20pressed%2C%20just%20append%20it%0A%09%09else%20%7B%0A%09%09%09input.innerHTML%20%2B%3D%20btnVal%3B%0A%09%09%7D%0A%09%09%0A%09%09%2F%2F%20prevent%20page%20jumps%0A%09%09e.preventDefault()%3B%0A%09%7D%20%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<div><a target="_blank" href="http://www.sourcecodeaplikasi.info/"><span style="font-size: 8pt; text-decoration: none">Source Code Aplikasi</span></a></div>
</body>
</html>
Download source code aplikasi kalkulator berbasis html
Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
