This is a series of practice exercises to help you get better at working with JavaScript and the DOM.
- Take the file
one.html
and attach a JavaScript file that will add a click event listener todocument.body
. When the user clicks anywhere in the body, check thetarget
of the event and determine what thetagName
of the element that was clicked. As long as the target wasn't the body element, use theclone()
method to copy the clicked element andappend
it to thefooter
element. Content that is already in the footer should still remain. - Take the file
two.html
and attach a JavaScript file that will add a click event listener todocument.body
. When the user clicks on any element your click listener should toggle the CSS classbigger
for that element. - Take the file
three.html
and attach a JavaScript file that will add a click event listener todocument.body
. When the user clicks on any element your click listener function should check if the element has anextSiblingElement
. If it does, then remove the next sibling from the page. If it doesn't then it should check for apreviousSiblingElement
and remove it instead if it exists. - Starting with
four.html
attach a JavaScript file that has a click event listener for the section with the classproducts
. If thetarget
of the click is a div with the css classcard
, then the div should be moved into the section with the classcart
. A second click listener should be added to thecart
div. If the user clicks acard
that is inside thecart
div then thecard
should be returned to theproducts
section. (As an added challenge, try to put the card back in the original position.) - Starting with
five.html
attach a JavaScript file that has asubmit
event listener for the form on the page. The form has four buttons in the HTML. Each of the buttons will act as the submit button for the form. When the user clicks one of the submit buttons, the button will be the target for the event. After clicking any of the buttons, the data from the form will be used to create a paragraph element with the classstudent
. The paragraph should be added to the section with the matching class name. Eg: If the user clicks on theGryffindor
button then the paragraph should be added to thegryffindor
section. - Starting with
six.html
and load yoursix.js
file as a module so it can import the data fromsix.data.js
. Build new HTML content inside themain
element based on thedata
Array. All the objects have the propertiestag
,text
, andchildren
. Iftext
is empty then there is nothing to set as thetextContent
or append as a new TextNode. Tags likeimg
ora
will have other properties that are specific to them, and you will have to check for those. Inside thechildren
Array there could be other elements to append. Each child object will have a propertybeforeText
. If that is set totrue
then you should append the child element before thetext
from the parent. This can be done with theinsertBefore
orinsertAdjacentHTML
methods. - Starting with
seven.html
and loadingseven.js
, listen for the submit event from theform
. Based on the values from the form, generate and display random lucky numbers. Each number should be displayed in adiv
with the classlucky
so the CSS frommain.css
will apply. OR you can edit main.css and add your own CSS for each number.