Client-Side Web Development - Graded Assignment #5

1. Use VS Code to open files index.html and main.js, in which you completed the previous assignments.
2. Modify the file index.html as follows.
   1. Add a horizontal line (<hr>) below the other visible contents (but inside the Bootstrap container). This will be the second horizontal line in your file as you will have added one for the assignment in week 4.
   2. Below the line add a paragraph element and inside it put the following element:

      
      <textarea rows="5" cols="50" class="align-bottom" placeholder="Enter new paragraph text"></textarea>
      			    

      A textarea element works like an input element, in that you can access its value through the value property.
      
      Beside the textarea element add a button with the text Modify paragraph.
   3. Below the paragraph element add another paragraph element and inside it an input element and a button with text Change background colour.
   You can see what the resulting layout should roughly look like from the demonstration video linked below.
3. Write some code in the Javascript file and add the necessary event handler and element id in the HTML file so that, when the button Modify paragraph is clicked:
   • if the value entered in the textarea element is not an empty string, that text is used to replace the long paragraph text on the page (created in week 2)
   • if the value in the textarea element is an empty string, nothing happens
4. Write some code in the Javascript file and add the necessary event handler and element id in the HTML file so that, when the button Change background colour is clicked:
   • if the value entered in the input element is not an empty string, that string is interpreted as a colour name and the page background is set to that colour
   • if the value entered in the input element is an empty string, the page background is set to a random colour (the element you should change is the body element, which can be accessed in the DOM using the expression document.body)
   TIPS:
   • You can use the following function to get a random colour (you can copy and paste it from this page into your Javascript file):

     
     function getRandomColour() {
         return "rgb(" + Math.floor(Math.random() * 256) + ", " +
                         Math.floor(Math.random() * 256) + ", " +
                         Math.floor(Math.random() * 256) + ")";
     }
     			    

   • The property representing the background colour on an object is style.backgroundColor