header.js

This commit is contained in:
Theis Pieter Hollebeek 2024-01-19 03:59:53 +01:00
parent b0a0264949
commit 7d830830f6
6 changed files with 53 additions and 63 deletions

37
public/header.js Normal file
View File

@ -0,0 +1,37 @@
function displayHeader() {
const links = [
{
href: "/",
name: "Home",
},
{
href: "/register/",
name: "Register",
},
{
href: "/login/",
name: "Login",
},
{
href: "/upload/",
name: "Upload",
},
].map(({name, href}) => {
if (href === window.location.pathname) {
return `<a href="${href}"><b>${name}</b></a>`
} else {
return `<a href="${href}">${name}</a>`
}
}).join(" - ");
document.querySelector("h1").outerHTML = `
<header>
<h1>MaoTube</h1>
<nav>
${links}
</nav>
</header>
`
}
displayHeader();

View File

@ -6,26 +6,17 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header>
<h1>MaoTube</h1> <h1>MaoTube</h1>
<nav>
<a href="/"><b>Home</b></a> -
<a href="/search">Search</a> -
<a href="/register">Register</a> -
<a href="/login">Login</a> -
<a href="/upload">Upload</a>
</nav>
<br>
<br>
</header>
<form method="GET" target="_self" action="/search"> <form method="GET" target="_self" action="/search">
<input type="text" name="query" placeholder="..."> <label for="query"><p>Search</p></label>
<input type="text" id="query" name="query" placeholder="...">
<input type="submit" value="Search"> <input type="submit" value="Search">
</form> </form>
<br> <br>
<img src="chairman_1.jpg" alt="The chairman" height="600"> <img src="chairman_1.jpg" alt="The chairman" height="600">
<img src="chairman_2.jpg" alt="The chairman" height="600"> <img src="chairman_2.jpg" alt="The chairman" height="600">
<img src="chairman_3.jpg" alt="The chairman" height="600"> <img src="chairman_3.jpg" alt="The chairman" height="600">
<script src="/header.js"></script>
</body> </body>
</html> </html>

View File

@ -6,18 +6,7 @@
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
<header>
<h1>MaoTube</h1> <h1>MaoTube</h1>
<nav>
<a href="/"><b>Home</b></a> -
<a href="/search">Search</a> -
<a href="/register">Register</a> -
<a href="/login">Login</a> -
<a href="/upload">Upload</a>
</nav>
<br>
<br>
</header>
<div> <div>
<label for="username"><p>Username</p></label> <label for="username"><p>Username</p></label>
<input type="text" name="username" id="username"> <input type="text" name="username" id="username">
@ -41,6 +30,7 @@
</div> </div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
<script src="/header.js"></script>
</body> </body>
</html> </html>

View File

@ -6,18 +6,7 @@
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
<header>
<h1>MaoTube</h1> <h1>MaoTube</h1>
<nav>
<a href="/"><b>Home</b></a> -
<a href="/search">Search</a> -
<a href="/register">Register</a> -
<a href="/login">Login</a> -
<a href="/upload">Upload</a>
</nav>
<br>
<br>
</header>
<div> <div>
<label for="username"><p>Username</p></label> <label for="username"><p>Username</p></label>
<input type="text" name="username" id="username"> <input type="text" name="username" id="username">
@ -41,6 +30,7 @@
</div> </div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
<script src="/header.js"></script>
</body> </body>
</html> </html>

View File

@ -6,23 +6,14 @@
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
<header>
<h1>MaoTube</h1> <h1>MaoTube</h1>
<nav> <form method="GET" target="_self" action="/search">
<a href="/"><b>Home</b></a> - <label for="query"><p>Search</p></label>
<a href="/search">Search</a> - <input type="text" id="query" name="query" placeholder="...">
<a href="/register">Register</a> -
<a href="/login">Login</a> -
<a href="/upload">Upload</a>
</nav>
<br>
<br>
</header>
<form method="GET" action="/search" target="_self">
<input type="text" name="query" placeholder="...">
<input type="submit" value="Search"> <input type="submit" value="Search">
</form> </form>
<br> <br>
<br>
<div id="result"> <div id="result">
<noscript> <noscript>
<div class="mao-error"> <div class="mao-error">
@ -36,6 +27,7 @@
</div> </div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
<script src="/header.js"></script>
</body> </body>
</html> </html>

View File

@ -6,18 +6,7 @@
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
<header>
<h1>MaoTube</h1> <h1>MaoTube</h1>
<nav>
<a href="/"><b>Home</b></a> -
<a href="/search">Search</a> -
<a href="/register">Register</a> -
<a href="/login">Login</a> -
<a href="/upload">Upload</a>
</nav>
<br>
<br>
</header>
<form action="/api/upload_video" method="POST" enctype="multipart/form-data"> <form action="/api/upload_video" method="POST" enctype="multipart/form-data">
<label for="username"><p>Title</p></label> <label for="username"><p>Title</p></label>
<input type="text" name="title"> <input type="text" name="title">
@ -27,6 +16,7 @@
<br> <br>
<input type="submit" id="submit" value="Upload"> <input type="submit" id="submit" value="Upload">
</form> </form>
<script src="/header.js"></script>
</body> </body>
</html> </html>