#JP35 Membuat Kalkulator Dengan Apps Script

Membuat Kalkulator Dengan Apps Script

1. Buka akun Google Drive

2. Klik tombol menu +Baru

3. Pilih menu Script Google Apps.

4. Akan muncul tab baru yaitu lembar kerja Apps Script.

Pada lembar kerja Apps Script terdapat 1 file default yaitu Code.gs

5. Copy dan pastekan script di bawah ini ke Code.gs

//Source : www.javabitpro.com
//Youtube : Javabitpro
function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate()
  .setTitle("WebApp Form Title")
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

6. Buatlah file baru dengan cara klik tanda (+) lalu pilih HTML

7. Silahkan beri nama index sesuai script pada Code.gs

8. Copy dan pastekan script di bawah ini ke index.html

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

<!doctype html>
<html>
    <head>
        <title>Kalkulator PanduanCode</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/segment7" type="text/css"/>
        <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">

        <script>
function insert(num) {

var a = document.form.textview;

a.value += num;
}

function equal() {
var a = document.form.textview;
var exp = a.value;

if (exp) {
a.value = eval(exp);
}
}

function clean() {
document.form.textview.value = '';
}

function back() {
var exp = document.form.textview.value;

document.form.textview.value = exp.substring(0, exp.length-1);
}

</script>
        <style type="text/css">
    body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
}
.main {
    width: 400px;
    height: 600px;
    position: relative;
    top: -8.5%;

    left: -6%;
    margin: auto;
    background: #5c5859;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 5px 50px 0 rgba(0, 0, 0, .5);
    box-shadow: inset 0 -5px 10px 5px rgba(0, 0, 0, .5);
    transform: scale(.8);
}
.textview {
    width: 90%;
    height: 90px;
    position: absolute;
    right: 0;
    left: 0;
    margin: 24px auto 15px auto;
    font-size: 50px;
    text-align: right;
    font-family: 'Segment7Standard';
    font-family: 'Rubik', sans-serif;
    background: #cddecc;
    color: #6d756b;
    border: none;
    padding: 0 5px 0 0;
    border-radius: 15px;
    overflow-x: scroll;
    box-shadow: inset 0 -5px 10px 2px #6b756a,
                0 5px 10px 0px #3f423f;
/*    padding: 5px;*/
}
table {
    position: absolute;
    /*top: 0;
    right: 0;*/
    bottom: 0;
/*    left: 0;*/
/*    display: flex;
    justify-content: center;
    align-items: center;*/
    margin: 0 5px 18px 23px;
}
#clean {
    background: #ff1900;
    color: #fff;
    box-shadow: inset 0 5px 10px 0 #ff1900,
                inset 0 -5px 10px 3px #2d1f1fba,
                0 5px 10px 0px #1e211e;
}
#clean:active {
    box-shadow: inset 0 -5px 10px 0 #ff1900,
                inset 0 5px 10px 3px #2d1f1fba,
                0 0px 10px 0px #3f423f00;
}
#img {
    width: 80%;
    height: 80%;
}
#plus,
#first {
    height: 164px;
}
#equal,
#second {
    width: 164px;
}
#second {
    background: #31e008;
    color:#fff;
    box-shadow: inset 0 5px 10px 0 #31e008, inset 0 -5px 10px 3px #2a5a22bf, 0 5px 10px 0px #1e211e;
}
#second:active {
    box-shadow: inset 0 -5px 10px 0 #31e008,
                inset 0 5px 10px 3px #2a5a22bf,
                0 0px 10px 0px #3f423f00;
}
.button {
    width: 76px;
    height: 76px;
    font-size: 50px;
    font-weight: 900;
    position: relative;
    left: 0;
    right: 0;
    margin: 4px;
    border: none;
    border-radius: 18px;
    font-family: 'Rubik', sans-serif;
    background: #f0eeef;
    color: #3b3b3c;
    box-shadow: inset 0 5px 10px 0 #fff,
                inset 0 -5px 10px 3px #847a7aba,
                0 5px 10px 0px #1e211e;
    display: flex;
    justify-content: center;
    align-items: center;

}
.main table tr td .button:active {
    box-shadow: inset 0 -5px 10px 0 #fff,
                inset 0 5px 10px 3px #847a7aba,
                0 0px 10px 0px #3f423f00;
}
.inner {
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    bottom: 0;
    margin: auto 0 auto 0;
/*    background: green;*/
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main table tr td .button .inner:active {
    transform: translateY(5px) scale(.98);
}
        </style>
    </head>
    <body>
        <div class="main">
            <form name="form">
                <input class="textview" name="textview" placeholder="0" style="overflow: scroll;" disabled>
            </form>
            <table>
                <tr>
                    <td>
                        <div class="button" id="clean" onclick="clean()"><div class="inner">C</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="back()"><div class="inner"><img alt="←" id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkTHh6_7PIoRxPmCX9nDVBwHItGNxDjgSx6B3NFebJ9hEbhzBXwU2zbzUQgVWyq_nCgvdr-IpsXprIFszf1VQ8ssb9cRKBmNwYgOhRoZ15ffRYiPLCq0QhUlIhrMPzUJlfCSS3-s13bX1HFRCYfa0F4dOMbhNT0KG8N-yVL45BqkzPCcvKmco26iRh/s1600/Clear.png"></div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert('/')"><div class="inner">÷</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert('*')"><div class="inner">×</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="button" onclick="insert(7)"><div class="inner">7</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert(8)"><div class="inner">8</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert(9)"><div class="inner">9</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert('-')"><div class="inner">-</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="button" onclick="insert(4)"><div class="inner">4</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert(5)"><div class="inner">5</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert(6)"><div class="inner">6</div>
                        </div>
                    </td>
                    <td rowspan="2" id="plus">
                        <div id="first" class="button" onclick="insert('+')"><div class="inner">+</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="button" onclick="insert(1)"><div class="inner">1</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert(2)"><div class="inner">2</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert(3)"><div class="inner">3</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="zero" class="button" onclick="insert(0) //zero()"><div class="inner">0</div>
                        </div>
                    </td>
                    <td>
                        <div class="button" onclick="insert('.')"><div class="inner">.</div>
                        </div>
                    </td>
                    <td colspan="2" id="equal">
                        <div id="second" class="button" onclick="equal()"><div class="inner">=</div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:52px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:52px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:20%}}</style><div class="disclaimer">Version.01.05.22 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>