AppLoidx/First-part-solution.html

## First-part-solution.html
<!DOCTYPE html>
<html>
<head>
	<title>Solution</title>
	<style type="text/css">
		.old-message {
			background-color: grey;
		}
		.new-message {
			background-color: green;
		}
	</style>
</head>
<body>
	<div style="width: 200px; height: 400px; overflow-y: scroll;" id='content'>
		<div class="old-message message">Nyan Nyan</div>
	</div>


	<script type="text/javascript"> // just init method, don't see this
		let contentDiv = document.getElementById('content');
		let i = 35;
		while (i > -1){
			msg = document.getElementsByClassName('message')[0];
			let newMessage = msg.cloneNode(true);
			newMessage.innerHTML = newMessage.innerHTML + i;
			contentDiv .appendChild(newMessage);
			i = i - 1;
		}
		contentDiv.scrollTop = content.scrollHeight;
	</script>

	<script type="text/javascript">	// here is your function to load new messages
		function loadNewMessages(){
			let content = document.getElementById('content');
			let i = 0;	// you don't know real size of new messages
			while (i < Math.random() * (25 - 7) + 7){

				msg = document.getElementsByClassName('message')[0];
				let newMessage = msg.cloneNode(true);
				newMessage.classList.add('new-message');
				newMessage.innerHTML = "new message" + i;
				content.prepend(newMessage);
				i = i + 1;
			}
			content.scrollTop = 100;
		}
	</script>

	<script type="text/javascript">
		// you have method loadNewMessages() for load new messages

		// write code here ...
		const content = document.getElementById('content');
		content.addEventListener('scroll', function(){
			if (content.scrollTop < 100){
				loadNewMessages();
			}
		})
	</script>
</body>
</html>

## Second-part-solution.html
<!DOCTYPE html>
<html>
<head>
	<title>Solution</title>
	<style type="text/css">
		.old-message {
			background-color: grey;
		}
		.new-message {
			background-color: green;
		}
	</style>
</head>
<body>
	<div style="width: 200px; height: 400px; overflow-y: scroll;" id='content'>
		<div class="old-message message">Nyan Nyan</div>
	</div>


	<script type="text/javascript"> // just init method, don't see this
		let contentDiv = document.getElementById('content');
		let i = 35;
		while (i > -1){
			msg = document.getElementsByClassName('message')[0];
			let newMessage = msg.cloneNode(true);
			newMessage.innerHTML = newMessage.innerHTML + i;
			contentDiv .appendChild(newMessage);
			i = i - 1;
		}
		contentDiv.scrollTop = content.scrollHeight;
	</script>

	<script type="text/javascript">	// here is your function to load new messages
		function loadNewMessages(){
			let content = document.getElementById('content');
			let i = 0;	// you don't know real size of new messages
			while (i < Math.random() * (25 - 7) + 7){

				msg = document.getElementsByClassName('message')[0];
				let newMessage = msg.cloneNode(true);
				newMessage.classList.add('new-message');
				newMessage.innerHTML = "new message" + i;
				content.prepend(newMessage);
				i = i + 1;
			}
			content.scrollTop = 0;
		}
	</script>

	<script type="text/javascript">
		// you have method loadNewMessages() for load new messages

		// write code here ...
		const content = document.getElementById('content');
		content.addEventListener('scroll', function(){
			if (content.scrollTop < 100){
				let oldScrollHeight = content.scrollHeight;
				let oldScrollTop = content.scrollTop;
				loadNewMessages();
				content.scrollTop = oldScrollTop + (content.scrollHeight - oldScrollHeight)
			}
		})
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Solution</title>
	<style type="text/css">
	.old-message {
	background-color: grey;
	}
	.new-message {
	background-color: green;
	}
	</style>
	</head>
	<body>
	<div style="width: 200px; height: 400px; overflow-y: scroll;" id='content'>
	<div class="old-message message">Nyan Nyan</div>
	</div>


	<script type="text/javascript"> // just init method, don't see this
	let contentDiv = document.getElementById('content');
	let i = 35;
	while (i > -1){
	msg = document.getElementsByClassName('message')[0];
	let newMessage = msg.cloneNode(true);
	newMessage.innerHTML = newMessage.innerHTML + i;
	contentDiv .appendChild(newMessage);
	i = i - 1;
	}
	contentDiv.scrollTop = content.scrollHeight;
	</script>

	<script type="text/javascript"> // here is your function to load new messages
	function loadNewMessages(){
	let content = document.getElementById('content');
	let i = 0; // you don't know real size of new messages
	while (i < Math.random() * (25 - 7) + 7){

	msg = document.getElementsByClassName('message')[0];
	let newMessage = msg.cloneNode(true);
	newMessage.classList.add('new-message');
	newMessage.innerHTML = "new message" + i;
	content.prepend(newMessage);
	i = i + 1;
	}
	content.scrollTop = 100;
	}
	</script>

	<script type="text/javascript">
	// you have method loadNewMessages() for load new messages

	// write code here ...
	const content = document.getElementById('content');
	content.addEventListener('scroll', function(){
	if (content.scrollTop < 100){
	loadNewMessages();
	}
	})
	</script>
	</body>
	</html>