ReiMerc/Zipcode-Finder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
ReiMerc 2023-02-06 12:17:43 +01:00
commit 1be6713c91
4 changed files with 80 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
denmark-map.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

15
index.html Normal file
View File

@ -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>

48
script.js Normal file
View File

@ -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";
}

17
style.css Normal file
View File

@ -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;
}