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
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
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
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
mouseOut() events. In the callback functions, remember to use
this to reference specific element that triggered the event.