The next step is to display the user input on the HTML page. The input data is stored in the array, so each element in the array will become a separate line of output on the web page. Eventually, we will ensure the output is all upper case, and that each line of text is a different, random color. Below is an example of the final output, assuming the user input a, b, c, and then finally nothing. To display the output, you will need to use another loop structure: for, while, or do...while. You choose. Before outputting to the browser, first, output to the console to ensure your looping works. >> Use an appropriate loop structure to loop through the input data array, and output each array item to the console. Now that you're working with the data, you might as well make adjustments to ensure each item is now displayed as upper case. >> Make coding changes to display the input data output to the console as all upper case content. Now that you know your loop and upper case coding works, you can now work on outputting the content to the HTML page. Although multiple solutions exist to solve this problem, you are required to use String concatenation to create a single string of text that contains all of the final output. You will use techniques you've used before to get a reference to the HTML output div, and update the content of the output div with this string of text. >> Update your code to concatenate all of the array input data, all converted to upper case, and output the combined text using querySelector(). Tip: You can use either textContent, or innerHTML. In the next section, you'll note that to get the additional HTML formatting to display in the output, you will need to use innerHTML. Did your text all come out on a single line? Probably. What can you do to solve that problem? Part 6: JavaScript - Updating the Output The output definitely does not look similar to the example output above. In order to solve this problem, you need to consider what the final HTML will look like, and then set that final HTML as your target. To separate data onto separate lines in HTML, you need to either use a block element (e.g. div, p, h1), or the line break element, br. You will use the line break. Tip: For this class, we will use the self-closing version of the break tag: . The break tag is a void element (i.e. will never have content to enclose), and self-closing is often required by more advanced JavaScript web app solutions. >> Use string concatenation to append a line break () after each input item. You will need to use a different property of the referenced div element to set the output. In the past, you've used textContent, but this property will not support additional format tags; instead, use innerHTML. See below. const ref = document.querySelector('#output'); // Get output div reference ref.innerHTML = stringOutput; // Use innerHTML to set the div element content, not textContent Your output should now appear on separate lines. The final update to the output is to display the output in different, randomly selected colors. To accomplish this change, we will declare an array of ten colors, and generate a random integer to select the color from the color array. This color will then be used in conjunction with the span tag, and an inline style using the color CSS property, to set each input color. >> Add an array of HTML color names to the startup function. The array variable must be a constant array, and named colors. The array must have ten color names selected from the W3Schools HTML Color Names (Links to an external site.) page. To accomplish the task of producing the correct HTML output, we need to visualize what the final HTML would like like. For example, given user-input of AAA, and a randomly selected color of Blue, below is the HTML we need to product. AAA >> Update your code to use a span tag, and an inline style to set the random color using getRandomInt, for each input item from the data array. You will continue to concatenate all of the text together to make a single string of text. After this step, your output should resemble the sample output above. Important Tip: You will undoubtedly not get the HTML correct the first time you attempt to loop, get a random color, and concatenate everything into a single string. See the next section about how to see the HTML div element contents.
Part 5: JavaScript - Displaying the Input
The next step is to display the user input on the HTML page. The input data is stored in the array, so each element in the array will become a separate line of output on the web page. Eventually, we will ensure the output is all upper case, and that each line of text is a different, random color. Below is an example of the final output, assuming the user input a, b, c, and then finally nothing.
To display the output, you will need to use another loop structure: for, while, or do...while. You choose. Before outputting to the browser, first, output to the console to ensure your looping works.
>> Use an appropriate loop structure to loop through the input data array, and output each array item to the console.
Now that you're working with the data, you might as well make adjustments to ensure each item is now displayed as upper case.
>> Make coding changes to display the input data output to the console as all upper case content.
Now that you know your loop and upper case coding works, you can now work on outputting the content to the HTML page. Although multiple solutions exist to solve this problem, you are required to use String concatenation to create a single string of text that contains all of the final output. You will use techniques you've used before to get a reference to the HTML output div, and update the content of the output div with this string of text.
>> Update your code to concatenate all of the array input data, all converted to upper case, and output the combined text using querySelector().
Tip: You can use either textContent, or innerHTML. In the next section, you'll note that to get the additional HTML formatting to display in the output, you will need to use innerHTML.
Did your text all come out on a single line? Probably. What can you do to solve that problem?
Part 6: JavaScript - Updating the Output
The output definitely does not look similar to the example output above. In order to solve this problem, you need to consider what the final HTML will look like, and then set that final HTML as your target.
To separate data onto separate lines in HTML, you need to either use a block element (e.g. div, p, h1), or the line break element, br. You will use the line break.
Tip: For this class, we will use the self-closing version of the break tag: <br />. The break tag is a void element (i.e. will never have content to enclose), and self-closing is often required by more advanced JavaScript web app solutions.
>> Use string concatenation to append a line break (<br />) after each input item. You will need to use a different property of the referenced div element to set the output. In the past, you've used textContent, but this property will not support additional format tags; instead, use innerHTML. See below.
const ref = document.querySelector('#output'); // Get output div reference
ref.innerHTML = stringOutput; // Use innerHTML to set the div element content, not textContent
Your output should now appear on separate lines.
The final update to the output is to display the output in different, randomly selected colors. To accomplish this change, we will declare an array of ten colors, and generate a random integer to select the color from the color array. This color will then be used in conjunction with the span tag, and an inline style using the color CSS property, to set each input color.
>> Add an array of HTML color names to the startup function. The array variable must be a constant array, and named colors. The array must have ten color names selected from the W3Schools HTML Color Names (Links to an external site.) page.
To accomplish the task of producing the correct HTML output, we need to visualize what the final HTML would like like. For example, given user-input of AAA, and a randomly selected color of Blue, below is the HTML we need to product.
<span style="color:blue;">AAA</span>
>> Update your code to use a span tag, and an inline style to set the random color using getRandomInt, for each input item from the data array. You will continue to concatenate all of the text together to make a single string of text. After this step, your output should resemble the sample output above.
Important Tip: You will undoubtedly not get the HTML correct the first time you attempt to loop, get a random color, and concatenate everything into a single string. See the next section about how to see the HTML div element contents.
Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 1 images
