Neu LEXIKON mit HTML erstellen auf eigener Seite

[MAJP]

hier mal was anderes ein Lexikon als Standard HTML Seite VLT ist es für euch was... nachdem das Plugin doch ein bissle was kostet und man da nicht Massen Importe machen kann... hier kann man mit excel und ein paar formeln arbeiten:
zum Aufbau es nimmt den ersten Buchstaben und ordnet es automatisch den swatches zu. also wenn man eine "1" am Anfang stehen hat muss man die Swatches maunuell hinzufügen

ich hoffe es kann jemanden weiterhelfen

die Formel ist dazu da den Inhalt zu füllen.
EXCEL FORMEL:

= "<li><strong>"&A218&":</strong> "&B218&" </li>"

HTML CODE:

<title></title>
<style type="text/css">ul {
      list-style-type: none;
    }
    
    li {
      margin-bottom: 1em;
    }
    
    .swatch {
      display: inline-flex;
        align-items: center;
        justify-content: center;
      width: 2em;
      height: 2em;
      border: 0.1em solid #000;
      margin-right: 0.25em;
      margin-bottom: 0.25em;
      cursor: pointer;
      font-size: 1.5em
    }
    .swatch.selected {
      border-width: 0.2em;
    }
</style>
<div><span class="swatch selected" data-letter="all">ALL</span>
<span class="swatch" data-letter="a">A</span>
<span class="swatch" data-letter="b">B</span>
<span class="swatch" data-letter="c">C</span>
<span class="swatch" data-letter="d">D</span>
<span class="swatch" data-letter="e">E</span>
<span class="swatch" data-letter="f">F</span>
<span class="swatch" data-letter="g">G</span>
<span class="swatch" data-letter="h">H</span>
<span class="swatch" data-letter="i">I</span>
<span class="swatch" data-letter="j">J</span>
<span class="swatch" data-letter="k">K</span>
<span class="swatch" data-letter="l">L</span>
<span class="swatch" data-letter="m">M</span>
<span class="swatch" data-letter="n">N</span>
<span class="swatch" data-letter="o">O</span>
<span class="swatch" data-letter="p">P</span>
<span class="swatch" data-letter="q">Q</span>
<span class="swatch" data-letter="r">R</span>
<span class="swatch" data-letter="s">S</span>
<span class="swatch" data-letter="t">T</span>
<span class="swatch" data-letter="u">U</span>
<span class="swatch" data-letter="v">V</span>
<span class="swatch" data-letter="w">W</span>
<span class="swatch" data-letter="x">X</span>
<span class="swatch" data-letter="y">Y</span>
<span class="swatch" data-letter="z">Z</span>
<!-- Füge hier weitere Swatches hinzu --></div>

<p></p>

<ul id="entries">
    <li><strong>Abseilen:</strong> hier die beschreibung balabalalbla.</li>
    <li><strong>Abspannleinen:</strong> hier die beschreibung balabalalbla.</li>
    <li><strong>Alpineschuhe:</strong> Ahier die beschreibung balabalalbla.</li>
    <li><strong>Zwischensohle:</strong> hier die beschreibung balabalalbla.</li>
    <!-- Füge hier weitere Einträge hinzu -->
</ul>
<script>
    var swatches = document.getElementsByClassName("swatch");
    var entries = document.getElementById("entries").getElementsByTagName("li");

 
    for (var i = 0; i < swatches.length; i++) {
      swatches[i].addEventListener("click", function() {
        var selectedLetter = this.getAttribute("data-letter");
        
        for (var j = 0; j < swatches.length; j++) {
          swatches[j].classList.remove("selected");
        }
        
        this.classList.add("selected");
        
        for (var k = 0; k < entries.length; k++) {
          var entry = entries[k];
          var firstLetter = entry.getElementsByTagName("strong")[0].textContent.charAt(0).toLowerCase();
          
          if (selectedLetter === "all" || firstLetter === selectedLetter) {
            entry.style.display = "block";
          } else {
            entry.style.display = "none";
          }
        }
      });
    }
  </script>

 

[MAJP]

HIER WÄRE DIE Version 2.

was hat sich geändert man kann jetzt themen hinzufügen und danach filtern zudem funktioniert die suche viel besser und das einpflegen neuer daten ist viel leichter

EXCEL FUNKTION WÄRE DANN

="{ term: '"&B1&"', definition: '"&C1&"', topic: '"&A1&"' },"

wobei spalte B die Bezeichnung ist C die Definition und A das Thema

<title></title>
<style type="text/css">.swatch {
      display: inline-block;
      padding: 0em 0.5em 2em 0.5em;
      min-width: 2em;
      height: 2em;
      border-radius: 2em;
      margin-right: 0.25em;
      margin-bottom: 0.25em;
      border: 0.1em solid #4D6F39;
      text-align: center;
      line-height: 2em;
      font-size: 1.5em;
      cursor: pointer; /* Hinzugefügt: Mauszeiger als Zeiger ändern */
    }

    .swatch.active {
      background-color: #4D6F39;
      color: #fff;
    }
 
    h3 {
      font-size: 1.5em;
      margin-bottom: 0.1em;
    }
    h4 {
      font-size: 1.5em;
      margin-top: 1em;
      margin-bottom: 0.5em;
    }
    p {
      margin-bottom: 1em;
    }
 
      #searchInput {
          border-radius: 2em;
          padding: 0.5em 1.5em;
          margin-bottom: 1em;
        margin-top: 1em;
          height: 2em;
        text-align: center;
        border-block-color: #F09200;
        border-inline-color: #F09200;
  }
</style>
<h3>Sotierung nach</h3>

<h4>Alpahbet</h4>

<div id="letterList"></div>

<h4>Themen</h4>

<div id="topicList"></div>
<input id="searchInput" placeholder="Suche nach einem Begriff" type="text" />
<h2 id="currentFilter"></h2>

<ul id="termList">
</ul>
<script>
  // Beispieldaten für das Lexikon
  var lexicon = [
{ term: '2,5-Lagen-Konstruktion', definition: ' Eine 2,5-Lagen-Konstruktion bei Regenjacken bedeutet, dass sie aus einer äußeren wasserdichten Schicht, einer halbdurchlässigen Membran und einem Schutzfilm auf der Innenseite besteht. Diese Konstruktion ermöglicht eine gute Wasserdichtigkeit und Atmungsaktivität bei leichtem Gewicht.', topic: 'Bekleidung' },
{ term: '3-Lagen-Konstruktion', definition: ' Eine 3-Lagen-Konstruktion bei Regenjacken bedeutet, dass sie aus einer äußeren wasserdichten Schicht, einer Membran und einem Innenfutter besteht. Diese Konstruktion bietet eine höhere Strapazierfähigkeit, bessere Atmungsaktivität und eignet sich gut für anspruchsvolle Aktivitäten und raue Wetterbedingungen.', topic: 'Bekleidung' },
{ term: 'Atmungsaktivität', definition: ' Die Atmungsaktivität einer Regenjacke bezieht sich auf ihre Fähigkeit, Feuchtigkeit von innen nach außen abzuleiten. Eine gute Atmungsaktivität verhindert ein Überhitzen und Schweißbildung im Inneren der Jacke. Atmungsaktive Regenjacken ermöglichen einen effizienten Feuchtigkeitstransport und bieten Komfort während körperlicher Aktivitäten.', topic: 'Bekleidung' },
{ term: 'Belüftungsöffnungen', definition: ' Belüftungsöffnungen sind strategisch platzierte Reißverschlüsse oder Mesh-Einsätze in einer Regenjacke, die eine verbesserte Luftzirkulation ermöglichen. Sie helfen, die Körperwärme und Feuchtigkeit zu regulieren und verhindern ein Überhitzen während intensiver Aktivitäten. Belüftungsöffnungen sind besonders bei längeren Wanderungen oder sportlichen Aktivitäten wichtig.', topic: 'Bekleidung' },

  // Ihr weitere Daten einfügen
  ];

  // Lexikon-Einträge alphabetisch sortieren
  lexicon.sort(function (a, b) {
    return a.term.localeCompare(b.term);
  });

  // Funktion zum Erstellen der Swatches für die alphabetische Übersicht
  function createLetterSwatches() {
    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var letterList = document.getElementById('letterList');

    for (var i = 0; i < letters.length; i++) {
      var swatch = document.createElement('span');
      swatch.className = 'swatch';
      swatch.textContent = letters[i];
      letterList.appendChild(swatch);
    }

    // Swatch für alle Einträge hinzufügen
    var allEntriesSwatch = document.createElement('span');
    allEntriesSwatch.className = 'swatch';
    allEntriesSwatch.textContent = 'All';
    letterList.appendChild(allEntriesSwatch);

    // Event Listener hinzufügen, um auf Swatch-Klicks zu reagieren
    var swatches = document.getElementsByClassName('swatch');
    for (var i = 0; i < swatches.length; i++) {
      swatches[i].addEventListener('click', handleSwatchClick);
    }

    // Standardmäßig "All" auswählen
    allEntriesSwatch.classList.add('active');
  }

  // Funktion zum Erstellen der Swatches für die verschiedenen Themen
  function createTopicSwatches() {
    var topics = [];
    for (var i = 0; i < lexicon.length; i++) {
      if (!topics.includes(lexicon[i].topic)) {
        topics.push(lexicon[i].topic);
      }
    }

    var topicList = document.getElementById('topicList');
    for (var i = 0; i < topics.length; i++) {
      var swatch = document.createElement('span');
      swatch.className = 'swatch';
      swatch.textContent = topics[i];
      topicList.appendChild(swatch);
    }

    // Event Listener hinzufügen, um auf Swatch-Klicks zu reagieren
    var swatches = document.getElementsByClassName('swatch');
    for (var i = 0; i < swatches.length; i++) {
      swatches[i].addEventListener('click', handleSwatchClick);
    }
  }

  // Funktion zum Behandeln von Swatch-Klicks
  function handleSwatchClick(event) {
    var swatch = event.target;
    var isActive = swatch.classList.contains('active');

    // Wenn die Swatch bereits aktiv ist, nichts tun
    if (isActive) {
      return;
    }

    // Alle aktiven Swatches deaktivieren
    var activeSwatches = document.getElementsByClassName('swatch active');
    for (var i = 0; i < activeSwatches.length; i++) {
      activeSwatches[i].classList.remove('active');
    }

    // Klickte Swatch als aktiv markieren
    swatch.classList.add('active');

    // Filter aktualisieren
    var currentFilter = document.getElementById('currentFilter');
    currentFilter.textContent = swatch.textContent;

    // Begriffsliste aktualisieren
    var filter = swatch.textContent;
    createTermList(filter);
  }

  // Funktion zum Erstellen der Begriffsliste basierend auf dem ausgewählten Filter
  function createTermList(filter) {
    var termList = document.getElementById('termList');
    termList.innerHTML = '';

    if (filter === 'All') {
      // Alle Einträge anzeigen
      for (var i = 0; i < lexicon.length; i++) {
        var termItem = document.createElement('li');
        var termTitle = document.createElement('h3');
        termTitle.textContent = lexicon[i].term;
        termItem.appendChild(termTitle);
        var termDefinition = document.createElement('p');
        termDefinition.textContent = lexicon[i].definition;
        termItem.appendChild(termDefinition);
        termList.appendChild(termItem);
      }
    } else {
      // Einträge nach Buchstabe oder Thema filtern
      for (var i = 0; i < lexicon.length; i++) {
        if (lexicon[i].term.charAt(0) === filter || lexicon[i].topic === filter) {
          var termItem = document.createElement('li');
          var termTitle = document.createElement('h3');
          termTitle.textContent = lexicon[i].term;
          termItem.appendChild(termTitle);
          var termDefinition = document.createElement('p');
          termDefinition.textContent = lexicon[i].definition;
          termItem.appendChild(termDefinition);
          termList.appendChild(termItem);
        }
      }
    }
  }

  // Funktion zum Initialisieren der Filter- und Begriffsliste
  function initialize() {
    createLetterSwatches();
    createTopicSwatches();
    createTermList('All');

    // Event Listener hinzufügen, um auf Sucheingaben zu reagieren
    var searchInput = document.getElementById('searchInput');
    searchInput.addEventListener('input', handleSearchInput);
  }

  // Funktion zum Behandeln der Sucheingaben
  function handleSearchInput(event) {
    var searchTerm = event.target.value.toLowerCase();
    var termList = document.getElementById('termList');
    termList.innerHTML = '';

    for (var i = 0; i < lexicon.length; i++) {
      var term = lexicon[i].term.toLowerCase();
      var definition = lexicon[i].definition.toLowerCase();

      if (term.includes(searchTerm) || definition.includes(searchTerm)) {
        var termItem = document.createElement('li');
        var termTitle = document.createElement('h3');
        termTitle.textContent = lexicon[i].term;
        termItem.appendChild(termTitle);
        var termDefinition = document.createElement('p');
        termDefinition.textContent = lexicon[i].definition;
        termItem.appendChild(termDefinition);
        termList.appendChild(termItem);
      }
    }
  }

  // Lexikon initialisieren
  initialize();
</script>