{"id":1699,"date":"2018-12-27T16:29:11","date_gmt":"2018-12-27T15:29:11","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=1699"},"modified":"2018-12-27T16:29:11","modified_gmt":"2018-12-27T15:29:11","slug":"learning-ionic-create-a-simple-calculator","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2018\/12\/27\/learning-ionic-create-a-simple-calculator\/","title":{"rendered":"Ionic | Create a simple Calculator"},"content":{"rendered":"\n

Sources for this tutorial are here<\/a>.<\/p>\n\n\n\n

Preparation<\/h2>\n\n\n\n

Clone the example<\/h3>\n\n\n\n
git clone https:\/\/github.com\/ionic4-toolbox\/App-Calculator.git<\/code><\/pre>\n\n\n\n
Starting from new<\/h3>\n\n\n\n
Before starting, make sure that you are  using the current ionic version.If you are new to ionic , then look here<\/a> for an installation guide.<\/p>\n\n\n\n
npm -g install ionic@latest<\/pre>\n\n\n\n
Create App<\/h2>\n\n\n\n
ionic start Calculator sidemenu --type angular --no-link --no-git\ncd Calculator<\/pre>\n\n\n\n
Add a new page for our calculator<\/h4>\n\n\n\n
ionic generate page Calculator<\/pre>\n\n\n\n
Add new page to sidemenu<\/h3>\n\n\n\n
Add link to page in app.components.ts file<\/p>\n\n\n\n
  public appPages = [\n    { title: 'Home', url: '\/home', icon: 'home' },\n    { title: 'List', url: '\/list', icon: 'list' },\n    { title: 'Calculator', url: '\/calculator', icon: 'grid'\n    }\n  ];<\/pre>\n\n\n\n
Add calculation logic to typescript file<\/h3>\n\n\n\n
\n
4public appPages = [\n    { title: 'Home', url: '\/home', icon: 'home' },\n    { title: 'List', url: '\/list', icon: 'list' },\n    { title: 'Calculator', url: '\/calculator', icon: 'grid' }\n];<\/pre>\n<\/div><\/div>\n\n\n\n
Add html layout<\/h3>\n\n\n\n
The layout of our page consists of a header row containing the result and 4 rows containing the buttons of our calculator.<\/p>\n\n\n\n\n
Header<\/td><\/tr>\n
Row 1<\/td><\/tr>\n
Row 2<\/td><\/tr>\n
Row 3<\/td><\/tr>\n<\/table>\n\n\n\n
Each row for our keys is build with 5 columns.<\/p>\n\n\n\n\n\n    \n    \n    \n    \n    
Header<\/td>\n<\/tr>\n
Row1, Col1<\/td>\n    Row1, Col2<\/td>\n    Row1, Col3<\/td> \n    Row1, Col4<\/td>\n    Row1, Col5<\/td>\n<\/tr>\n
Row2, Col1<\/td>\n    Row2, Col2<\/td>\n    Row2, Col3<\/td> \n    Row2, Col4<\/td>\n    Row2, Col5<\/td>\n<\/tr>\n
Row3, Col1<\/td>\n    Row3, Col2<\/td>\n    Row3, Col3<\/td> \n    Row3, Col4<\/td>\n    Row3, Col5<\/td>\n<\/tr>\n
Row4, Col1<\/td>\n    Row4, Col2<\/td>\n    Row4, Col3<\/td> \n    Row4, Col4<\/td>\n    Row4, Col5<\/td>\n<\/tr>\n<\/table>\n\n\n\n
Add within the table cells, we place our buttons<\/p>\n\n\n\n\n\n    \n    \n    \n    \n    
Header<\/td>\n<\/tr>\n
7<\/td>\n    8<\/td>\n    9<\/td> \n    ×<\/td>\n    ÷<\/td>\n<\/tr>\n
4<\/td>\n    5<\/td>\n    6<\/td> \n    +<\/td>\n    –<\/td>\n<\/tr>\n
1<\/td>\n    2<\/td>\n    3<\/td> \n    x2<\/sup><\/td>\n    \u221ax<\/td>\n<\/tr>\n
C<\/td>\n    0<\/td>\n    ,<\/td> \n    1\/x<\/td>\n    =<\/td>\n<\/tr>\n<\/table>\n\n\n\n
We implement our layout with div’s instead of a html table. <\/p>\n\n\n\n
So every row is a<\/p>\n\n\n\n
<div class=\"row\">\n...\n<\/div><\/pre>\n\n\n\n
And within the row we define our buttons also as divs<\/p>\n\n\n\n
<div class=\"number\">\n   <span (click)=\"btnClicked('4')\">4<\/span>\n   <span (click)=\"btnClicked('5')\">5<\/span>\n   <span (click)=\"btnClicked('6')\">6<\/span>\n<\/div>\n<div class=\"symbol\"><span (click)=\"btnClicked('+')\">+<\/span><\/div>\n<div class=\"symbol\"><span (click)=\"btnClicked('-')\">-<\/span><\/div><\/pre>\n\n\n\n
The final html layout looks like this:<\/p>\n\n\n\n
<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-menu-button><\/ion-menu-button>\n    <\/ion-buttons>\n    <ion-title>Rechner<\/ion-title>\n  <\/ion-toolbar>\n<\/ion-header>\n<ion-content>\n  <div class=\"calculator\">\n    <div class=\"header\">\n      <div class=\"window\"><\/div>\n      <div class=\"input\"><span>\n          <ion-input type=\"text\" placeholder=\"0\" name=\"display\"\n                     [(ngModel)]=\"result\">\n          <\/ion-input>\n        <\/span><\/div>\n    <\/div>\n    <div class=\"keys\">\n      <div class=\"row\">\n        <div class=\"number\">\n          <span (click)=\"btnClicked('7')\">7<\/span>\n          <span (click)=\"btnClicked('8')\">8<\/span>\n          <span (click)=\"btnClicked('9')\">9<\/span>\n        <\/div>\n        <div class=\"symbol\"><span (click)=\"btnClicked('*')\">\u00d7<\/span><\/div>\n        <div class=\"symbol\"><span (click)=\"btnClicked('\/')\">\u00f7<\/span><\/div>\n      <\/div>\n      <div class=\"row\">\n        <div class=\"number\">\n          <span (click)=\"btnClicked('4')\">4<\/span>\n          <span (click)=\"btnClicked('5')\">5<\/span>\n          <span (click)=\"btnClicked('6')\">6<\/span>\n        <\/div>\n        <div class=\"symbol\"><span (click)=\"btnClicked('+')\">+<\/span><\/div>\n        <div class=\"symbol\"><span (click)=\"btnClicked('-')\">-<\/span><\/div>\n      <\/div>\n      <div class=\"row\">\n        <div class=\"number\">\n          <span (click)=\"btnClicked('1')\">1<\/span>\n          <span (click)=\"btnClicked('2')\">2<\/span>\n          <span (click)=\"btnClicked('3')\">3<\/span>\n        <\/div>\n        <div class=\"symbol\">\n          <span (click)=\"btnClicked('square')\">x<sup>2<\/sup><\/span>\n        <\/div>\n        <div class=\"symbol\">\n          <span (click)=\"btnClicked('squareroot')\">\u221ax<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"row\">\n        <div class=\"number\">\n          <span class=dull (click)=\"btnClicked('C')\">C<\/span>\n          <span (click)=\"btnClicked('0')\">0<\/span>\n          <span (click)=\"btnClicked(',')\">,<\/span>\n        <\/div>\n        <div class=\"symbol\">\n          <span (click)=\"btnClicked('reciproc')\">1\/x<\/span>\n        <\/div>\n        <div class=\"symbol action\">\n          <span (click)=\"btnClicked('=')\">=<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/ion-content><\/pre>\n\n\n\n
Add css definitions<\/h3>\n\n\n\n
html,\nbody {\n    width: 100\n    height: 100\n    margin: 0;\n    padding: 0;\n    font-family: \"Trebuchet MS\", Helvetica, sans-serif;\n    font-size: 28px;\n}\nbody {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: #f5f5f5;\n}\n.calculator {\n    margin: 20px;\n    widows: 100px;\n    border-radius: 10px;\n    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.5);\n    .header {\n        background-color: #000;\n        height: 120px;\n        border-radius: 10px 10px 0 0;\n        .window {\n            height: 15px;\n            display: flex;\n            justify-content: flex-start;\n            padding: 10px;\n            span {\n                width: 10px;\n                height: 10px;\n                border-radius: 50\n                margin-right: 5px;\n                cursor: pointer;\n                &.red {\n                    background-color: #ff5252;\n                }\n                &.yellow {\n                    background-color: #f5a623;\n                }\n                &.green {\n                    background-color: #73c21d;\n                }\n            }\n        }\n        .input {\n            background-color: #ff0300;\n            color: #ffffff;\n            padding: 10px 30px;\n            font-size: 28px;\n            span {\n                text-align: right;\n                color: #ffffff;\n            }\n        }\n    }\n    .keys {\n        background: linear-gradient(135deg, #3a3a3a, #000000);\n        height: 280px;\n        border-radius: 0 0 10px 10px;\n        font-size: 24px;\n        .row {\n            height: 70px;\n            display: flex;\n            flex-direction: row;\n            .number {\n                width: 75\n                display: flex;\n                color: #ffffff;\n                span {\n                    width: calc(100\n                    height: 70px;\n                    text-align: center;\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    user-select: none;\n                    cursor: pointer;\n                }\n            }\n            .symbol {\n                width: 25\n                background-color: #ffffff;\n                font-size: 34px;\n                span {\n                    width: 100\n                    height: 70px;\n                    text-align: center;\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    user-select: none;\n                    cursor: pointer;\n                }\n                &.action {\n                    background: linear-gradient(60deg, #ff0300, #ffa100);\n                    border-radius: 0 0 10px 0;\n                    color: #ffffff;\n                    box-shadow: 0 25px 60px -10px rgba(255, 10, 0, 0.5);\n                }\n            }\n        }\n    }\n}\n.dull {\n    font-size: 14px;\n    font-weight: bold;\n    color: #4a4a4a;\n}<\/pre>\n\n\n\n
Add javascript code for page<\/h3>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\n@Component({\n\tselector: 'app-calculator1',\n\ttemplateUrl: '.\/calculator.page.html',\n\tstyleUrls: ['.\/calculator.page.scss'],\n})\nexport class CalculatorPage implements OnInit {\n\tresult = \"\";\n\tconstructor() { }\n\tngOnInit() {\n\t}\n\tbtnClicked(btn) {\n\t\tconsole.log('CalculatorPage::btnClicked = ' + btn);\n\t\tif (btn == \"C\") {\n\t\t\tthis.result = \"\";\n\t\t} else if (btn == \"=\") {\n\t\t\tthis.result = eval(this.result);\n\t\t} else if (btn == \"squareroot\") {\n\t\t\tthis.result = Math.sqrt(eval(this.result)) + \"\";\n\t\t} else if (btn == \"square\") {\n\t\t\tthis.result = eval(\"(\" + this.result + \") * ( \" + this.result + \")\");\n\t\t} else if (btn == \"reciproc\") {\n\t\t\tthis.result = eval(1 + \"\/ (\" + this.result + \")\");\n\t\t} else {\n\t\t\tthis.result += btn;\n\t\t}\n\t}\n}<\/pre>\n\n\n\n
The final result<\/h3>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
Sources for this tutorial are here. Preparation Clone the example Starting from new Before starting, make sure that you are using the current ionic version.If you are new to ionic , then look here for an installation guide. Create App Add a new page for our calculator Add new page to sidemenu Add link to page in app.components.ts file Add calculation logic to typescript file Add html layout The layout of our page consists of a header row containing the result and 4 rows containing the buttons of our calculator. Header Row 1 Row 2 Row 3 Each row for our […]<\/p>\n","protected":false},"author":1,"featured_media":1720,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[98,35],"tags":[],"class_list":["post-1699","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic","category-ionic-4"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/12\/Bildschirmfoto-2018-12-27-um-16.54.23.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/1699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=1699"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/1699\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/1720"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=1699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=1699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=1699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}