eltonvs/web01_ex02.html

## web01_ex02.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animated Banner</title>
  <style>
    * {
      box-sizing: border-box;
    }

    :root {
      --banner-width: 400px;
      --banner-height: 50px;
      --banner-color: yellow;
      --square-width: 10px;
      --square-color: #000;
      --square-xpos: 0;
      --square-ypos: 0;
    }

    .banner {
      position: relative;
      width: var(--banner-width);
      height: var(--banner-height);
      background-color: var(--banner-color);
      text-align: center;
      overflow: hidden;
      margin: 10px 0;
    }

    .banner .text {
      line-height: var(--banner-height);
    }

    .banner .animated-square {
      position: absolute;
      top: var(--square-ypos);
      left: var(--square-xpos);
      width: 100%;
      height: 100%;
      background-color: var(--banner-color);
      border-left: var(--square-width) solid var(--square-color);
    }
  </style>
</head>
<body>
  <h1>Animated Banner</h1>

  <div class="banner">
    <div class="text">My text</div>
    <div class="animated-square"></div>
  </div>

  <script>
    let styles = window.getComputedStyle(document.body)
    let document_style = document.documentElement.style
    let banner_width = parseInt(styles.getPropertyValue('--banner-width'))

    let animation = setInterval(() => {
      square_xpos = parseInt(styles.getPropertyValue('--square-xpos'))
      if (square_xpos < banner_width) {
        document_style.setProperty('--square-xpos', ++square_xpos + 'px')
      } else {
        document.getElementsByClassName('animated-square')[0].style.display = 'none'
        clearInterval(animation)
      }
    }, 15)
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Animated Banner</title>
	<style>
	* {
	box-sizing: border-box;
	}

	:root {
	--banner-width: 400px;
	--banner-height: 50px;
	--banner-color: yellow;
	--square-width: 10px;
	--square-color: #000;
	--square-xpos: 0;
	--square-ypos: 0;
	}

	.banner {
	position: relative;
	width: var(--banner-width);
	height: var(--banner-height);
	background-color: var(--banner-color);
	text-align: center;
	overflow: hidden;
	margin: 10px 0;
	}

	.banner .text {
	line-height: var(--banner-height);
	}

	.banner .animated-square {
	position: absolute;
	top: var(--square-ypos);
	left: var(--square-xpos);
	width: 100%;
	height: 100%;
	background-color: var(--banner-color);
	border-left: var(--square-width) solid var(--square-color);
	}
	</style>
	</head>
	<body>
	<h1>Animated Banner</h1>

	<div class="banner">
	<div class="text">My text</div>
	<div class="animated-square"></div>
	</div>

	<script>
	let styles = window.getComputedStyle(document.body)
	let document_style = document.documentElement.style
	let banner_width = parseInt(styles.getPropertyValue('--banner-width'))

	let animation = setInterval(() => {
	square_xpos = parseInt(styles.getPropertyValue('--square-xpos'))
	if (square_xpos < banner_width) {
	document_style.setProperty('--square-xpos', ++square_xpos + 'px')
	} else {
	document.getElementsByClassName('animated-square')[0].style.display = 'none'
	clearInterval(animation)
	}
	}, 15)
	</script>
	</body>
	</html>