JS.Events

JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.

TASK 1

Output the coordinates of the mouse relative to the block at the moment the mouse cursor moves inside the block. Coordinates display under the block.

TASK 2

Create a div block, set the image of a closed folder as the background image. Add an event that is executed when double clicking on a block and replaces the background of the block with an image of an open folder

TASK 3

Add 300-400 square-sized divs to a document with side sizes of 30px and background color. Add items by using the loop. Add an event when you hover the mouse, which will round these blocks using border-radius to the circle. To slow down the rounding effect in CSS, you can add a transition.

TASK 4

Create a div with dimensions of width - 100%, height 250px. Below add 4-5 images with the same classes, different sizes. Add an event that, when you click on an image, set it with the background of a div block with the background-size: contain property.

TASK 5

Create a 50x50px block. Add a click event, so that with each click on the block it moves back 100px from the previous position.

TASK 6

Modify task 7. Add three radiobutton. When you select the first, the bordered class is turned on, when the second is selected, the bordered is turned off and the striped is turned on, when the third is selected, the highlight is turned on and the striped is turned off.

TASK 7

Resize image by clicking the mouse. Task 2. Change the transparency of the image by clicking on the mouse by 10%. Subsequent clicks increase transparency in 10% increments.