BekoBou/scale.html

## scale.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scale</title>
  </head>
  <body>
    <fieldset class="img-upload__scale  scale">
      <button type="button" class="scale__control  scale__control--smaller">
        Уменьшить
      </button>
      <input
        type="text"
        class="scale__control  scale__control--value"
        value="55%"
        title="Image Scale"
        name="scale"
        readonly
      />
      <button type="button" class="scale__control  scale__control--bigger">
        Увеличить
      </button>
    </fieldset>

    <script>
      "use strict";

      (function() {
        var start = 100;
        var step = 25;
        var max = 100;
        var min = 25;

        var changeValue = function(current, change) {
          var result = current + change;
          if (result > max) {
            return max;
          }

          if (result < min) {
            return min;
          }

          return result;
        };

        var listener = undefined;

        var addListeners = function(formElem, cb) {
          var scaleInput = formElem.querySelector(".scale__control--value");
          var scaleUp = formElem.querySelector(".scale__control--bigger");
          var scaleDown = formElem.querySelector(".scale__control--smaller");

          listener = function(evt) {
            var scale = parseInt(scaleInput.value, 10);
            if (evt.target === scaleDown) {
              scale = changeValue(scale, -step);
            }

            if (evt.target === scaleUp) {
              scale = changeValue(scale, step);
            }

            scaleInput.value = scale + "%";
            cb(scale);
          };

          formElem.addEventListener("click", listener);
        };

        var removeListeners = function(formElem) {
          formElem.removeEventListener("click", listener);
        };

        window.scale = {
          addListeners: addListeners,
          removeListeners: removeListeners
        };
      })();
    </script>

    <script>
      "use strict";
      (function() {
        var formElem = document.querySelector(".scale");
        window.scale.addListeners(formElem, function(scale) {
          console.log("from html with scale: ", scale);
        });

        window.scale.removeListeners(formElem);
      })();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Scale</title>
	</head>
	<body>
	<fieldset class="img-upload__scale scale">
	<button type="button" class="scale__control scale__control--smaller">
	Уменьшить
	</button>
	<input
	type="text"
	class="scale__control scale__control--value"
	value="55%"
	title="Image Scale"
	name="scale"
	readonly
	/>
	<button type="button" class="scale__control scale__control--bigger">
	Увеличить
	</button>
	</fieldset>

	<script>
	"use strict";

	(function() {
	var start = 100;
	var step = 25;
	var max = 100;
	var min = 25;

	var changeValue = function(current, change) {
	var result = current + change;
	if (result > max) {
	return max;
	}

	if (result < min) {
	return min;
	}

	return result;
	};

	var listener = undefined;

	var addListeners = function(formElem, cb) {
	var scaleInput = formElem.querySelector(".scale__control--value");
	var scaleUp = formElem.querySelector(".scale__control--bigger");
	var scaleDown = formElem.querySelector(".scale__control--smaller");

	listener = function(evt) {
	var scale = parseInt(scaleInput.value, 10);
	if (evt.target === scaleDown) {
	scale = changeValue(scale, -step);
	}

	if (evt.target === scaleUp) {
	scale = changeValue(scale, step);
	}

	scaleInput.value = scale + "%";
	cb(scale);
	};

	formElem.addEventListener("click", listener);
	};

	var removeListeners = function(formElem) {
	formElem.removeEventListener("click", listener);
	};

	window.scale = {
	addListeners: addListeners,
	removeListeners: removeListeners
	};
	})();
	</script>

	<script>
	"use strict";
	(function() {
	var formElem = document.querySelector(".scale");
	window.scale.addListeners(formElem, function(scale) {
	console.log("from html with scale: ", scale);
	});

	window.scale.removeListeners(formElem);
	})();
	</script>
	</body>
	</html>