veegishx/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Experiment</title>
</head>
<body>
    <button id="loadFromStart" type="button">Load 1 More from start</button>
    <button id="loadFromEnd" type="button">Load 1 More from end</button>
    <button id="reset" type="button">Reset</button>
    <h1>Examples of names:</h1>
    <div id="names"></div>
    <div id="content"></div>
  <script>
      let names = ['jason', 'peter', 'sam', 'alex', 'veegish', 'yashveer', 'imraan', 'bucks', 'cory', 'chady', 'nilesh', 'samsam', 'martin', 'nelson', 'samuel', 'diana', 'clover', 'jerry'];
      let buttonStart = document.getElementById("loadFromStart");
      let buttonEnd = document.getElementById("loadFromEnd");
      let buttonReset = document.getElementById("reset");
      let original = document.getElementById("names");
      let content = document.getElementById("content");

      // Split array into chunks
      const elements = splitArray(names, 6);

      let count1 = -1;
      let start1 = 0;
      let end1 = 0;
      original.innerHTML = JSON.stringify(elements);
      buttonStart.addEventListener("click", function() {
          if(count1 < elements.length - 1) {
              const tempArray = [...elements];
              console.log(tempArray);
              count1++;
              start1 = count1;
              //end1 = count1;
              content.innerHTML += JSON.stringify(tempArray.splice(start1, 1)) + "</br>";
          } else {
              buttonStart.disabled = true;
          }

          console.log("Start1: " + start1);
          console.log("End1: " + end1);
          console.log("Count1: " + count1);
      })

      let count2 = elements.length;
      let start2 = elements.length - 1;
      let end2 = elements.length - 1;
      original.innerHTML = JSON.stringify(elements);
      buttonEnd.addEventListener("click", function() {
          const tempArray = [...elements];
          console.log(tempArray);
          if(count2 > 0) {
              count2--;
              //end2 = start2;
              start2 = count2;
              content.innerHTML += JSON.stringify(tempArray.splice(start2, 1)) + "</br>";
          } else {
              buttonEnd.disabled = true;
          }

          console.log("Start2: " + start2);
          console.log("End2: " + end2);
          console.log("Count2: " + count2);
      })

      buttonReset.addEventListener("click", function() {
          content.innerHTML = "";
          count1 = 0;
          start1 = 0;
          end1 = 0;
          count2 = elements.length - 1;
          start2 = elements.length - 1;
          end2 = elements.length - 1;
          // location.reload();
          buttonEnd.disabled = false;
          buttonStart.disabled = false;
      });

      function splitArray(array, n) {
          let rest = array.length % n;
          let restUsed = rest;
          let partLength = Math.floor(array.length / n);
          let result = [];

          for(let i = 0; i < array.length; i += partLength) {
              let endOfArray = partLength + i;
              let addMore = false;

              if(rest != 0 && restUsed) {
                  endOfArray++;
                  restUsed--;
                  addMore = true;
              }

              result.push(array.slice(i, endOfArray));

              if(addMore) {
                  i++
              }
          }

          return result;
      }
  </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>Experiment</title>
	</head>
	<body>
	<button id="loadFromStart" type="button">Load 1 More from start</button>
	<button id="loadFromEnd" type="button">Load 1 More from end</button>
	<button id="reset" type="button">Reset</button>
	<h1>Examples of names:</h1>
	<div id="names"></div>
	<div id="content"></div>
	<script>
	let names = ['jason', 'peter', 'sam', 'alex', 'veegish', 'yashveer', 'imraan', 'bucks', 'cory', 'chady', 'nilesh', 'samsam', 'martin', 'nelson', 'samuel', 'diana', 'clover', 'jerry'];
	let buttonStart = document.getElementById("loadFromStart");
	let buttonEnd = document.getElementById("loadFromEnd");
	let buttonReset = document.getElementById("reset");
	let original = document.getElementById("names");
	let content = document.getElementById("content");

	// Split array into chunks
	const elements = splitArray(names, 6);

	let count1 = -1;
	let start1 = 0;
	let end1 = 0;
	original.innerHTML = JSON.stringify(elements);
	buttonStart.addEventListener("click", function() {
	if(count1 < elements.length - 1) {
	const tempArray = [...elements];
	console.log(tempArray);
	count1++;
	start1 = count1;
	//end1 = count1;
	content.innerHTML += JSON.stringify(tempArray.splice(start1, 1)) + "</br>";
	} else {
	buttonStart.disabled = true;
	}

	console.log("Start1: " + start1);
	console.log("End1: " + end1);
	console.log("Count1: " + count1);
	})

	let count2 = elements.length;
	let start2 = elements.length - 1;
	let end2 = elements.length - 1;
	original.innerHTML = JSON.stringify(elements);
	buttonEnd.addEventListener("click", function() {
	const tempArray = [...elements];
	console.log(tempArray);
	if(count2 > 0) {
	count2--;
	//end2 = start2;
	start2 = count2;
	content.innerHTML += JSON.stringify(tempArray.splice(start2, 1)) + "</br>";
	} else {
	buttonEnd.disabled = true;
	}

	console.log("Start2: " + start2);
	console.log("End2: " + end2);
	console.log("Count2: " + count2);
	})

	buttonReset.addEventListener("click", function() {
	content.innerHTML = "";
	count1 = 0;
	start1 = 0;
	end1 = 0;
	count2 = elements.length - 1;
	start2 = elements.length - 1;
	end2 = elements.length - 1;
	// location.reload();
	buttonEnd.disabled = false;
	buttonStart.disabled = false;
	});

	function splitArray(array, n) {
	let rest = array.length % n;
	let restUsed = rest;
	let partLength = Math.floor(array.length / n);
	let result = [];

	for(let i = 0; i < array.length; i += partLength) {
	let endOfArray = partLength + i;
	let addMore = false;

	if(rest != 0 && restUsed) {
	endOfArray++;
	restUsed--;
	addMore = true;
	}

	result.push(array.slice(i, endOfArray));

	if(addMore) {
	i++
	}
	}

	return result;
	}
	</script>
	</body>
	</html>