SharePoint 2013: Calculator App Using SharePoint Hosted App Model With Office 365 Account

Calculator App will look like the following: 

Step 1: Create A new SHA project using Office 365 account credentials.

• SHarePoint Hosted App creation steps with Office 365.

Step 2: SHA project structure as in the following,

Step 3: In this project we are going to import JQuery Plugins and CSS file for calculator.

<script type="text/javascript" src="../Scripts/jquery.calculator.min.js"></script>
<style type="text/css">
    @import "../content/jquery.calculator.css";
</style>

Step 4: Default.aspx page contain code for calculator creation as follows.

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" language="C#" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
        <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
            <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
                <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
                    <script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>
                    <script type="text/javascript" src="../Scripts/jquery.calculator.min.js"></script>
                    <style type="text/css">
                        @import "../content/jquery.calculator.css";
                    </style>
                    <script type="text/javascript" src="../Scripts/App.js"></script>
                    <script type="text/javascript">
                        $(function()
                          {
                            $('#basicCalculator').calculator({
                                showOn: 'both',
                                buttonImageOnly: true,
                                buttonImage: '../content/calculator.png'
                            });
                        });
                    </script>
                </asp:Content>
                <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
                    <p>
                        <input type="text" id="basicCalculator" />
                    </p>
                </asp:Content>

Step 5: Manifest.xml file,

No need to set any permission for this app, as we are going to use JQuery plugins only.

Step6: App.JS file,

"use strict";
var context;
var web;
var user;

function sharePointReady()
{
    context = new SP.ClientContext.get_current();
    web = context.get_web();
    getUserName();
}

function getUserName()
{
    user = web.get_currentUser();
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}

function onGetUserNameSuccess()
{
    $('#message').text('Hello ' + user.get_title());
}

function onGetUserNameFail(sender, args)
{
    alert('Failed to get user name. Error:' + args.get_message());
}

Step 7: Jquery.calculator.css file contains code for calculator look and feel.

/* Main style sheet for jQuery Calculator v1.3.2 */
div.hasCalculator, span.hasCalculator
{
    position: relative;
}
button.calculator - trigger
{
    width: 25 px;
    padding: 0 px;
}
img.calculator - trigger
{
        margin: 2 px;
        vertical - align: middle;
    }
    .calculator - popup
    {
        display: none;
        z - index: 10;
        margin: 0;
        padding: 0;
        border: 1 px solid #888;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: # 000;
        background - color: #f4f4f4;
        font - family: Arial,
        Helvetica,
        sans - serif;
    }
    .calculator - keyentry
    {
        position: absolute;
        top: 3 px;
        right: 3 px;
        width: 0 px;
    }
    .calculator - inline
    {
        position: relative;
        border: 1 px solid #888;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: # f4f4f4;
    }
    .calculator - inline.calculator - close
    {
        display: none;
    }
    .calculator - disabled
    {
        position: absolute;
        z - index: 100;
        background - color: white;
        opacity: 0.5;
        filter: alpha(opacity = 50);
    }
    .calculator - rtl
    {
        direction: rtl;
    }
    .calculator - prompt
    {
        clear: both;
        text - align: center;
    }
    .calculator - prompt.ui - widget - header
    {
        margin: 2 px;
    }
    .calculator - result
    {
        clear: both;
        margin: 2 px;
        padding: 0 px 2 px;
        text - align: right;
        background - color: #fff;
        border: 1 px inset #000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-size: 110%;
}
.calculator-focussed
{
background-color: # ffc;
    }
    .calculator - row
    {
        clear: both;
        width: 100 % ;
    }
    .calculator - space
    {
        float: left;
        margin: 2 px;
        width: 28 px;
    }
    .calculator - half - space
    {
        float: left;
        margin: 1 px;
        width: 14 px;
    }
    .calculator - row button
    {
        position: relative;
        float: left;
        margin: 2 px;
        padding: 0 px;
        height: 22 px;
        background - color: #f4f4f4;
        border - radius: 4 px; - moz - border - radius: 4 px; - webkit - border - radius: 4 px;
        text - align: center;
        cursor: pointer;
    }
    .calculator - row.calculator - ctrl
    {
        width: 60 px;
        background - color: #e8e8e8;
    }
    .calculator - row.calculator - undo, .calculator - row.calculator - clear - error, .calculator - row.calculator - clear {
        width: 28 px;
    }
    .calculator - row.calculator - base, .calculator - row.calculator - angle {
        width: 28 px;
        font - size: 70 % ;
    }
    .calculator - row.calculator - base - active, .calculator - row.calculator - angle - active {
        border: 2 px inset# fff;
    }

    .calculator - digit, .calculator - oper
    {
        width: 28 px;
    }
    .calculator - mem - empty
    {
        color: #888;
}
.calculator-row .calculator-trig
{
font-size: 70%;
}
@-moz-document url-prefix() { // Firefox
.calculator-trig, .calculator-base
{
text-indent: -3px;
}
}
.calculator-key-down {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.calculator-keystroke
{
display: none;
width: 16px;
height: 14px;
position: absolute;
left: -8px;
top: -8px;
color: # 000;
        background - color: #fff;
        border: 1 px solid #888;
font-size: 80%;
}
.calculator-angle .calculator-keystroke, .calculator-base .calculator-keystroke, .calculator-trig .calculator-keystroke {
top: -10px;
font-size: 95%;
}
.calculator-keyname
{
width: 22px;
font-size: 70%;
}
.calculator-cover
{
display: none;
display/**/: block;
position: absolute;
z-index: -1;
filter: mask();
top: -4px;
left: -4px;
width: 125px;
height: 200px;
}