Compare commits
3 Commits
ded8d213b2
...
6861e4c4c6
| Author | SHA1 | Date | |
|---|---|---|---|
| 6861e4c4c6 | |||
| 5508662ee7 | |||
| c9d372fd1d |
BIN
frontend/assets/JetBrainsMono-Regular.woff2
Normal file
BIN
frontend/assets/JetBrainsMono-Regular.woff2
Normal file
Binary file not shown.
@ -2,6 +2,8 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="bundle.js" defer></script>
|
||||
<title>Postnummer App</title>
|
||||
@ -15,14 +17,19 @@
|
||||
<h1>Postnummer App</h1>
|
||||
</div>
|
||||
<main>
|
||||
<div id="search-bar">
|
||||
<input id="search-input" placeholder="Postnummer">
|
||||
<button id="search-button">Search</button>
|
||||
</div>
|
||||
<form id="search-bar">
|
||||
<input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
|
||||
<button id="search-button" type="submit">Search</button>
|
||||
</form>
|
||||
<img src="assets/map.jpg" id="map"><br>
|
||||
<p id="mouse-position"></p>
|
||||
<p id="coords"></p>
|
||||
<p id="zip-code"></p>
|
||||
<div id="info">
|
||||
<span id="mouse-position"></span>
|
||||
<br>
|
||||
<span id="coords"></span>
|
||||
<br>
|
||||
<span id="zip-code"></span>
|
||||
<br>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -96,12 +96,18 @@ function setupMap(
|
||||
}
|
||||
|
||||
function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
|
||||
const searchBar =
|
||||
document.querySelector<HTMLFormElement>("#search-bar");
|
||||
const searchInput =
|
||||
document.querySelector<HTMLInputElement>("#search-input")!;
|
||||
const searchButton =
|
||||
document.querySelector<HTMLButtonElement>("#search-button")!;
|
||||
|
||||
searchButton.onclick = async (_event: MouseEvent) => {
|
||||
// Prevent typing letters
|
||||
searchBar.onkeypress = (event: KeyboardEvent) => {console.log(event);
|
||||
event.key !== "Enter" || !isNaN(parseInt(event.key));}
|
||||
|
||||
searchBar.onsubmit = async (event: MouseEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValue = searchInput.value;
|
||||
if (!/^\d+$/.test(inputValue)) return;
|
||||
const data = await (
|
||||
@ -109,11 +115,13 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
|
||||
`https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
|
||||
)
|
||||
).json();
|
||||
|
||||
displayZipCode(
|
||||
zipCodeElement,
|
||||
parseInt(data[0]["nr"]),
|
||||
data[0]["navn"],
|
||||
data.length ? parseInt(data[0]["nr"]) : null,
|
||||
data.length ? data[0]["navn"] : null,
|
||||
);
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@font-face {
|
||||
font-family: "Jetbrains Mono";
|
||||
src: url("assets/JetbrainsMono-Regular.woff2");
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@ -7,15 +11,16 @@ body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
background-color: #E1F5FE;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
background-color: #aaa;
|
||||
color: #000;
|
||||
background-color: #03A9F4;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
/* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); */
|
||||
box-shadow: 0px 3px 3px #01579B;
|
||||
}
|
||||
|
||||
#topbar > h1 {
|
||||
@ -34,36 +39,74 @@ main > * {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Jetbrains Mono", monospace;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#search-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 5px;
|
||||
border: 1px solid #666;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
filter: drop-shadow(0 2px 2px #9E9E9E);
|
||||
}
|
||||
|
||||
#search-input {
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding-bottom: 2px;
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
flex: 1;
|
||||
border: 1px solid #666;
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
#search-input:focus {
|
||||
border-bottom: 2px solid black;
|
||||
padding-bottom: 0;
|
||||
background-color: #FAFAFA;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search-button {
|
||||
cursor: pointer;
|
||||
width: 5rem;
|
||||
font-size: 1rem;
|
||||
background-color: #03A9F4;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0 5px 5px 0;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
#search-button:hover, #search-button:focus {
|
||||
background-color: #039BE5;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#search-button:active {
|
||||
background-color: #0288D1;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 4px #9E9E9E;
|
||||
border: 1px solid #7E7E7E;
|
||||
}
|
||||
|
||||
#info {
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #7E7E7E;
|
||||
box-shadow: 0 2px 2px #9E9E9E;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-size: 1.1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#mouse-position, #coords {
|
||||
color: #7E7E7E;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user