Now just develop the application and to design the appearance of the app we will add the following HTML code in the default page of the project
and to do this just remove the default HTML code under the body tag and replace it with the following code as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>calculator</title>
<link rel="stylesheet" type="text/css" href="../Content/Office.css" />
<link rel="stylesheet" type="text/css" href="../Content/App.css" />
<script src="../Scripts/jquery-1.6.2.js"></script>
<script src="../Scripts/Office/MicrosoftAjax.js"></script>
<script src="../Scripts/Office/Office.js"></script>
<!-- Add your JavaScript to the following file -->
<script src="../Scripts/calculator.js"></script>
</head>
<body>
<h1>Calculator</h1>
<div id="SectionContent">
<div id="result" class="result">
<span id="storeddata" style="font-size:medium"></span><br />
<span id="inserteddata">0</span>
</div>
<hr />
<br />
<div id="buttons" style="text-align:center;">
<!-- First row of buttons: C/EC, MSR, M-, M+ -->
<input id="cleardata" type="button" class="button" value="CE" onclick="clearDatas()"/>
<input id="memory" type="button" class="button" value="MSR" />
<input id="memoryminus" type="button" class="button" value="M-" />
<input id="memoryplus" type="button" class="button" value="M+" />
<br />
<!-- Second row of buttons: 7, 8, 9, '/' -->
<input id="7" type="button" class="button" value="7" onclick="EnterNumber(this)"/>
<input id="8" type="button" class="button" value="8" onclick="EnterNumber(this)"/>
<input id="9" type="button" class="button" value="9" onclick="EnterNumber(this)"/>
<input id="divide" type="button" class="button" value="/" onclick="includeOperator(this)"/>
<br />
<!-- Third row of buttons: 4, 5, 6, '*' -->
<input id="4" type="button" class="button" value="4" onclick="EnterNumber(this)"/>
<input id="5" type="button" class="button" value="5" onclick="EnterNumber(this)"/>
<input id="6" type="button" class="button" value="6" onclick="EnterNumber(this)"/>
<input id="multiply" type="button" class="button" value="*" onclick="includeOperator(this)"/>
<br />
<!-- Fourth row of buttons: 1, 2, 3, '-' -->
<input id="1" type="button" class="button" value="1" onclick="EnterNumber(this)"/>
<input id="2" type="button" class="button" value="2" onclick="EnterNumber(this)"/>
<input id="3" type="button" class="button" value="3" onclick="EnterNumber(this)"/>
<input id="minus" type="button" class="button" value="-" onclick="includeOperator(this)"/>
<br />
<!-- Fifth row of buttons: 0, '.', '+', '=' -->
<input id="0" type="button" class="button" value="0" onclick="EnterNumber(this)"/>
<input id="decimal" type="button" class="button" value="." onclick="EnterNumber(this)"/>
<input id="plus" type="button" class="button" value="+" onclick="includeOperator(this)"/>
<input id="equals" type="button" class="button" value="=" onclick="evaluate();"/>
</div>
<hr />
<br />
<div id="buttonsofcontent" style="text-align:center"></div>
</div>
</body>
</html>
Now add the following functions to calculator.js like this:
var result;
var savedData;
var insertedData;
var savedOperation = [];
Office.initialize = function (reason) {
// Use the following API wherever you want access to the Office document object.
// Office.context.document;
// Check if setSelectedData method is supported and include sample content to insert data.
if (Office.context.document.setSelectedDataAsync) {
var setDataDiv = "<input type='button' style='width:47%;margin:2px;' onclick='setData()' value='Insert Data' />";
document.getElementById("buttonsofcontent").innerHTML += setDataDiv;
}
// Check if getSelectedData method is supported and include sample content to get data.
if (Office.context.document.getSelectedDataAsync) {
var getDataDiv = "<input type='button' style='width:47%;margin:2px;' onclick='getData()' value='Get Data'/>";
document.getElementById("buttonsofcontent").innerHTML += getDataDiv;
}
// Capture a reference to the output div onload.
result = document.getElementById('result');
savedData = document.getElementById('storeddata');
insertedData = document.getElementById('inserteddata');
savedOperation[0] = "undefined";
savedOperation[1] = "undefined";
}
// Add numbers to the number display.
function EnterNumber(node) {
var newEntry = node.value;
var dataEntry = insertedData.innerHTML;
dataEntry = String(dataEntry);
// Check to see if the decimal button was clicked
// and that there are no other decimals in the entry.
if (newEntry == "decimal") {
if (dataEntry.indexOf(".") == -1) {
newEntry = ".";
}
else {
newEntry = "";
}
}
// Add the new entry to the entered data.
if (insertedData.innerHTML == "0") {
insertedData.innerHTML = newEntry;
}
else {
insertedData.innerHTML += newEntry;
}
}
// Convert the information in the display to a number
// and store both operand and operator.
function includeOperator(node) {
if (savedOperation[1] == "undefined") {
// Parse the value and operator for the operation.
var operator = node.id;
var operand = insertedData.innerHTML;
var operation;
operand = parseFloat(operand);
// Store the operation as an anonymous function
// in the global variable storedOperation.
switch (operator) {
case "divide":
operation = function (a, b) { return a / b };
savedData.innerHTML = operand + " / ";
break;
case "multiply":
operation = function (a, b) { return a * b };
savedData.innerHTML = operand + " * ";
break;
case "minus":
operation = function (a, b) { return a - b };
savedData.innerHTML = operand + " - ";
break;
case "plus":
operation = function (a, b) { return a + b };
savedData.innerHTML = operand + " + ";
break;
}
// Store the entered data and the operator into a global variable.
// Reset the innerHTML of the enteredData span.
savedOperation[0] = operand;
savedOperation[1] = operation;
insertedData.innerHTML = "0";
}
}
// Removes all entries from the output and sets the value to '0'.
function clearEntries() {
insertedData.innerHTML = "0";
storedData.innerHTML = "";
}
// Gets the data and operation stored in the global array,
// evaluates the expression, and returns the results.
function evaluate() {
// Ensure that some data is stored already before attempting to evaluate.
if (savedOperation[0] != "undefined") {
// Define the two operands and operation to perform.
var x = savedOperation[0];
var y = insertedData.innerHTML;
y = parseFloat(y);
var operation = savedOperation[1];
var result;
result = operation(x, y);
result = result.toFixed(5);
// Display results and clear the stored data span.
insertedData.innerHTML = result;
savedData.innerHTML = "";
// Clear the data out of the storedOperation array.
savedOperation[0] = "undefined";
savedOperation[1] = "undefined";
}
}
// JavaScript has some issues with evaluating floating point
// decimal numbers, so they need to be evaluated differently.
function evaluateFloat(x, y, operation) {
var stringX = String(x);
var stringY = String(y);
var decimalPlace = 0;
var result;
// Determine the level of precision needed for the float operation.
// Check the x variable to see if it is the float.
if (stringX.indexOf(".") > -1) {
decimalPlace = (stringX.length - stringX.indexOf(".")) - 1;
}
// Check to see if the y variable is the float, and if so,
// if it has more decimal places.
if (stringY.indexOf(".") > -1) {
if (decimalPlace < ((stringY.length - stringY.indexOf(".")) - 1)) {
decimalPlace = (stringY.length - stringY.indexOf(".")) - 1;
}
}
// Transform the numbers into integers by multiplying them
// by 10 to a power equal to the number of decimal places.
result = operation((x * Math.pow(10, decimalPlace)), (y * Math.pow(10, decimalPlace)));
result = Math.round(result) / Math.pow(10, decimalPlace);
return result;
}
// Inserts the current entered data/ result into
// the currently selected place in the document.
function setData() {
// Get the current value in the entereddata div.
var value = insertedData.innerHTML;
// Set the selected data into the document as text.
Office.context.document.setSelectedDataAsync(
value, function () { });
}
// Gets data from the current document and returns it as a number.
function getData() {
var dataValue = 0;
// Get the current selection from the Word document.
Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
function (result) {
if (result.status != "failed") {
var results = result.value;
results = parseFloat(results);
if (!isNaN(results)) {
dataValue = results;
}
}
insertedData.innerHTML = dataValue;
});
}