usable application #1
37
public/header.js
Normal file
37
public/header.js
Normal 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();
|
@ -6,26 +6,17 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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">
|
||||
<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">
|
||||
</form>
|
||||
<br>
|
||||
<img src="chairman_1.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">
|
||||
<script src="/header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
@ -6,18 +6,7 @@
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<label for="username"><p>Username</p></label>
|
||||
<input type="text" name="username" id="username">
|
||||
@ -41,6 +30,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<script src="/header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
@ -6,18 +6,7 @@
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
<label for="username"><p>Username</p></label>
|
||||
<input type="text" name="username" id="username">
|
||||
@ -41,6 +30,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<script src="/header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
@ -6,23 +6,14 @@
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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" action="/search" target="_self">
|
||||
<input type="text" name="query" placeholder="...">
|
||||
<form method="GET" target="_self" action="/search">
|
||||
<label for="query"><p>Search</p></label>
|
||||
<input type="text" id="query" name="query" placeholder="...">
|
||||
<input type="submit" value="Search">
|
||||
</form>
|
||||
<br>
|
||||
<br>
|
||||
<div id="result">
|
||||
<noscript>
|
||||
<div class="mao-error">
|
||||
@ -36,6 +27,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
<script src="/header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
@ -6,18 +6,7 @@
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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">
|
||||
<label for="username"><p>Title</p></label>
|
||||
<input type="text" name="title">
|
||||
@ -27,6 +16,7 @@
|
||||
<br>
|
||||
<input type="submit" id="submit" value="Upload">
|
||||
</form>
|
||||
<script src="/header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user