Quiz 7 DOM manipulation

Please copy and paste the code to the p5 web editor to do the following questions.

1. Write the code to implement the sketch below. First, create a p element. Then use the position() function to update the element's xy position. Then use html() to update its content. Finally, use style() to change its background color and add padding.

2: Create a button element. Attach a callback function to the button's mousePressed() event. In the callback function, set a random background color.

3: Create a slider element that controls the size of an ellipse.

4: Create an input and a p element. Attach a callback function to the input element's input() event. In the callback function, update p element's content. See input event reference for more.

5: Create a p element. Attach callbacks to the p element's mouseOver() and mouseOut() events. In the callback functions, update p element's content.

6. Instead of making a paragraph element with createP(), you can also use select() to access existing elements written in the html file. Write the code for the above sketch. Write a p element in index.html> with the id "apple." Use select() to access the element and update its x position sketch.js.

7. Write the code for the above sketch. In index.html, write an h1 element with the text 'A To-Do List' and a ol element with the id "todolist." Create a button element. Attach a callback named addItem to the button's mousePressed() event. In addItem(), add one li element as a child to the ol element by using parent().

8. Write a program that implements the above sketch. Create multiple p elements and set their x,y positions in a grid. Attach callback functions to each element's mouseOver() and mouseOut() events. In the callback functions, remember to use this to reference specific element that triggered the event.