Erster Javascript-Code

[rzscout]

Hi prodliluk,

das geht ganz leicht in CSS und JavaScript. Als erstes erstellst du mithilfe von CSS Grid einen Grid für die Bilder. Als nächstes dursuchst du die Dateinamen nach dem Suchbegriff und da wo es übereinstimmt, kannst du dem Bild via JavaScript eine Klasse geben die das Bild verstecken bzw. ausgrauen lassen soll.

Code:

'use strict';
// Startet die Funktion init erst wenn das DOM vollständig geladen wurde
document.addEventListener('DOMContentLoaded', init);
function init() {
  // Speichert Inputfeld in lokale Variable
  let search = document.querySelector("#suchInput");

  // Führt bei Eingabe von Text ins Inputfeld eine Funktion aus
  search.addEventListener("input", function() {
    // Speichert jegliche Bilder mit der Klasse searchIMG in eine lokale Variable
    let pics = document.querySelectorAll("img.seachIMG");
    // Führt die Suche erst bei Eingaben von mindestens 3 Zeichen durch
    if(search.value.length > 2) {
      // Führt eine foreach-Schleife durch und zwar auf die einzelnen Bilder
      pics.forEach((item, i) => {
        // Speichert den aktuellen Dateinamen samt Pfad
        let itemSrc = item.src;
        // Schaut ob in diesem der Suchbegriff vorhanden ist
        if(!itemSrc.includes(search.value)) {
          // Wenn Suchbegriff nicht vorhanden ist, dann Klasse hide hinzufügen
          item.classList.add('hide');
        } else {
          // Wenn der Suchbegriff vorkommt dann die Klasse hide entfernen
          item.classList.remove('hide');
        }
      });
    } else {
      pics.forEach((item) => {
        // Wenn es weniger als drei Zeichen in Sucheingabe ist sollen alle Bilder angezeigt werden.
        item.classList.remove('hide');
      });
     
    }       
  });
}

Viel Erfolg beim Umsetzen und bitte ein Feedback oder weitere Fragen hier in den Thread.

Viele Grüße

rzscout