eltonvs/web01_ex03.html

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

    :root {
      --rectangle-width: 200px;
      --rectangle-height: 50px;
      --rectangle-color: #000;
      --rectangle-text: "default";
      --rectangle-text-color: #fff;
    }

    .resizable-rectangle {
      width: var(--rectangle-width);
      height: var(--rectangle-height);
      background-color: var(--rectangle-color);
      transition: all 100ms ease-in-out;
    }

    .resizable-rectangle::before {
      content: var(--rectangle-text);
      display: block;
      color: var(--rectangle-text-color);
      text-align: center;
      line-height: var(--rectangle-height);
      transition: all 100ms ease-in-out;
    }
  </style>
</head>
<body>
  <h1>Resizable Rectangle</h1>

  <div class="resizable-rectangle"></div>

  <script>
    let styles = window.getComputedStyle(document.body)
    let document_style = document.documentElement.style
    let rectangle_width_var = '--rectangle-width'
    let rectangle_height_var = '--rectangle-height'
    let rectangle_text_var = '--rectangle-text'
    let rectangle_color_var = '--rectangle-color'

    let update_rectangle = (width, height) => {
      let rectangle_w = Math.random() * (width - 150) + 150,
          rectangle_h = Math.random() * (height - 30) + 30
      document_style.setProperty(rectangle_width_var, rectangle_w + 'px')
      document_style.setProperty(rectangle_height_var, rectangle_h + 'px')
      document_style.setProperty(rectangle_text_var, `"${width}px X ${height}px"`)
    }

    let update_color = (x, y) => {
      let r = x%256,
          g = (x*y)%256,
          b = y%256
      document_style.setProperty(rectangle_color_var, `rgb(${r}, ${g}, ${b})`)
    }

    // Update rectangle size/text when page load at first time
    update_rectangle(window.innerWidth, window.innerHeight)

    window.addEventListener('resize', e => update_rectangle(window.innerWidth, window.innerHeight))
    window.addEventListener('mousemove', e => update_color(e.clientX, e.clientY))
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Resizable Rectangle</title>
	<style>
	* {
	box-sizing: border-box;
	}

	:root {
	--rectangle-width: 200px;
	--rectangle-height: 50px;
	--rectangle-color: #000;
	--rectangle-text: "default";
	--rectangle-text-color: #fff;
	}

	.resizable-rectangle {
	width: var(--rectangle-width);
	height: var(--rectangle-height);
	background-color: var(--rectangle-color);
	transition: all 100ms ease-in-out;
	}

	.resizable-rectangle::before {
	content: var(--rectangle-text);
	display: block;
	color: var(--rectangle-text-color);
	text-align: center;
	line-height: var(--rectangle-height);
	transition: all 100ms ease-in-out;
	}
	</style>
	</head>
	<body>
	<h1>Resizable Rectangle</h1>

	<div class="resizable-rectangle"></div>

	<script>
	let styles = window.getComputedStyle(document.body)
	let document_style = document.documentElement.style
	let rectangle_width_var = '--rectangle-width'
	let rectangle_height_var = '--rectangle-height'
	let rectangle_text_var = '--rectangle-text'
	let rectangle_color_var = '--rectangle-color'

	let update_rectangle = (width, height) => {
	let rectangle_w = Math.random() * (width - 150) + 150,
	rectangle_h = Math.random() * (height - 30) + 30
	document_style.setProperty(rectangle_width_var, rectangle_w + 'px')
	document_style.setProperty(rectangle_height_var, rectangle_h + 'px')
	document_style.setProperty(rectangle_text_var, `"${width}px X ${height}px"`)
	}

	let update_color = (x, y) => {
	let r = x%256,
	g = (x*y)%256,
	b = y%256
	document_style.setProperty(rectangle_color_var, `rgb(${r}, ${g}, ${b})`)
	}

	// Update rectangle size/text when page load at first time
	update_rectangle(window.innerWidth, window.innerHeight)

	window.addEventListener('resize', e => update_rectangle(window.innerWidth, window.innerHeight))
	window.addEventListener('mousemove', e => update_color(e.clientX, e.clientY))
	</script>
	</body>
	</html>