<!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%;
}