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

dropdown buttons changing page

Browse Source
This commit is contained in:
Mikkel 2023-02-09 14:54:42 +01:00
parent f7183dbfac
commit f9472dc426
5 changed files with 59 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/index.html
View File

@ -18,11 +18,11 @@
<div class="spacer"></div> <div class="spacer"></div>
<button id="dropdown-button">≡</button> <button id="dropdown-button">≡</button>
<div id="dropdown"> <div id="dropdown">
<a href="https://tpho.dk">based site</a> <button id="map-redirect">Kort</button>
<a href="https://tpho.dk">based site</a> <button id="reviews-redirect">Anmeldelser</button>
</div> </div>
</div> </div>
<main> <main id="main">
<form id="search-bar"> <form id="search-bar">
<input id="search-input" type="text" placeholder="Postnummer" maxlength="4"> <input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
<button id="search-button" type="submit">Search</button> <button id="search-button" type="submit">Search</button>
@ -33,7 +33,6 @@
<div id="info"> <div id="info">
<p id="zip-code">Postnummer ikke fundet</p> <p id="zip-code">Postnummer ikke fundet</p>
<p id="mouse-position"></p> <p id="mouse-position"></p>
<a href="reviews.html">Anmeldelser</a>
<p id="coords"></p> <p id="coords"></p>
</div> </div>
</main> </main>

33
frontend/reviews.html
View File

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<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="anmeldelser/style.css">
<script src="/frontend/bundle.js" defer></script>
<title>Postnummer App</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="topbar">
<h1>Postnummer App</h1>
<div class="spacer"></div>
<button id="dropdown-button">≡</button>
<div id="dropdown">
<a href="https://mtkonge.dk">more based site</a>
<a href="https://mtkonge.dk">more based site</a>
</div>
</div>
<h2 id="reviews-title">Anmeldelser</h2>
<div id="reviews-container"></div>
</body>
</html>

42
frontend/src/main.ts
View File

@ -188,6 +188,47 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
}); });
} }
function pageRedirects() {
const reviewRedirect = document.getElementById("reviews-redirect")!
const mapRedirect = document.getElementById("map-redirect")!
const mainElement = document.getElementById("main")!
reviewRedirect.addEventListener("click", () => {
mainElement.innerHTML = `<h2 id="reviews-title">Anmeldelser</h2>
<div id="reviews-container"></div>`
const dropdown = document.getElementById("dropdown")!;
dropdown.classList.remove("enabled");
});
mapRedirect.addEventListener("click", () => {
mainElement.innerHTML =
`<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">
<div id="dot"></div>
<div id="boundary"></div>
<div id="info">
<p id="zip-code">Postnummer ikke fundet</p>
<p id="mouse-position"></p>
<p id="coords"></p>
</div>`
const [mousePositionElement, coordsElement, zipCodeElement] = [
"#mouse-position",
"#coords",
"#zip-code",
].map((id) => document.querySelector<HTMLParagraphElement>(id)!);
setupSearchBar(zipCodeElement);
setupMap(mousePositionElement, coordsElement, zipCodeElement);
const dropdown = document.getElementById("dropdown")!;
dropdown.classList.remove("enabled");
})
}
function main() { function main() {
if (navigator.userAgent.match("Chrome")) { if (navigator.userAgent.match("Chrome")) {
location.href = "https://mozilla.org/firefox"; location.href = "https://mozilla.org/firefox";
@ -203,6 +244,7 @@ function main() {
setupMap(mousePositionElement, coordsElement, zipCodeElement); setupMap(mousePositionElement, coordsElement, zipCodeElement);
setTopbarOffset(); setTopbarOffset();
addToggleDropdownListener(); addToggleDropdownListener();
pageRedirects();
} }
main(); main();

11
frontend/src/review.ts
View File

@ -1,6 +1,14 @@
const reviewContainer = document.getElementById("reviews-container")! const reviewContainer = document.getElementById("reviews-container")!
const reviewRedirect = document.getElementById("review-redirect")!
const main = document.getElementById("main")!
function addReview(location: string, title: string, content: string, stars: number, ) { reviewRedirect.addEventListener("click", () => {
main.innerHTML = `<h2 id="reviews-title">Anmeldelser</h2>
<div id="reviews-container"></div>`
});
export function addReview(location: string, title: string, content: string, stars: number) {
const id = Math.random() * 1000000 const id = Math.random() * 1000000
reviewContainer.innerHTML += reviewContainer.innerHTML +=
`<div id="review${id}"> `<div id="review${id}">
@ -11,4 +19,3 @@ function addReview(location: string, title: string, content: string, stars: numb
</div>` </div>`
} }
addReview("Odense", "meget fint pitstop af motorvejen", "en lille sidevej fra motorvejen hvor det bliver serveret god brunsviger, meget fint sted :)", 5)

8
frontend/style.css
View File

@ -89,20 +89,22 @@ body {
transform: scaleY(1); transform: scaleY(1);
} }
#dropdown a { #dropdown button {
border: none;
background-color: var(--brand); background-color: var(--brand);
color: var(--light); color: var(--light);
padding: 1rem 1rem; padding: 1rem 1rem;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
cursor: pointer;
} }
#dropdown a:hover, #dropdown a:focus { #dropdown button:hover, #dropdown button:focus {
background-color: var(--brand-300); background-color: var(--brand-300);
} }
#dropdown a:last-child { #dropdown button:last-child {
border-radius: 0 0 0 5px; border-radius: 0 0 0 5px;
} }