Skip to content
Snippets Groups Projects
Commit 7791a570 authored by HerrWaechter's avatar HerrWaechter
Browse files

Searchable Courses

parent 866a3dd2
No related merge requests found
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Course</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<nav class="navbar">
<div class="logo"><a href="Homepage.html">LOGO</a></div>
<div class="nav-dots">
<h1>Add Course</h1>
</div>
<a href="#" class="account-btn">Account</a>
</nav>
<main class="main-content">
</main>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Course</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js" defer></script>
<style>
.main-content {
grid-template-columns: 1fr;
}
#input {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#UL {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo"><a href="Homepage.html">LOGO</a></div>
<div class="nav-dots">
<h1>Add Course</h1>
</div>
<a href="#" class="account-btn">Account</a>
</nav>
<main class="main-content">
<input type="text" id="input" onkeyup="search()" placeholder="Search...">
<ul id="UL">
<li class="box" data-href="joinGroup.html">
Course 1
</li>
<li class="box" data-href="joinGroup.html">
Course 2
</li>
<li class="box" data-href="joinGroup.html">
Prog
</li>
<li class="box" data-href="joinGroup.html">
Prog 2
</li>
<li class="box" data-href="joinGroup.html">
Test
</li>
</ul>
</main>
</body>
<script>
function search() {
var input, filter, div, ul, li, a, i, txtValue;
input = document.getElementById('input');
filter = input.value.toUpperCase();
ul = document.getElementById("UL");
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
txtValue = li[i].textContent || li[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</html>
\ No newline at end of file
File moved
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment