hw 07 3 - garevna/js-course GitHub Wiki

var collection = []

function enter ( event ) {
    event.target.style.backgroundColor = "#ffff0050"
}
function leave ( event ) {
    event.target.style.backgroundColor = "#ff00ff50"
}
function clickHandler ( event ) {
    event.stopPropagation()
    event.target.parentNode.appendChild ( event.target.firstChild )
    event.target.remove()
}

[ 1, 2, 3, 4, 5, 6, 7 ].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;
            border: dotted 1px yellow;
        `
        elem.title = tag
        elem.addEventListener ( "mouseover", enter )
        elem.addEventListener ( "mouseout", leave )
        elem.onclick = clickHandler
	}
)