JSFiddle - React, Tailwind, and code Playground

by SutonJ

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<link rel="stylesheet" href="style.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
		<script
			src="https://unpkg.com/js-image-zoom@0.7.0/js-image-zoom.js"
			type="application/javascript"
		></script>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

		<title>Pin Project</title>
	</head>

	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<input type="file" id="files" name="file" />

		<div class="container">
			<div class="backdrop">
				<div class="highlights"></div>
			</div>

			<canvas id="the-canvas" class="canvas"></canvas>
			<div id="canvas-ma" class="marks-canvas"></div>
		</div>

<div class="nav-bar" id="navbar">
			<button class="zoom-in-btn" type="button" >
				Zoom In
			</button>
			<button class="zoom-out-btn" type="button">
				Zoom Out
			</button>
		</div>
		
		<div class="div-button">
			<button class="btn-mark">Create mark</button>
		</div>
		
		

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script type="module"src="app.js"></script>
	</body>
</html>

CSS

#the-canvas {
	width: 600px;
	margin: 0 0 0 200px;
}

body {
	background: black;
}

#files {
	color: white;
}

.comment {
	width: 30px;
	height: 30px;
}

.zoom-in-btn {
	position: absolute;
	top: 100px;
	left: 50px;
	width: 90px;
	height: 40px;
	background: #336699;
	color: white;
	border: none;
	cursor: pointer;
}

.zoom-out-btn {
	position: absolute;
	top: 150px;
	left: 50px;
	width: 90px;
	height: 40px;
	background: red;
	color: white;
	border: none;
	cursor: pointer;
}

.markers {
	cursor: pointer;
	width: 30px;
	height: 30px;
	z-index: 10;
	position: absolute;
	top: 40px;
	left: 230px;
}



.div-button {
	position: absolute;
	top: 300px;
	left: 10px;
}

.res {
	position: absolute;
	top: 340px;
	left: 10px;
}

.markers .p-counter {
	position: absolute;
	top: -12px;
	left: 10px;
}

.p-counter {
	z-index: 20;
	color: black;
}

.p-content-counter {
	margin: 10px 0 0 10px;
}

.rects {
	position: absolute;
	top: 300px;
	left: 500px;
	width: 280px;
	background: white;
	height: auto;
	border-radius: 5px;
}

.hide {
	width: 50px;
	height: 30px;
	margin: 0 0 10px 10px;
}
.hidee {
	width: 50px;
	height: 30px;
	margin: 0 0 10px 10px;
}



.delete-btn {
	width: 50px;
	height: 30px;
	cursor: pointer;
	margin-left: 5px;
}

.content {
	width: 230px;
	height: 150px;
	margin: 10px;
	border: 1px solid black;
}

.sub-btn {
	width: 60px;
	height: 30px;
	margin-left: 10px;
}

.xe {
	width: 60px;
	height: 30px;
}

#textt {
	position: absolute;
	top: 400px;
	left: 20px;
}

JavaScript

let showCounter = 1;
let zoomInCounter = 0;
const zoomIn = document.querySelector(".zoom-in-btn");
const divBtn = document.querySelector(".btn-mark");

divBtn.addEventListener("click", creatContent);

const PDF_TYPE = "application/pdf";
const TXT_TYPE = "text/plain";

document
	.getElementById("files")
	.addEventListener("change", handleFileSelect, false);

function handleFileSelect(evt) {
	var files = evt.target.files; // FileList object
	for (var i = 0, f; (f = files[i]); i++) {
		let fileType = files[i].type;
		if (fileType === PDF_TYPE) {
			handlePDFFile(files[i]);
		} else if (fileType === TXT_TYPE) {
			handleTxtFile(files[i]);
		} else {
			console.error(`cannot handle file type: ${fileType}`);
		}
		
	}
}

function handleTxtFile(file) {
	var reader = new FileReader();
	reader.onload = (function (reader) {
		return function () {
			var contents = reader.result;
			var lines = contents.split("\n");

			document.getElementById("container").innerHTML = contents;
		};
	})(reader);

	reader.readAsText(file);
}

function handlePDFFile(file) {
	var reader = new FileReader();

	reader.onload = (function (reader) {
		return function () {
			var contents = reader.result;
			var loadingTask = pdfjsLib.getDocument(contents);

			loadingTask.promise.then(function (pdf) {
				pdf.getPage(1).then(function (page) {
					var scale = 1.5;
					var viewport = page.getViewport({
						scale: scale,
					});

					var canvas = document.getElementById("the-canvas");
					var context = canvas.getContext("2d");
					canvas.height = viewport.height;
					canvas.width = viewport.width;

					var renderContext = {
						canvasContext: context,
						viewport: viewport,
					};
					page.render(renderContext);
				});
			});
		};
	})(reader);
	reader.readAsDataURL(file);
}



const marksCanvas = document.querySelector(".marks-canvas");

 function creatContent() {

	var divMark = document.createElement("div");
	divMark.classList = `markers mark`;

	var pCounter =...