Create calculator using mithril

Manish Champaneri — Fri, 25 Oct 2019 05:44:38 +0000

What you are building is this : https://xp4xo.csb.app/

Table of content

Setup basic scaffold for calculator appliaction
Mount mithril to the mounting point using m.mount
Preapare UI for our calculator
Create logic for arhitmatic operators & Inputs
Live example hosted on codesandbox

# Setup basic scaffold for calculator appliaction{#setup-basic-scaffold-for-calculator-application}

Make HTML page having basic html tags and having mithril cdn within it. Also make sure to add a mounting point to the page which we will be using to inject our calculator code afterwards.

<html>
  <head> 
    <title> Calculator using mithril </title>
    <script src="https://unpkg.com/mithril/mithril.js">
    </script>
  </head>
  <body>
     <!-- Mounting point of calculator -->
     <div id='app'>
  </body>
</html>

# Mount mithril to the mounting point using m.mount {#mount-mithril-to-the-mounting-point-using-m-mount}

We will be using m.mount function here to render our application.

In hello world example we have used m.render function which is internally used by m.mount function. You can find comparision between m.mount vs m.render here.

Signature of m.mount function

m.mount( mountingPoint , mithrilComponent )

Parameter	Value
mountingPoint	Dom element where you want to mount mithril appliaction
mithrilComponent	Mithril component you want to mount to the dom

Mount mithril to div with id 'app' using m.mount

Mithril component is actully an object. An object which have mithril life-cycle methods and view method have defined in it.

var mountingPoint = document.getElementById('app')
m.mount ( mountigPoint, { 
  view() { 
    return m('Hello') 
  }
)

Let's assing mithril component to a variable and then pass it as paramter to make this code more readable.

var mithrilComponent =  { 
  view() { 
    return m('Hello') 
  }
}
var mountingPoint = document.getElementById('app')
m.mount ( mountigPoint ,  mithrilComponent )

# Preapare UI for our calculator{#prepare-ui-for-our-calculator}

We have prepared mounting point and rended a component for verification. Now let's create basic UI for our preety simple calculator.

var calculatorComp = {
    view() {
      return m("div", [
        m("table", [
          m("tr", [
             m("td",{
                  colspan: 4,
                  style: "width:100%;text-align:right; border:1px solid #ccc"
                },
                m("lable", { style: "width:100%,text-align:right" }, "0")
               )
            ]),
            m("tr", [
              m("td", m("button", "1")),
              m("td", m("button", "2")),
              m("td", m("button", "3")),
              m("td", m("button", "+"))
            ]),
            m("tr", [
              m("td", m("button", "4")),
              m("td", m("button", "5")),
              m("td", m("button", "6")),
              m("td", m("button", "-"))
            ]),
            m("tr", [
              m("td", m("button", "7")),
              m("td", m("button", "8")),
              m("td", m("button", "9")),
              m("td", m("button", "*"))
            ]),
            m("tr", [
             m("td", { rowspan: 2 }, m("button", "0")),
             m("td", m("button", "=")),
             m("td", m("button", "/"))
           ])
         ])
       ]);
    }
 };

# Create logic for arhitmatic operators & input{#create-logic-for-arithmatic-operators-and-inputs}

Now we need to define logic to process input according to operators. We will be using component's objects property to store our data.

var calculatorComp = {
  previousInput: "0",
  currentInput: "0",
  currentResult: "0",
  previousOperator: "+",
  . . .

We will define to functions one to handle on click events of digit buttons and one for click event of operators

numberButtonClick(digit) {
  if (
    this.currentInput == 0 ||
    this.currentInput == this.currentResult
  ){
      this.currentInput = digit.toString();
    } else {
      this.currentInput = this.currentInput + digit.toString();
   }
},

operatorButtonClick(operator) {
  if (this.currentResult != this.currentInput) {
   this.previousInput = this.currentInput;
  } else {
    this.previousInput = 0;
  }

  switch (this.previousOperator) {
     case "+": {
     this.currentResult =
     parseInt(this.currentResult) + parseInt(this.previousInput);
     break;
   }
   case "-": {
      this.currentResult =
      parseInt(this.currentResult) - parseInt(this.previousInput);
      break;
   }
   case "*": {
      this.currentResult =
      parseInt(this.currentResult) * parseInt(this.previousInput);
      break;
   }
   case "/": {
      this.currentResult =
      parseInt(this.currentResult) / parseInt(this.previousInput);
      break;
  }
  default: {
      console.log(this.currentResult);
  }
 }
 this.currentInput = this.currentResult;
 this.previousOperator = operator;
},

Now only thing is left is to assign this methods to buttons we have created

// Assigning digit button click event
m("td",
   m("button",
       { onclick: e => {
           e.preventDefault();
           this.numberButtonClick(1);
            m.redraw();
       }
     },"1"
   )
),

// Assigning operatorbutton click event
m("td",
   m("button",
       { onclick: e => {
           e.preventDefault();
           this.operatorButtonClick("+");
            m.redraw();
       }
     },"1"
   )
),

It would be too long if I write whole code here ;) , so instead see whole code from example hosted on codesandbox shown in next section.

# Live example hosted on codesandbox{#live-example-hosted-on-codesandbox}

https://codesandbox.io/embed/hello-world-example-xp4xo

Mithril Hello World Example

Manish Champaneri — Thu, 24 Oct 2019 06:18:40 +0000

Table of content

Introduction
Prepare basic HTML
Include Mithril library
Add mounting element for Mithril in dom and mount Mithril there
Render "Hello world" by Injecting Hello world inside mounting element

# Introduction

Hello world program is best starting point to learn new programming language or framework.

This hello world program will explain how to do very basic minimal setup to use Mithril and then will end with displaying "Hello world" printed on screen.

# Prepare basic HTML

Create html file with the basic tags of html, head, title, and body.

<html>
    <head>
          <title>Mithril Hello World Example</title>
    </head>
    <body>   
   </body>
</html>

# Include Mithril library

We will be using Mithril CDN for our example.

<head>
    <script src="https://unpkg.com/mithril/mithril.js">
    </script>
</head>

# Add mounting element for Mithril in dom and mount Mithril there.

We will be using div element with id app as mounting point of our Mithril app.

<body>
   <div id="app"></div>
</body>

Now we have to inform Mithril, that we want to use the element with id 'app' has to be used as mounting point of Mithril.
In order to do that we have to select that dom element from dom.

 var app = document.getElementById("app")

After adding mounting point our code will look like.

I am saying it as mounting point because mithril actually mounts dom elements to that dom element as child and you can have multiple mounting points for multiple mithril rendering functions. See example multiple mounting points

<body>
    <div id="app"></div>
    <script type="text/javascript">
          var app = document.getElementById("app")
    </script>
</body>

# Render "Hello world" by Injecting Hello world inside mounting element

We have added Mithril library and also have a mounting point for it. Let's render simple "Hello world" by injecting it inside mounting point.

Here m represents Mithril object.
We are using m.render function for rendering.

<!DOCTYPE html>
<html>
  <head>
    <title>Mithril Hello World Example</title>
    <script src="https://unpkg.com/mithril/mithril.js"></script> 
    </head>
    <body>
      <div id="app"></div>
        <script type="text/javascript">
          var app = document.getElementById("app");
          m.render(app, "Hello world");
        </script>
    </body>
</html>

# Example

Take a look at live example hosted on codesandbox !
Codesandbox Example

DEV Community: Manish Champaneri

Create calculator using mithril

Table of content

# Setup basic scaffold for calculator appliaction{#setup-basic-scaffold-for-calculator-application}

# Mount mithril to the mounting point using m.mount {#mount-mithril-to-the-mounting-point-using-m-mount}

# Preapare UI for our calculator{#prepare-ui-for-our-calculator}

# Create logic for arhitmatic operators & input{#create-logic-for-arithmatic-operators-and-inputs}

# Live example hosted on codesandbox{#live-example-hosted-on-codesandbox}

Mithril Hello World Example

Table of content

# Introduction

# Prepare basic HTML

# Include Mithril library

# Add mounting element for Mithril in dom and mount Mithril there.

# Render "Hello world" by Injecting Hello world inside mounting element

# Example