prof3ssorSt3v3 · December 6, 2024 16:59
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pagination</title>
    <style>
      * {
        box-sizing: border-box;
        font-weight: 300;
        font-family: sans-serif;
      }
      header {
        padding: 1rem 2rem;
        h1 {
          font-size: 3rem;
          margin: 0;
        }
      }
      main {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem 2rem;
        margin-inline: auto;

        .card {
          border: 1px solid #333;
          border-radius: 1rem;
          padding: 1rem;
          counter-increment: card;
          position: relative;
        }
        .card::before {
          content: counter(card);
          position: absolute;
          display: inline-block;
          background-color: #222;
          color: #fff;
          display: grid;
          place-content: center;
          border-radius: 50%;
          padding: 0.25rem;
          font-size: 1rem;
          font-weight: 500;
          line-height: 1rem;
          height: 1.5rem;
          width: 1.5rem;
          text-align: center;
          top: -0.75rem;
          left: -0.75rem;
        }
      }
      nav {
        display: flex;
        gap: 1rem;
        justify-content: space-around;
        padding: 1rem 2rem;
      }
    </style>
    <script>
      document.addEventListener('DOMContentLoaded', init);
      let page = 0;
      let perPage = 6;
      let totalPages = 0;
      let maxPage = 0;
      const storageName = 'paginationExampleStorage';
      let data = null;

      function init() {
        getCurrentPage();
        getRecords();
        showData();
        showPagination();
      }

      function getCurrentPage() {
        let url = new URL(location.href);
        let params = url.searchParams;
        page = params.get('page') ? +params.get('page') : page; //default is zero
        // +params.get('page') turn string into number
        // Number(params.get('page')) turn string into number
        // parseInt(params.get('page')) turn string into number
        console.log('currently on page', page);
      }

      function getRecords() {
        let _storage = localStorage.getItem(storageName);
        if (_storage) {
          data = JSON.parse(_storage);
        } else {
          //generate storage and save
          let num = Math.floor(Math.random() * 30) + 10; // 10-39 records
          data = new Array(num).fill({}).map((item) => ({ id: crypto.randomUUID() }));
          localStorage.setItem(storageName, JSON.stringify(data));
        }
        perPage = 4; //Math.floor(data.length / 4); //you can hard code a number... I wanted 4 pages
        totalPages = Math.ceil(data.length / 4);
        maxPage = totalPages - 1;
        console.warn(page, maxPage);
        //page is coming from the queryString or defaults to zero
        page = page > maxPage ? maxPage : page; //clamp to largest page number
        //if the querystring page number is bigger than the highest allowed then use the highest allowed
        console.log({ page });
        console.log({ perPage });
        console.log({ totalPages });
        console.log('number of items', data.length);
      }

      function showData() {
        console.log(data.length, 'items');
        //get the portion of the data for the current page
        let start = page * perPage;
        let end = start + perPage;
        console.log(start, end);
        //data here will already be filtered and sorted as needed
        let pageData = data.slice(start, end);
        //extract/copy 4 of the items from the data array
        let main = document.querySelector('main');
        main.style = `counter-reset: card ${start};`;
        main.innerHTML = pageData
          .map((item, index) => {
            return `<div class="card">
            <p>${item.id}</p>  
          </div>`;
          })
          .join('');
      }

      function showPagination() {
        let prev = page - 1;
        let next = page + 1;
        let nav = document.querySelector('nav');
        if (page === 0) {
          console.log('first page');
          let span = document.createElement('span');
          // span.textContent = 'first';
          nav.append(span);
        } else {
          let url = new URL(location.href);
          let params = url.searchParams;
          params.set('page', prev);
          let a = document.createElement('a');
          a.id = 'prev';
          a.href = url.href;
          a.textContent = 'Previous';
          nav.append(a);
        }
        if (page >= maxPage) {
          console.log('last page');
          let span = document.createElement('span');
          // span.textContent = 'last';
          nav.append(span);
        } else {
          let url = new URL(location.href);
          let params = url.searchParams; //UPDATE not REPLACE of the querystring
          //We don't want to lose other params already in the url
          params.set('page', next);
          let a = document.createElement('a');
          a.id = 'next';
          a.href = url.href;
          a.textContent = 'Next';
          nav.append(a);
        }
      }
    </script>
  </head>
  <body>
    <header>
      <h1>Pagination</h1>
    </header>
    <main>
      <!-- build data here -->
    </main>
    <nav>
      <!-- pagination -->
    </nav>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Pagination</title>
	<style>
	* {
	box-sizing: border-box;
	font-weight: 300;
	font-family: sans-serif;
	}
	header {
	padding: 1rem 2rem;
	h1 {
	font-size: 3rem;
	margin: 0;
	}
	}
	main {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem 2rem;
	margin-inline: auto;

	.card {
	border: 1px solid #333;
	border-radius: 1rem;
	padding: 1rem;
	counter-increment: card;
	position: relative;
	}
	.card::before {
	content: counter(card);
	position: absolute;
	display: inline-block;
	background-color: #222;
	color: #fff;
	display: grid;
	place-content: center;
	border-radius: 50%;
	padding: 0.25rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1rem;
	height: 1.5rem;
	width: 1.5rem;
	text-align: center;
	top: -0.75rem;
	left: -0.75rem;
	}
	}
	nav {
	display: flex;
	gap: 1rem;
	justify-content: space-around;
	padding: 1rem 2rem;
	}
	</style>
	<script>
	document.addEventListener('DOMContentLoaded', init);
	let page = 0;
	let perPage = 6;
	let totalPages = 0;
	let maxPage = 0;
	const storageName = 'paginationExampleStorage';
	let data = null;

	function init() {
	getCurrentPage();
	getRecords();
	showData();
	showPagination();
	}

	function getCurrentPage() {
	let url = new URL(location.href);
	let params = url.searchParams;
	page = params.get('page') ? +params.get('page') : page; //default is zero
	// +params.get('page') turn string into number
	// Number(params.get('page')) turn string into number
	// parseInt(params.get('page')) turn string into number
	console.log('currently on page', page);
	}

	function getRecords() {
	let _storage = localStorage.getItem(storageName);
	if (_storage) {
	data = JSON.parse(_storage);
	} else {
	//generate storage and save
	let num = Math.floor(Math.random() * 30) + 10; // 10-39 records
	data = new Array(num).fill({}).map((item) => ({ id: crypto.randomUUID() }));
	localStorage.setItem(storageName, JSON.stringify(data));
	}
	perPage = 4; //Math.floor(data.length / 4); //you can hard code a number... I wanted 4 pages
	totalPages = Math.ceil(data.length / 4);
	maxPage = totalPages - 1;
	console.warn(page, maxPage);
	//page is coming from the queryString or defaults to zero
	page = page > maxPage ? maxPage : page; //clamp to largest page number
	//if the querystring page number is bigger than the highest allowed then use the highest allowed
	console.log({ page });
	console.log({ perPage });
	console.log({ totalPages });
	console.log('number of items', data.length);
	}

	function showData() {
	console.log(data.length, 'items');
	//get the portion of the data for the current page
	let start = page * perPage;
	let end = start + perPage;
	console.log(start, end);
	//data here will already be filtered and sorted as needed
	let pageData = data.slice(start, end);
	//extract/copy 4 of the items from the data array
	let main = document.querySelector('main');
	main.style = `counter-reset: card ${start};`;
	main.innerHTML = pageData
	.map((item, index) => {
	return `<div class="card">
	<p>${item.id}</p>
	</div>`;
	})
	.join('');
	}

	function showPagination() {
	let prev = page - 1;
	let next = page + 1;
	let nav = document.querySelector('nav');
	if (page === 0) {
	console.log('first page');
	let span = document.createElement('span');
	// span.textContent = 'first';
	nav.append(span);
	} else {
	let url = new URL(location.href);
	let params = url.searchParams;
	params.set('page', prev);
	let a = document.createElement('a');
	a.id = 'prev';
	a.href = url.href;
	a.textContent = 'Previous';
	nav.append(a);
	}
	if (page >= maxPage) {
	console.log('last page');
	let span = document.createElement('span');
	// span.textContent = 'last';
	nav.append(span);
	} else {
	let url = new URL(location.href);
	let params = url.searchParams; //UPDATE not REPLACE of the querystring
	//We don't want to lose other params already in the url
	params.set('page', next);
	let a = document.createElement('a');
	a.id = 'next';
	a.href = url.href;
	a.textContent = 'Next';
	nav.append(a);
	}
	}
	</script>
	</head>
	<body>
	<header>
	<h1>Pagination</h1>
	</header>
	<main>
	<!-- build data here -->
	</main>
	<nav>
	<!-- pagination -->
	</nav>
	</body>
	</html>