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>
<button id="dropdown-button">≡</button>
<div id="dropdown">
<a href="https://tpho.dk">based site</a>
<a href="https://tpho.dk">based site</a>
<button id="map-redirect">Kort</button>
<button id="reviews-redirect">Anmeldelser</button>
</div>
</div>
<main>
<main id="main">
<form id="search-bar">
<input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
<button id="search-button" type="submit">Search</button>
@ -33,7 +33,6 @@
<div id="info">
<p id="zip-code">Postnummer ikke fundet</p>
<p id="mouse-position"></p>
<a href="reviews.html">Anmeldelser</a>
<p id="coords"></p>
</div>
</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() {
if (navigator.userAgent.match("Chrome")) {
location.href = "https://mozilla.org/firefox";
@ -203,6 +244,7 @@ function main() {
setupMap(mousePositionElement, coordsElement, zipCodeElement);
setTopbarOffset();
addToggleDropdownListener();
pageRedirects();
}
main();

11
frontend/src/review.ts
View File

@ -1,6 +1,14 @@
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
reviewContainer.innerHTML +=
`<div id="review${id}">
@ -11,4 +19,3 @@ function addReview(location: string, title: string, content: string, stars: numb
</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);
}
#dropdown a {
#dropdown button {
border: none;
background-color: var(--brand);
color: var(--light);
padding: 1rem 1rem;
font-weight: bold;
text-decoration: none;
outline: none;
cursor: pointer;
}
#dropdown a:hover, #dropdown a:focus {
#dropdown button:hover, #dropdown button:focus {
background-color: var(--brand-300);
}
#dropdown a:last-child {
#dropdown button:last-child {
border-radius: 0 0 0 5px;
}