Tip calculator app

Hi Daniel,

First off I’d say that your result is great! It looks exactly like the design and works well. Well done!

I have taken look at your source code and I have a suggestion for your question about how to refactor your main.js file.

First, I see a lot of code inside your updateBill function and it’s not very readable. What you can do is you can extract every code inside an if or else if to another function. Example : Instead of :

if(foo) {
…foocode..
} else if (bar)
…barcode…
{

You can write as :

if (foo) {
 doFoo()
} else if (bar) {
 doBar()
}

This is more readable for the one who will read your code (your co-workers) and cleaner as it follow the principle of one function should only do one thing. Also, make sure your function name is meaningful and should be a verb.

Secondly, you can further improve your code by separating your code into several files, grouping similar functions and variables inside a file and making use of import and export statements.

For example you can split into three files : main.js for storing your global variables, updateBill.js for updating functions and utils.js for other functions. Then, you can export function to be available in another file. For example :

// updateBill.js
export function updateBill() {
  …doAwesomeThings()
}

// main.js
import { updateBill } from “./updateBill.js”

updateBill()

You can do this for every other function and group similar functions in one js file.

Hope it helps and good luck Daniel !