vladislavaSim/Homework13_1

## Homework13_1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HW</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 15px;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="holder">
        <div class="square"></div>
    </div>
<script src="main.js"></script>
</body>
</html>


//

const $square = document.querySelector('.square')
let isActive = false
let movingTimer;
let step = 1;
let x = 0;

$square.addEventListener('click', function () {
    if(isActive && movingTimer) {
        clearInterval(movingTimer)
    } else {
        movingTimer = setInterval(moving, 1)
    }
    isActive = !isActive
})

function moving() {
    if(x <= 0) {
        step = 1
    }
    if( x >= window.innerWidth - 100) {
        step = -1
    }
    x += step
    $square.style.left = x + 'px'
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>HW</title>
	<style>
	.square {
	width: 100px;
	height: 100px;
	background-color: red;
	position: absolute;
	top: 15px;
	left: 0;
	}
	</style>
	</head>
	<body>
	<div class="holder">
	<div class="square"></div>
	</div>
	<script src="main.js"></script>
	</body>
	</html>


	//

	const $square = document.querySelector('.square')
	let isActive = false
	let movingTimer;
	let step = 1;
	let x = 0;

	$square.addEventListener('click', function () {
	if(isActive && movingTimer) {
	clearInterval(movingTimer)
	} else {
	movingTimer = setInterval(moving, 1)
	}
	isActive = !isActive
	})

	function moving() {
	if(x <= 0) {
	step = 1
	}
	if( x >= window.innerWidth - 100) {
	step = -1
	}
	x += step
	$square.style.left = x + 'px'
	}