JSFiddle - React, Tailwind, and code Playground

by JoChicau

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

<div id="browsethearchive-all">
<div class="pagetitle" id="browsethearchive-title">BROWSE THE ARCHIVE</div>

<div id="browsethearchive-grid">


<div class="browsethearchive-items">
	<div class="browsethearchive-items-top">	
		<a href='/artwork?id=Q890'>
			<img class="browsethearchive-imgs" src='https://upload.wikimedia.org/wikipedia/commons/3/37/Empty_book.jpg'>
		</a> <br>
	</div>
	<div class="browsethearchive-items-bottom">
		<a class="title"  href='/artwork?id=Q890'>
			Example </a> <br>
		<span class="date"> Date  </span>	
	</div>
</div>

<div class="browsethearchive-items">
	<div class="browsethearchive-items-top">	
		<a href='/artwork?id=Q890'>
			<img class="browsethearchive-imgs" src='https://upload.wikimedia.org/wikipedia/commons/3/37/Empty_book.jpg'>
		</a> <br>
	</div>
	<div class="browsethearchive-items-bottom">
		<a class="title"  href='/artwork?id=Q890'>
			Example </a> <br>
		<span class="date"> Date  </span>	
	</div>
</div>

<div class="browsethearchive-items">
	<div class="browsethearchive-items-top">	
		<a href='/artwork?id=Q890'>
			<img class="browsethearchive-imgs" src='https://upload.wikimedia.org/wikipedia/commons/3/37/Empty_book.jpg'>
		</a> <br>
	</div>
	<div class="browsethearchive-items-bottom">
		<a class="title"  href='/artwork?id=Q890'>
			Example </a> <br>
		<span class="date"> Date  </span>	
	</div>
</div>

<div class="browsethearchive-items">
	<div class="browsethearchive-items-top">	
		<a href='/artwork?id=Q890'>
			<img class="browsethearchive-imgs" src='https://upload.wikimedia.org/wikipedia/commons/3/37/Empty_book.jpg'>
		</a> <br>
	</div>
	<div...

CSS

/************ FONTS ************/

@font-face {
font-family: 'Roboto Condensed Bold';
src: url('webfonts/Roboto_Condensed/RobotoCondensed-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Roboto Condensed';
src: url('webfonts/Roboto_Condensed/RobotoCondensed-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


@font-face {
font-family: 'Roboto Regular';
src: url('webfonts/Roboto_Regular/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Roboto Italic';
src: url('webfonts/Roboto_Regular/Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Roboto Bold';
src: url('webfonts/Roboto_Regular/Roboto-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

/*new import font*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap');

/*test bold font import*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


/***************** ALL RESPONSE TEXT ****************/

@media screen and (min-width: 320px) {

/* 12 18 */ body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, 
.date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p {
		font-size: calc(12px + 6 * (100vw - 320px) / 1600);
		 line-height: 1.4em;
	}
/* 12 18 */ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, 
div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item, .tns-item p:first-of-type  {
		font-size: calc(12px + 6 * (100vw - 320px) / 1600);
		line-height: 1.4em;
	}
/* 12 18 line height diff */ div#footer-socials-links a, a#footer-img-br, a#footer-img-br figcaption, a#footer-img-br...

JavaScript

// pagination script w/ support from @biberman on stackoverflow - big thanks!


let startPage;
const pageSize = 6;
const totalSlidePage = 5;
const pageCount = Math.ceil($(".browsethearchive-items").length / pageSize);
const slideRange = Math.floor(totalSlidePage / 2); 

slide = function() {
startPage = $("#pagin li a.current").parent().index();
let paginationStart = (startPage - slideRange) < 0 ? 0 :
(startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) :
(startPage - slideRange));

$("#pagin li").hide();
for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) {
$("#pagin li").eq(t + 1).show();
}

next.show();
prev.show();

if (startPage == 1) {
prev.hide();
}
else if (startPage == pageCount ) {
next.hide();
}
}

showPage = function() {
console.log(startPage);
$(".browsethearchive-items").hide();
$(".browsethearchive-items").each(function(n) {
if (n >= pageSize * (startPage - 1) && n < pageSize * startPage)
$(this).show();
});
}

for (let i = 0 ; i < pageCount; i++) {
$("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');

if (i > pageSize) {
$("#pagin li").eq(i).hide();
}
}

let prev = $("<li/>").addClass("prev").html("Prev").click(function() {
let prevLi = $("#pagin li a.current").parent().prev().find("a");

if (prevLi[0]) {
$("#pagin li a.current").removeClass("current");
prevLi.addClass("current");
}

slide();

if (startPage != 0) {
showPage();
}
});

let next = $("<li/>").addClass("next").html("Next").click(function() {
let nextLi = $("#pagin li a.current").parent().next().find("a");

if (nextLi[0]) {
$("#pagin li a.current").removeClass("current");
nextLi.addClass("current");
}

slide();

if (startPage <= pageCount) {
showPage();
}
});

$("#pagin").prepend(prev).append(next);

$("#pagin li a").click(function() {
$('#pagin li a').removeClass('current');
$(this).addClass('current');

slide();
showPage();
});

$("#pagin li a").eq(0).addClass("current");

slide();
showPage();