Quiz 2

Solution

Consider the code piece defined below.

let b = { color:['black', 'pink'], transform:['scale(1)', 'scale(2)']}
e.animate(b, 1500)  //e is an HTMLElement

a) Explain what it does.

Animation within 1.5 seconds:
text color of e is changed from black to pink
x, y scale of e from normal to twice as large

b) Draw an object diagram for b.

(bunu sadece iki kişi tam yaptı: Emine ve Elanur)

c) Write down the type and the value of b.transform[0]

string  'scale(1)'

d) Do the same animation using CSS.

e.style.transition = 'all 1.5s'
e.style.color      = 'pink'
e.style.transform  = 'scale(2)'

e) Modify the code so that the scale factor is back to its initial value after 3 seconds.

b.transform.push('scale(1)')  //Samed Özkan
e.animate(b, 3000)

f) Show how to center e using CSS.

e.style.position = 'fixed'  //or 'absolute' 
e.style.left  = '30%'
e.style.width = '40%'

g) Put the key-value pairs in b into Map m. How do you get b.color[1] from m?

let m = new Map()
for (k in b) m.set(k, b[k])
//m has only two entries
m.get('color')[1]

Dev tools içinde bunların hepsini deneyin