Client-Side Web Development - Graded Assignment #8

This assignment must be completed with Javascript constructs covered in the module.
The HTML file should not be modified in any way except as specified below in step 3.

1. Use VS Code to open files index.html and main.js, in which you completed the previous assignments.
2. Write some code so that during page loading time an object is created and populated with key-value pairs. There should be one key-value pair for each button, with the button text representing the keys and the descriptions given in the array representing the values (matched by order of appearance):

   
   let buttonDescriptions = [
       "Adds a digit 1 to button one",
       "Changes the text of the long paragraph to uppercase characters",
       "Modifies the text of the long paragraph",
       "Changes the background to the specified colour, or to a random colour",
       "Changes the textual content of the bordered elements"
   ];
   		    

   The array must be used as given and declared within a function, rather than directly in the Javascript file. The created object must be declared directly in the Javascript file and visible to all functions.
3. Add the following at the bottom of the Bootstrap container element:

   
   <hr>
   <p><span></span></p>

4. Write some code in the Javascript file so that when the mouse enters a button, the button's description is displayed in the newly added span element. When the mouse exits the button, the span element should revert to being empty.