Clean Calc

This project is designed to illustrate one of, if not the most, fundamental principle of software design:

SEPARATION OF CONCERNS

"Separation of concerns" means that each file, each piece of code, has one simple and well defined purpose. In this project you will be exploring the separation of UI framework, input handling, and application logic. You will build a basic calculator object then use that same object to take arguments from the terminal and the browser. The concerns are:

UI - command line, HTML
Handler - process.argv, event listeners
Logic - the cleancalc object

It is very important that you build your calc object with exactly the property names, arguments, and return values specified. Doing this is called "developing to an interface". If you do this correctly you will be able to replace anyone's cleancalc object with yours and your application will continue working. The magic of software design!

Understanding this principle will help with testing, development scheduling, collaboration, maintenance, ... everything. In our experience, understanding separation of concerns is the most important thing a new programmer can learn. Far more important than learning new libraries, powerful devtools, or even being good at solving programming challenges.

So if this project feels too easy and you find yourself wanting to make it more complicated, remember that the code isn't the point of this project. The design is the point. Pay attention to how we use specs to define and develop the calculator, and how we integrate that object into the HTML.

To see how well you did, go to the "cleancalc" channel on Slack to share objects. Try swapping out your object for someone else's, if your application still works you both did it right. There is no other way to know.

Learning Objectives

Separation of concerns
3 layer app architecture
Developing from specs
Logic vs. Framework
Basic collaboration (trading calc objects)
Basic OOP

3 Layered Architecture

TOP

Specifications

This project has several steps to it

Build an object to match these specs.
Write a JS file to take command line arguments and pass them into your calculator.
- Your three layers are:
  1. UI - the terminal
  2. Handler - process.argsv & console.log
  3. Logic - Cleancalc Object
- You will write a single JS file that takes in command line args, passes them through the calc Object, and prints the result to the console.
Reuse your calc object in a basic browser app. The event handlers will take the user's input, pass it through the calc object, and write the results to the DOM.
- Your three layers: a. UI - the browser b. Handler - event listeners & DOM methods c. Logic - Cleancalc Object
- Each event listener will only call the calc object once, and will only ever call the operate() method:
```
      ...
      // get user input from the DOM
      let result = cleancalc.operate(user_operation, arg1, arg2);
      // write 'result' into the DOM
      ...
```
- Your project should have this structure:
  - index.html
  - /public
    - hanlder.js
    - cleancalc.js
Make a repo for this project and put it on your portfolio.
- Gh-pages demo
- README
  - Description of app's behavior
  - How to use the app
  - Project structure
  - Specs for your calc
  - Link to a Gist with your finished calc object
- Tests for the calc object
- Source code for every step you completed in a separate folder
Go to Slack and trade Gists. See what happens if you replace your cleancalc.js with someone else's. Does it make your app crash? (This is called dependency injection.)

More Practice:

Revisit your completed CodeWar repositories. Add UI and a handler to them so users can run your solution with their own arguments directly from Gh-Pages.

TOP

Resources

Cleancalc video series:

Separation of Concerns:

Programming Concepts:

Abstractions
Procedural Programming
Basic OOP in Js
From procedural to OOP. An outstanding video.
Event-Driven Programming

JavaScript Objects:

Process.argv:

DOM:

FreeCodeCamp. Complete the jQuery exercises if you haven't yet.
w3 Event Listeners
Building an Addition UI

TOP

Closing Thoughts:

8. Separation of Concerns