Home.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>BDLG Planning 2022</title>
  6. <style>
  7. {% include "stylesheet.css" %}
  8. </style>
  9. </head>
  10. <body>
  11. <div class="formcontrol home-search">
  12. <label class="formcontrol-label" for="search">Cherche ton prénom</label>
  13. <div class="formcontrol-control">
  14. <input class="input" type="text" id="search" />
  15. </div>
  16. </div>
  17. <ul class="" id="links">
  18. {%- for name, link in links %}
  19. <li class="link-item">
  20. <a href="./{{ link }}">{{ name }}</a>
  21. </li>
  22. {%- endfor %}
  23. </ul>
  24. <script>
  25. const input = document.getElementById("search");
  26. const link_list = document.getElementById("links").children;
  27. var changeListener = (evt) => {
  28. const text = input.value.toLowerCase();
  29. for (let node of link_list) {
  30. if (node.innerText.toLowerCase().includes(text)) {
  31. node.classList.remove("hide");
  32. } else {
  33. node.classList.add("hide");
  34. }
  35. }
  36. };
  37. input.addEventListener("input", changeListener);
  38. </script>
  39. </body>
  40. </html>