hw 07 2

var collection = []

function over ( event ) {
    event.stopPropagation()
    event.target.style.backgroundColor = "#ffff0050"
}
function out ( event ) {
    event.stopPropagation()
    event.target.style.backgroundColor = "#ff00ff50"
}
function clickHandler ( event ) {
    event.target.remove()
}

[ "first", "second", "third", "fourth" ].forEach (
    function ( tag, index, arr  ) {
        var elem = ( collection.length === 0 ? 
                     document.body : 
                     collection [ collection.length - 1 ] )
            .appendChild ( document.createElement ( "div" ) )
        collection.push ( elem )
        elem.style = `
            width:  ${( arr.length - index ) * 50}px;
            height: ${( arr.length - index ) * 50}px;
            background-color: #ff00ff50;
        `
        elem.title = tag
        elem.addEventListener ( "mouseover", over )
        elem.addEventListener ( "mouseout", out )
        elem.onclick = clickHandler
	}
)