h2/postnummer-app
h2/postnummer-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: h2:ded8d213b26e10d50c62000836dc42f5a304b8a5
Branches Tags
h2:main
h2:frontend_fixies
h2:feature/boundaries
...
compare: h2:6861e4c4c604ed758d9ead7c423235ad71fece99
Branches Tags
h2:frontend_fixies
h2:main
h2:feature/boundaries

3 Commits
ded8d213b2 ... 6861e4c4c6

Author SHA1 Message Date
ReimarPB
6861e4c4c6 Add Jetbrains font 2023-02-06 21:22:35 +01:00
ReimarPB
5508662ee7 Redesign page 2023-02-06 21:11:19 +01:00
ReimarPB
c9d372fd1d Fix search bar 2023-02-06 20:28:16 +01:00
4 changed files with 85 additions and 27 deletions
Show Stats Expand all files Collapse all files

BIN
frontend/assets/JetBrainsMono-Regular.woff2 Normal file
View File

Binary file not shown.

21
frontend/index.html
View File

@ -2,6 +2,8 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="bundle.js" defer></script> <script src="bundle.js" defer></script>
<title>Postnummer App</title> <title>Postnummer App</title>
@ -15,14 +17,19 @@
<h1>Postnummer App</h1> <h1>Postnummer App</h1>
</div> </div>
<main> <main>
<div id="search-bar"> <form id="search-bar">
<input id="search-input" placeholder="Postnummer"> <input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
<button id="search-button">Search</button> <button id="search-button" type="submit">Search</button>
</div> </form>
<img src="assets/map.jpg" id="map"><br> <img src="assets/map.jpg" id="map"><br>
<p id="mouse-position"></p> <div id="info">
<p id="coords"></p> <span id="mouse-position"></span>
<p id="zip-code"></p> <br>
<span id="coords"></span>
<br>
<span id="zip-code"></span>
<br>
</div>
</main> </main>
</body> </body>
</html> </html>

18
frontend/src/main.ts
View File

@ -96,12 +96,18 @@ function setupMap(
} }
function setupSearchBar(zipCodeElement: HTMLParagraphElement) { function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
const searchBar =
document.querySelector<HTMLFormElement>("#search-bar");
const searchInput = const searchInput =
document.querySelector<HTMLInputElement>("#search-input")!; 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; const inputValue = searchInput.value;
if (!/^\d+$/.test(inputValue)) return; if (!/^\d+$/.test(inputValue)) return;
const data = await ( const data = await (
@ -109,11 +115,13 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
`https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`, `https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
) )
).json(); ).json();
displayZipCode( displayZipCode(
zipCodeElement, zipCodeElement,
parseInt(data[0]["nr"]), data.length ? parseInt(data[0]["nr"]) : null,
data[0]["navn"], data.length ? data[0]["navn"] : null,
); );
}; };
} }

73
frontend/style.css
View File

@ -1,3 +1,7 @@
@font-face {
font-family: "Jetbrains Mono";
src: url("assets/JetbrainsMono-Regular.woff2");
}
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -7,15 +11,16 @@ body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
background-color: #E1F5FE;
} }
#topbar { #topbar {
background-color: #aaa; background-color: #03A9F4;
color: #000; color: white;
text-align: center; text-align: center;
margin: 0; margin: 0;
padding: 0.5rem; padding: 0.5rem;
/* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); */ box-shadow: 0px 3px 3px #01579B;
} }
#topbar > h1 { #topbar > h1 {
@ -34,36 +39,74 @@ main > * {
margin: 2px; margin: 2px;
} }
code {
font-family: "Jetbrains Mono", monospace;
font-weight: bold;
}
#search-bar { #search-bar {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 5px; margin-bottom: 15px;
border: 1px solid #666; filter: drop-shadow(0 2px 2px #9E9E9E);
border-radius: 5px;
} }
#search-input { #search-input {
width: 100%; background-color: white;
font-size: 1rem; padding: 5px;
border: 0; flex: 1;
outline: 0; border: 1px solid #666;
padding-bottom: 2px; border-radius: 5px 0 0 5px;
} }
#search-input:focus { #search-input:focus {
border-bottom: 2px solid black; background-color: #FAFAFA;
padding-bottom: 0; outline: none;
} }
#search-button { #search-button {
cursor: pointer;
width: 5rem; 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 { #map {
width: 100%; 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) { @media screen and (max-width: 1000px) {