1. Create: A Factorial Calculator
The "factorial" operation (written as "!N" where N is some value) in mathematics is an operation defined as follows:
N! = N * N-1 * N-2 * N-3 * ... * 1
Such that:
1! = 1
2! = 2 * 1 = 2
3! = 3 * 2 * 1 = 6
4! = 4 * 3 * 2 * 1 = 24 etc.
This is a fairly powerful operation, and it grows VERY quickly with the size of its input. Factorial is known to be difficult to calculate directly. It is more straightforward to calculate factorials by looping. Create a new webpage designed to calculate this with the following elements:
.An "input" with type "number"
.A button
.A header (H1 is fine) for feedback
Make sure to give each of these items an ID so you can access them. Next, write a function (for) in a script tag that does the following:
-Retrieve the user's "value" from the text input element on the page. Remember to use parseInt() to convert that value into an integer!
-Create a variable to store the "running total" of the factorial operation. For example, to compute, 5!, you'll need to:
.multiply 1*2 (2)
.multiply that result by 3 (2 * 3 = 6)
.multiply that result by 4 (6 * 4 = 24)
.finally, multiply that result by 5 (24 * 5 = 120). You might see how this translates to a loop-- a single value that increases by 1 at each, an end condition, and a repeated operation.
.Write a loop that will calculate N! for any given N (given by the user's text box input). In the loop, you should update the running total by multiplying it by each new value of the loop.
Finally, after the loop is finished calculating the factorial value, output it to the header you created for feedback by altering its innerHTML value.
-Finally, connect that function to the button's "onclick" attribute. You've now created a factorial calculator using loops in javascript!
2. Complete: A script to apply styles.
This page contains 50 paragraphs of placeholder text. It also contains a style class named "card" waiting to be applied to each of these. Instead of adding "class = 'card'" to every one of these paragraphs by hand, let's do it using javascript loops. Notice that the paragraphs are stored inside a div with the id "content". We can access an array containing ALL of these paragraphs using this div's "children" property. (e.g., document.getElementById("content").children)
Create a new javascript file named "addStyles.js".
Write a for/of loop that: uses the "content" div's "children" property.
In the loop, alter each paragraph's className property to refer to the new "card" style defined in the head.
3. Correct: a self-building webpage
Similar to the demo, this page constructs a webpage from elements stored in an array containing the United States Constitution. Right now, however, it's not doing so very elegantly-- if you click the "build page" button, it only constructs enormous "H1" elements. Notice in the constitution.js file that it actually contains the element names each element SHOULD be using. This is actually a nested array-- an array whose elements contain smaller arrays. Each of these smaller arrays contains two items: an element type, and the content to insert into that element. Currently, this code constructs exclusively "H1" elements, and just dumps the entire sub-array into it. Correct this code such that it will build the correct element types, with the correct content, by referencing the contents of the sub-arrays.