Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active October 25, 2022 15:55
Show Gist options
  • Save acidtone/64c3c63e0ee7de3aa56adfc99deeeef8 to your computer and use it in GitHub Desktop.
Save acidtone/64c3c63e0ee7de3aa56adfc99deeeef8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Activity: Form fields and DOM output
Raw
README.md

JS Activity: Form fields and DOM output

The following files contain code that runs when a function is invoked. Refactor each of these files so that:

  • the initial argument values are submitted by the user using form fields;
  • the response is printed to index.html.

Instructions

For each of the .js files in this Gist:

  1. Create a new HTML file named after the respective .js file. For example, captialize.html should link to capitalize.js in a <script> element in the <head>;
  2. In this HTML file,
    • add an appropriate form field and <label> for each of the values the user will be submitting. Examples:
      • for a Number: 
        <label for="sub-total">Sub-Total: </label>
<input type="number" name="gst" id="sub-total">
      • for a String: 
        <label for="sub-total">Full Name:</label>
<input type="text" name="full-name" id="full-name">
    • Add a <button type="submit"> element to submit the data, if it's not already present.
    • Add a <p> element to store the response, if it's not already present.
  3. In the .js file:

    1. Assign form and paragraph to its own variable using document.querySelector():

      const form = document.querySelector('form');
const output = document.querySelector('.output')

    2. Assign supplied function to a submit event on the <form> using EventTarget.addEventListener():

      form.addEventListener('submit', clickHandler);
      • clickHandler can be renamed to the provided function name;

    3. Inside the clickHandler, assign form field data to the appropriate variable using form.FormElementId.value.

      const subtTotal = form.subtotal.value;

    4. Instead of using console.log, use Node.textContent to send the clickHandler response to a <p> element (for example) on the .html page.

      output.textContent = `some response with ${calculation}`

Bonus Activity

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

  1. Write a utility function that will convert a rate (i.e. 0.05) into a percentage (5% as a string).
    • Note: you will need to use return keyword to pass the new percentage string back to the calling script.
  2. Refactor the Tip and GST Calculators to use your function and include the GST/Tip percentage in its response.
Raw
capitalize.js
// Create form and output variables here
const capitalize = function() {
// Refactor to assign value from form field
let string = "mIsSIssIPPi";
string = string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
// Refactor to output response to paragraph element
console.log(string);
}
// Add `click` event listener to button here
Raw
gst-calculator.js
// Create form and button variables here
// Note: Fat arrow ES6 Syntax
const calculateGST = () => {
// Refactor to assign value from form field
const subTotal = 42;
const total = subTotal * 0.05 + subTotal;
// Refactor to output response to paragraph element
console.log(`$${subTotal} plus GST is $${total.toFixed(2)}.`);
}
// Add `submit` event listener to button here
Raw
index.html
<!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>Add your form elements here. </h1>
<p>See <a href="README.md">README.md</a>.</p>
<section>
<!-- Add form here -->
</section>
<section>
<!-- Replace content with `Element.textContent` -->
<p class="output">[Replace with form response]</p>
</section>
</body>
</html>
Raw
num-squared.js
// Create form and output variables here
// Fat arrow ES6 Syntax
const squareNum = () => {
// Refactor to assign value from form field
const num = 15;
const numSquared = num * num;
// Refactor to output response to paragraph element
console.log(`${num} squared is ${numSquared}.`);
}
// Add `submit` event listener to button here
Raw
tip-calculator.js
// Create form and output variables here
// Fat arrow ES6 Syntax
const calculateTip = () => {
// Refactor to assign value from form fields
const billTotal = 60;
const tipRate = 0.18;
const tip = subTotal * rate;
const tipPercentage = `${rate * 100}%`
// Refactor to output response to paragraph element
console.log(`${tipPercentage} tip on $${subTotal} is $${tip.toFixed(2)}.`);
}
// Add `submit` event listener to button here
Raw
to-celcius.js
// Create form and output variables here
const toCelcius = function() {
// Refactor to assign value from form field
const tempF = 72;
const tempC = (5 / 9) * (tempF - 32);
// Refactor to output response to paragraph element
console.log(`${tempF} degrees Fahrenheit is ${tempC.toFixed(1)} degrees Celcius`);
}
// Add `submit` event listener to button here
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment