JavaScript Calculator Tutorial Part 4 | Making Simple Calculator Using HTML,Bootstrap and JavaScript
JavaScript Calculator Tutorial Part 4 | Making Simple Calculator Using HTML,Bootstrap and JavaScript
Tutorial Cover:
1. Make a Simple Calculator UI Using HTML and Bootstrap CSS
2. Bootstrap Grid
3. Access HTML Input Box into JavaScript
4. Set Value in HTML Input Using JavaScript
5. Get Value from HTML Input Using JavaScript
6. Create JavaScript Function
7. Link JavaScript Function with HTML Button
8. JavaScript Button Click Event
9. JavaScript eval() Function
10. JavaScript Complete Calculator Project
Tutorial Link : https://youtu.be/p3v6JUcndBo
Join Our Telegram Group for Stay Updated : https://t.me/supercoders
Source Code : https://github.com/hackstarsj/JavaScriptCompleteTutorial
HTML CODE :
Javascript Code :
HTML CODE :
<html lang="en"> <head> <meta charset="UTF-8"> <title>Javascript Calculator</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" > <style> .nopadding{ padding: 0px; } .btn_font{ font-size: 30px; } </style> </head> <body style="background: #FFA726;"> <h1 class="text-center">HTML JavaScript Calculator</h1> <div class="container" style="padding: 30px;border: 1px solid grey;margin-top: 50px;background: whitesmoke; box-shadow: 5px 5px #525252; border-radius: 10px;"> <div class="row"> <div class="col-lg-12 nopadding"> <input type="text" name="calculation" id="calculation" class="form-control" style="padding: 10px;font-size: 30px;height: 50px;"> </div> </div> <div class="row"> <div class="col-xs-3 nopadding"> <button id="one" class="btn btn-primary btn-block btn_font" onclick="UserClickButton('1')">1</button> </div> <div class="col-xs-3 nopadding"> <button id="two" class="btn btn-primary btn-block btn_font" onclick="UserClickButton('2')">2</button> </div> <div class="col-xs-3 nopadding"> <button id="three" class="btn btn-primary btn-block btn_font" onclick="UserClickButton('3')">3</button> </div> <div class="col-xs-3 nopadding"> <button id="add" class="btn btn-success btn-block btn_font" onclick='UserClickButton("+")'>+</button> </div> </div> <div class="row"> <div class="col-xs-3 nopadding"> <button id="four" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("4")'>4</button> </div> <div class="col-xs-3 nopadding"> <button id="five" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("5")'>5</button> </div> <div class="col-xs-3 nopadding"> <button id="six" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("6")'>6</button> </div> <div class="col-xs-3 nopadding"> <button id="minus" class="btn btn-success btn-block btn_font" onclick='UserClickButton("-")'>-</button> </div> </div> <div class="row"> <div class="col-xs-3 nopadding"> <button id="seven" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("7")'>7</button> </div> <div class="col-xs-3 nopadding"> <button id="eight" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("8")'>8</button> </div> <div class="col-xs-3 nopadding"> <button id="nine" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("9")'>9</button> </div> <div class="col-xs-3 nopadding"> <button id="multiply" class="btn btn-success btn-block btn_font" onclick='UserClickButton("*")'>*</button> </div> </div> <div class="row"> <div class="col-xs-3 nopadding"> <button id="dot" class="btn btn-primary btn-block btn_font" onclick='UserClickButton(".")'>.</button> </div> <div class="col-xs-3 nopadding"> <button id="zero" class="btn btn-primary btn-block btn_font" onclick='UserClickButton("0")'>0</button> </div> <div class="col-xs-3 nopadding"> <button id="equal" class="btn btn-primary btn-block btn_font" onclick='CalculateValue()'>=</button> </div> <div class="col-xs-3 nopadding"> <button id="divide" class="btn btn-success btn-block btn_font" onclick='UserClickButton("/")'>/</button> </div> </div> <div class="row"> <div class="col-lg-12 nopadding"> <button class="btn btn-danger btn-block" onclick="ClearData()">CLEAR</button> </div> </div> <div class="row"> <div class="col-lg-12"> <h2>History Log</h2> </div> <div class="col-lg-12" id="history_log"> </div> </div> </div> <script src="calculator.js"></script> </body> </html>
Javascript Code :
var input_box = document.getElementById("calculation"); var historyData = []; var expressionData = ""; var resultData = ""; input_box.onkeydown = function () { console.log(input_box.value); }; function UserClickButton(input) { var oldinput = input_box.value; var newinput = oldinput + input; expressionData = newinput; input_box.value = newinput; } function CalculateValue() { console.log("Click"); var input = input_box.value; input = input.replace('"', "").replace("'", ""); var result = eval(input); resultData = result; historyData.push({ expression: expressionData, result: resultData }); showLogdata(); resultData = ""; expressionData = ""; input_box.value = result; } function ClearData() { input_box.value = ""; } function showLogdata() { var log = document.getElementById("history_log"); var string = ""; for (var key in historyData) { string += "" + historyData[key]["expression"] + " = " + historyData[key]["result"] + "<br>"; } log.innerHTML = string; }
Join Our Telegram Channel to Stay Updated
No comments:
Post a Comment