{"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 […]<\/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}]}}