Lab: Javascript User Defined Functions
Goals
The goal of this lab is to practice your JS skills. Specifically, you will get practice with:
- variables and conditional statements
- reading from input elements on the web page
- writing on the web page
- defining functions with and without input parameters
- adding a responsive button on a web page
-
use the click event on a button to trigger the call of a function
Some reminders and background
-
Here is how you can add an
input box
on a web page, to ask for the user's first name:Please enter your first name: <input type="text" id="firstNameID"></input>
-
To read the value from the text input above:
document.getElementById("firstNameID").value;
The value from a text input is read as a String, and therefore it may need to be parsed into a number some times.
- Here is how you can add a
responsive button
on a web page:<input type="button" value="Click Me!" onClick = "reactToTheClick()">
In the tag above, the
reactToTheClick()
is considered to be a javascript function that defines the reaction to the user clicking on the button.
Task 0: Starting material
Please download lab13
folder from the download directory.
Task 1: Mirror Input Text
Open the page qAndA.html you downloaded in your browser as well as in your text editor.
Carefully study the html code, making a note of the names of the different text inputs as well as other elements characterized by an id. You will need to work with them in your js code.
The user is asked to enter a question and an answer in the two text inputs provided.
Once the "Update Page" button is clicked, both the Question and the Answer are mirrored at the bottom of the page. However, the size of the text for the mirrored Question and Answer, should be reverse-analogous to the length of the text: The longer the text for the question (or the answer) the smaller the text size should be. (more in the text task)
Your job in this task is to write a function, updatePage() to mirror the inputed question and answer to the area at the bottom of the page. The invocation of the function will be triggered when the user clicks the "Update Page" button.
Task 2: Adjust the Size of the Text
Now you need to write some js code to adjust the size of the mirrored text as it shows on the page.
In particular:
- when the question/answer has less than 10 characters, the size of the font should be 50pt.
- when the question/answer has more than 30 characters, the size of the font should be 20pt.
- when the question/answer has length between 10 and 30 characters, the size of the font should be an integer between 20 and 50pt, in reverse analogy to the length.
Write a function computeFontSizeForText(text) which computes and returns the size of the input "text", as described above. Make sure the returned value is an integer.
Here is how you can, in js, set the font size of an element to 30 points, let's say:
document.getElementById("xxxxxId").style.fontSize = 30pt
Can you figure out how you can set the background color of an element is js?