Initial commit

2023-02-06 12:17:43 +01:00 · 2023-02-06 12:17:43 +01:00 · 1be6713c91
commit 1be6713c91
4 changed files with 80 additions and 0 deletions
--- a/denmark-map.jpg
+++ b/denmark-map.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>noob</title>
+		<link rel="stylesheet" href="style.css">
+		<script src="script.js" defer></script>
+	</head>
+	<body>
+		<main>
+			<img id="denmark" src="denmark-map.jpg">
+			<p id="coords"></p>
+			<div id="zip"></div>
+		</main>
+	</body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,48 @@
+var mouseX, mouseY;
+
+denmark.onmousemove = event => {
+	zip.style.display = "none";
+
+	var rect = denmark.getBoundingClientRect();
+
+	mouseX = event.x - rect.left;
+	mouseY = event.y - rect.top;
+
+	var coordX = mouseX * 0.00875 + 6;
+	var coordY = Math.abs(mouseY * 0.0052 - 58);
+
+	coords.innerHTML = `${coordX}<br>${coordY}`;
+
+	var oldMouseX = mouseX, oldMouseY = mouseY;
+	setTimeout(() => {
+		if (!mouseX || !mouseY || oldMouseX != mouseX || oldMouseY != mouseY) return;
+
+		var xhr = new XMLHttpRequest;
+		xhr.onload = () => {
+			if (xhr.status === 200)
+				eval(xhr.responseText);
+			else
+				onZipError();
+		}
+		xhr.open("GET", `https://api.dataforsyningen.dk/postnumre/reverse?x=${coordX}&y=${coordY}&callback=onZipFound`);
+		xhr.send();
+	}, 200);
+};
+
+denmark.onmouseleave = () => {
+	mouseX = mouseY = null;
+};
+
+function onZipFound(data) {
+	zip.innerHTML = `${data.nr} <b>${data.navn}</b>`;
+	zip.style.left = (mouseX+3) + "px";
+	zip.style.top = (mouseY+3) + "px";
+	zip.style.display = "block";
+}
+
+function onZipError() {
+	zip.innerHTML = "Postnummer ikke fundet";
+	zip.style.left = (mouseX+3) + "px";
+	zip.style.top = (mouseY+3) + "px";
+	zip.style.display = "block";
+}
--- a/style.css
+++ b/style.css
@ -0,0 +1,17 @@
+main {
+	position: relative;
+}
+
+#denmark {
+	max-width: 100%;
+}
+
+#zip {
+	background-color: white;
+	padding: 5px;
+	box-shadow: 2px 2px 2px #BDBDBD;
+	font-size: 1.2em;
+	position: absolute;
+	display: none;
+}
+