Client-Side Web Development - Graded Assignment #4

  1. Use VS Code to open files index.html and main.js, in which you completed the first three assignments.
  2. In the file index.html add a horizontal line (<hr>) below the other visible contents (but inside the Bootstrap container). Below the line add two buttons, one called Change one and another one called Text to uppercase.
  3. Write a function in main.js and add an event handler and an id in index.html (each to the appropriate element) to implement the following behaviour:
    1. when the button Change one is clicked, the element with text "one" is modified to read "1" instead
    2. on subsequent clicks, a "1" is added, so that after the second click the text on the element is "11", after the third it is "111" and so on
    Start by declaring a variable outside of the function with
    
    let onesString = "";
    		    
    When called, the function should append a "1" to onesString and then use onesString to set the contents of the element that is being modified.
  4. Write a function in main.js and add an event handler and an id in index.html (each to the appropriate element) to implement the following behaviour: when the button Text to uppercase is clicked, the text in the long paragraph is displayed entirely in uppercase. The function must read the contents of the paragraph and modify it - not use a hard-coded version of the text.

 

For a video demonstrating the required behaviour click here.

For information on submission deadline and grading of this assignment see the the Schedule and Notes page, below the table.