<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

	<body id="body">
		

		<script id="item" type="text/template">
			<div class="item-inner">
				<div class="left">__CharCode__</div>
				<div class="right">
					<div class="line name">__Name__</div>
					<div class="line value">__Value__</div>
				</div>
			</div>
		</script>
	</body>

</html>
(function() {
  var bodyEl, tpl;
  document.addEventListener('DOMContentLoaded', function() {
    bodyEl = document.body;//document.getElementById('body');
    tpl = document.getElementById('item');
    window.addEventListener('scroll', scrollHandler);
    ajaxReq();
  });

  function scrollHandler(scrollEvent) {
    var B = bodyEl, //B = document.body,
      DE = document.documentElement,
      O = Math.min(B.clientHeight, DE.clientHeight);

    if (!O) {
      O = B.clientHeight;
    }

    var S = Math.max(B.scrollTop, DE.scrollTop),
      C = Math.max(B.scrollHeight, DE.scrollHeight);
    if (O + S == C) {
      console.log('add');
      start = step;
      step += step;
      constructValute(start, step);
    }
  }

  var start = 0,
    step = 10;
  var valuteArr = [],
    valuteArrLength = 0;

  function constructValute(start, end) {
    var valuteArrLength = valuteArr.length;

    for (i = start; i < end; i++) {

      var itemEl = document.createElement('div');
      if (i < valuteArrLength) {
        var CharCode = valuteArr[i].CharCode;
        var Name = valuteArr[i].Name;
        var Value = valuteArr[i].Value;

        tpl_ = tpl.innerHTML.replace('__CharCode__', CharCode)
          .replace('__Name__', Name)
          .replace('__Value__', Value);

        itemEl.className = 'item';
        itemEl.innerHTML = tpl_;
        bodyEl.appendChild(itemEl);
      } else {
        console.log('stopeed add')
        break;
      }

    }
  };

  function ajaxReq() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.cbr-xml-daily.ru/daily_json.js');
    xhr.onload = function() {
      if (xhr.status === 200) {
        var responseText = xhr.responseText;
        var responseTextParsed = JSON.parse(xhr.responseText);
        var vauteList = responseTextParsed.Valute;

        Object.values(vauteList).forEach(function(obj) {
          valuteArr.push(obj);
        });
        constructValute(0, step);
      } else {
        console.log('Request failed.  Returned status of ' + xhr.status);
      }
    };
    xhr.send();
  };

}());
/* Styles go here */

body{
    padding: 0px;
}

	.item{
		width: 100%;
		margin-bottom: 10px;
	}

		.item-inner{
			border: 1px solid #ccc;
			padding: 10px;
			overflow: hidden;
		}

			.left{
				width: 90px;
				height: 90px;
				float: left;
				font-size: 2em;
				font-weight: bold;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;				
			}

			.right{
				width: calc(100% - 100px);
				float: right;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;		
				min-height: 90px;		
			}

				.line{
					width: 100%;
				}