Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Erster Javascript-Code
#1
Star 
Hallo zusammen! 

Ich bin gerade dabei, mir etwas javascript anzueignen. 
Hatte für ein erstes Projekt folgende Idee: 

Dafür würde ich gerne ein Seite erstellen, die Bilder im Gitterlayout auflistet. Dabei soll es auch eine Suchleiste dafür geben (sobald die Suche gestartet wird, werden nur noch Bilder angezeigt, die mit dem Dateinamen (teils) übereinstimmen. 
Als kleines Obendrauf sollen nun auch Fotos, die man anklickt, ausgegraut werden und für späteres Öffnen der Seite auch wieder so geladen werden. 
Eine Skizze sieht dazu so aus:       https://imgur.com/a/2NiqIUW 

Ist die Umsetzung eher schwer oder machbar für einen Neuling. 
Falls es das ist, wie fange ich am besten an? 

Grüße!
Zitieren
#2
Die Bilder und Suchleiste erstellen mit CSS und HTML ist kein Problem.
Dann musst du ein Javascript erstellen, was die angezeigten Bilder nach den Suchwort durchsuchen. Nur wo soll er suchen , im Bildnamen ?
Bei jeden Treffer wird das Bild angezeigt und bei keinem Treffer ausgeblendet.

Das kann man auch als Anfänger schaffen , obwohl es für Anfänger schon eine Herausforderung ist.
Was hast du den bis jetzt schon versucht
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#3
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.

'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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


[-]
Schnellantwort
Nachricht
Geben Sie hier Ihre Antwort zum Beitrag ein.

 

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste