commit 1be6713c914059d23996dac770af619f8dfdb187 Author: ReiMerc Date: Mon Feb 6 12:17:43 2023 +0100 Initial commit diff --git a/denmark-map.jpg b/denmark-map.jpg new file mode 100644 index 0000000..14c1f33 Binary files /dev/null and b/denmark-map.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3cb311e --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + noob + + + + +
+ +

+
+
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..42ea703 --- /dev/null +++ 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}
${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} ${data.navn}`; + 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"; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..f7eb4aa --- /dev/null +++ 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; +} +