Skip to content

Instantly share code, notes, and snippets.

@acidtone
Last active September 23, 2022 19:10
Show Gist options
  • Save acidtone/90355d3bdbcf770be4a642939f58cfd7 to your computer and use it in GitHub Desktop.
Save acidtone/90355d3bdbcf770be4a642939f58cfd7 to your computer and use it in GitHub Desktop.
JS Activity: Refactor into functions

JS Activity: Refactor into functions

The following files contain code that runs immediately on hard-coded variables. Refactor each of these files so that the code is reusable and portable.

Instructions

For each of the .js files in this Gist:

  • enclose the relevant code inside a function (everything below the comment in each file);
  • define each function so that it accepts the needed variables as arguments;
  • using the Window.prompt() method, define your arguments based on user input;
  • use Number.toFixed() to round numbers as needed.

Bonus Activity

Both the Tip Calculator and the GST Calculator deal with rates and percentages.

  1. In a separate file, write a function that will convert a rate (i.e. 0.05) into a percentage (5% as a string).
  2. Add this new file to index.html above the files that will use it.
    • Note: you will need to use return keyword to pass the new percentage string back to the main script.
  3. Refactor the Tip Calculator to use your function.
  4. Refactor the GST Calculator to use your function and include the GST percentage in its response like the Tip Calculator does.
let string = "mIsSIssIPPi";
// Enclose the following code in a function that accepts a string as a parameter
string = string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
console.log(string);
const subTotal = 40;
// Enclose the following code in a function that accepts subTotal as a parameter
const total = subTotal * 0.05 + subTotal;
console.log(`$${subTotal} plus GST is $${total}.`);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Refactor into Functions</title>
<script src="capitalize.js" defer></script>
<script src="to-celcius.js" defer></script>
<script src="num-squared.js" defer></script>
<script src="gst-calculator.js" defer></script>
<script src="tip-calculator.js" defer></script>
</head>
<body>
<h1>Open the web console to see some messages.</h1>
</body>
</html>
const num = 4;
// Enclose the following code the following code in a function that accepts a number as a parameter
const numSquared = num * num;
console.log(`${num} squared is ${numSquared}.`);
const billTotal = 40;
const tipRate = 0.18;
// Enclose the following code in a function that accepts subTotal and tipRate as parameters
const tip = billTotal * tipRate;
const tipPercentage = `${tipRate * 100}%`
console.log(`${tipPercentage} tip on $${billTotal} is $${tip}.`);
const tempF = 72;
// Enclose the following code in a function that accepts tempF as a parameter
const tempC = (5 / 9) * (tempF - 32);
console.log(`${tempF} degrees Fahrenheit is ${tempC} degrees Celcius`);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment