Function Basic with Input

Simple Functions

Our goal is to learn about JavaScript functions and to review getting simple input from the user. Use the ListButton and Function Basics assignments to help you with portions of this assignment.

Get Started

Inside the javascripts-tests directory create function-input.html and function-input.js. Add a script statement to the head element of the HTML file. Use the script element to link in the JavaScript file. Create a link from your home page to function-input.html.

When declaring methods, use ES6 (fat arrow) syntax throughout.

The Key Steps

We want to create a program that looks, at minimum, like this

Function input ui

Create a window.onload = () => {} block as we have in previous programs. Just below it, create four functions as specified in this table:

Function Name Parmeters Formula
feetToInches feet feet * numberOfInchesInAFoot
milesToFeet miles miles * numberOfFeetInAMile
areaOfTriangle base, height area = base times height divided by two
areaOfCircle radius area = Math.PI * radius squared

For instance, feet to inches would look like this:


const feetToInches = (feet) => {
    return feet * 12;
}
            

To get the value of PI, use the constant Math.PI. For instance, seven + PI is 7 + Math.PI. Note that calculating the area of a triangle requires two parameters.

Show Results in Html

In function-input.html create an H1 element with the content Function Input.

Add four paragraph elements that contain a span. Add an appropriate caption to each paragraph. Give the spans the following IDs:

For instance, write something like what follows:

<p>
  <b>Feet to Inches</b>: 
  <span 
    id="feet-to-inches-display">
  </span>
</p>
            

If you want, the paragraph and span can be all on one line.

Buttons and Inputs

We are now going to put four buttons next to four inputs. Create a div for each button and input pair.

Set the IDs of the buttons to:

Set IDs of Input controls to:

Give them the appropriate content for the label of each button. For instance, the first would be Feet to Inches

In function-input.js, inside the window.onload method, respond to clicks on the button by calling all four functions and their methods and displaying the output in the appropriate paragraph element.

Recall that the Function Basics assignment contains hints on how to perform these tasks.

In particular, remember that you will need to ask the document to use the id to get the element for the:

For instance:


window.onload = () => {
    const feetToInchesAction = 
        document.getElementById('feet-to-inches-action');

    feetToInchesAction.onclick = () => {
        const feetToInchesInput = document.getElementById('feet-to-inches-input');
        const feetToInchesDisplay = document.getElementById('feet-to-inches-display');

        feetToInchesDisplay.textContent = feetToInches(feetToInchesInput.value);
    };
};

const feetToInches = (feet) => {
    return feet * 12;
};
                    
            

Styles

Create and link in a file called function-input.css with this content


    button {
        float: left;
        width: 150px;
    }
    
    input {
        float: left;
        width: 45px;
    }
    
    div {
        clear: both;
    }
            

If you want, style your buttons as you did in the List Button assignment. Add any other custom styling to the page that you want, but be sure all the styles you use are custom written by hand. Do not block copy CSS from some other project you find on the web, and do not use CSS properties that we have not discussed in class. (Okay, I might take a maximum one or two other properties, but only if you explain how they work in the paragraph you added at top of the HTML page.) In other words, I don't want you pasting in CSS that you don't completely understand, and I want you to stick exclusively, or almost exclusively, to the CSS properties we have discussed in class.

Turn it in

Push your repository. When you submit your assignment, tell the me the folder and file names you have used. (The folder and file names should, of course, be as specified above. If you have, however, gone off the res, then let me know.) You must provide a link to your page running on GitHub Pages. It's okay to include a link to your repository, in fact, I want you to do that. But also be sure to include a clickable link to your running pages. Use the Canvas Text page to provide these links.