Santosh Rai

Santosh Rai

Full Stack Engineer | RPA Engineer

Simple calculator in javascript using MVC pattern

By Santosh Rai1 min read

Learn how to build a calculator app using the Model-View-Controller design pattern in vanilla JavaScript

Simple calculator in javascript using MVC pattern

What do I want to do?

I want to write a simple calculator app with plain JavaScript using a Model-View-Controller design pattern.

Check out Demo

Process

Creating 3 files only

  • index.html: It consists of a single root element only in the body tag.
  • style.css: It has styling for calculator.
  • script.js: It consists of model, view and controller classes.

What the heck is the design pattern?

In the programming world, programmers talk about things like singletons, mvc instead of basic terms like int, and arrays.

I am not a big fan of this but you will see many different design patterns used in software applications.

In definition Design pattern Wikipedia

A design pattern is the reusable form of a solution to a design problem.

What is MVC?

MVC(Model View Controller) is one of the popular design patterns.

  • model: application's data objects are stored
  • view: User Interface
  • controller: decision maker which is linked between model and view, such as clicking

Conclusion

Hope it helps you to understand MVC. Happy Coding