js

Question 1

how to check a click is touch or mouse click

Answer 1

onclick => (e) => e.type === “touchdown”

Question 2

how to get the x position in touch

Answer 2

(e) => e.touches[0].clientX

Question 3

how to get the node of clicked element

Answer 3

(e) => element = e.target

Question 4

how to style an element

Answer 4

element.style.nameOfStyle = “string”

Question 5

what it selects ? document.getElementsByClassName(“item”)

Answer 5

return an array

Question 6

how to get the class name of a fired event from event Listener

Answer 6

e.target.className

Question 7

target vs currentTarget

Answer 7

Basically, events bubble by default so the difference between the two is:

target is the element that triggered the event (e.g., the user clicked on)
currentTarget is the element that the event listener is attached to.

Question 8

how to transfer the id via in an event

Answer 8

in sender
event.dataTransfer.setData( ‘text/plain’, event.target.id)
in the receiver
event.dataTransfer.getData(“text”)

Question 9

200 < x < 500 ?

Answer 9

return x >= min && x <= max

Question 10

how to map array of the nodelist

Answer 10

Array.from(nodelist).map

Question 11

we have a random number of items in a container, we need to define an event listener on them, how we can get the active item

Answer 11

if ( e.target !== e.currentTarget ) // make sure that the item is not container itself
actvieItem = e.target

Question 12

append vs appendChild

Answer 12

.append accepts Node objects and DOMStrings while .appendChild accepts only Node objects
.append does not have a return value while .appendChild returns the appended Node object
.append allows you to add multiple items while appendChild allows only a single item

Question 13

Object.assign(target, …sources)

Answer 13

Object.assign() is used for cloning an object.

Object.assign() is used to merge object with same properties.