leahgarrett/event-loop-sample-soltuions.html Secret

## event-loop-sample-soltuions.html
<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            position: absolute;
            width: 100px;
            top: 0;
            left: 0;
        }
        body {
            height: 15000px;
        }
    </style>
</head>
<body>
    <h1>Welcome</h1>
    <p>This page is used for practicing DOM manipulation</p>
    <img src="https://avatars0.githubusercontent.com/u/583231?s=460&v=4">
    <div class="notice">Nothing to notice.</div>
    <script>

        let heading = document.querySelector("h1");
        let image = document.querySelector("img");
        window.addEventListener("click", function (event) {
            event.preventDefault();
            heading.innerHTML += "!";
            console.log('clicked');
        });

        let moveCounter = 0;
        let mouseX = 0;
        let mouseY = 0;
        let scrollLeft = 0;
        let scrollTop = 0;
        window.addEventListener("mousemove", function (event) {
            moveCounter++;
            if ((moveCounter % 3) == 0) {
                console.log(`${moveCounter}. moving ${event.screenX} ${event.screenY}`)
                moveImage();
                mouseX = event.clientX;
                mouseY = event.clientY;
            }
        });

        window.addEventListener("scroll", function (event) {
            scrollLeft = (window.pageXOffset !== undefined) ?
                        window.pageXOffset :
                        (document.documentElement || document.body.parentNode || document.body).scrollLeft;
            scrollTop = (window.pageYOffset !== undefined) ?
                window.pageYOffset :
                (document.documentElement || document.body.parentNode || document.body).scrollTop;

            moveImage();
           console.log(`scrolling ${scrollLeft} ${scrollTop}`);
        });

        function moveImage() {
            image.style.top = mouseY + scrollTop + 'px';
            image.style.left = mouseX + scrollLeft + 'px';
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	img {
	position: absolute;
	width: 100px;
	top: 0;
	left: 0;
	}
	body {
	height: 15000px;
	}
	</style>
	</head>
	<body>
	<h1>Welcome</h1>
	<p>This page is used for practicing DOM manipulation</p>
	<img src="https://avatars0.githubusercontent.com/u/583231?s=460&v=4">
	<div class="notice">Nothing to notice.</div>
	<script>

	let heading = document.querySelector("h1");
	let image = document.querySelector("img");
	window.addEventListener("click", function (event) {
	event.preventDefault();
	heading.innerHTML += "!";
	console.log('clicked');
	});

	let moveCounter = 0;
	let mouseX = 0;
	let mouseY = 0;
	let scrollLeft = 0;
	let scrollTop = 0;
	window.addEventListener("mousemove", function (event) {
	moveCounter++;
	if ((moveCounter % 3) == 0) {
	console.log(`${moveCounter}. moving ${event.screenX} ${event.screenY}`)
	moveImage();
	mouseX = event.clientX;
	mouseY = event.clientY;
	}
	});

	window.addEventListener("scroll", function (event) {
	scrollLeft = (window.pageXOffset !== undefined) ?
	window.pageXOffset :
	(document.documentElement \|\| document.body.parentNode \|\| document.body).scrollLeft;
	scrollTop = (window.pageYOffset !== undefined) ?
	window.pageYOffset :
	(document.documentElement \|\| document.body.parentNode \|\| document.body).scrollTop;

	moveImage();
	console.log(`scrolling ${scrollLeft} ${scrollTop}`);
	});

	function moveImage() {
	image.style.top = mouseY + scrollTop + 'px';
	image.style.left = mouseX + scrollLeft + 'px';
	}
	</script>
	</body>
	</html>