Erster Javascript-Code

[prodliluk]

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!

[admin]

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

[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

[prodliluk]

Hallo zusammen!
Ich habe mich etwas mit Javascript beschäftigt und und hab mittlerweile geschafft, die Textdatei (die den einen Speicherstand enthält) einzulesen, in ein Array zu schieben.
Das Interface sieht folgendermaßen aus: https://imgur.com/a/au9BXCU
Die einzelnen Fotos der Charaktere führen mit 'onclick' eine Funktion (change()) aus. Diese lädt eine .txt-Datei, schiebt -wie gesagt- das Ganze mittels einer for-Schleife in ein Array, das die aktuelle Zeile enthält. Anschließend sollen aus dem Array Objekte der einzelnen Spalten erzeugt werden, wobei diese Objekte wiederum in eine Liste sollen.
Mein Code dazu sieht folgendermaßen aus:
```
const champ = {
  name,
  status
}

function change(){
  var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "champs.txt", true);
    rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4) {
        var allText = rawFile.responseText;
        console.log(allText);
        const champArray = allText.split('\n');
        console.log(champArray);
        var list = [];
        for (let i = 0; i < champArray.length; i++){
          let currentChamp = champArray[i].split(', ');
          //const c = champ;
          champ.name = currentChamp[0];
          champ.status = currentChamp[1];
          console.log(champ.name)
          console.log(champ.status)
          list.append(champ);
        }
        console.log(list);
      }
    }
    //console.log(allText);
    rawFile.send();
  } 
```

Die Textdatei ist dabei so aufgebaut:
```
Name1, 1
Name2, 1
Name3, 1
```

Bekomme aber als Output für die Liste folgendes:
```
(3) [{…}, {…}, {…}]0: {name: 'name3', status: '3}1: {name: 'name3', status: '1'}2: {name: 'name3', status: '1'}length: 3[[Prototype]]: Array(0)
```

Kann mir da jemand behilflich sein?

Nebenbei: Wo liegt der Unterschied bei js bei Listen und Array? Oder ist das das Gleiche?

Liebe Grüße!
Luke

[admin]

Kannst du mal einen Code fertig machen, den man auch testen kann?
Bei codepen.io kannst du testbare Codes erstellen.
Dann wäre der Inhalt von der TXT Datei auch hilfreich , weil so kann ich nur raten wie es aussieht

Dann muss ich wissen, wie es aussehen soll.
Du schreibst zwar, was du als Ausgabe bekommt , aber nicht wie sie aussehen soll.

Also bitte html css und javascript alles bei Codepen einbauen .
Selbst wenn der JS Code da nicht läuft , ist egal , weil den wollen wir ja zum laufen bekommen.

Dann noch den Inhalt de TXT Datei hier posten.
Und dann noch erklären wie was passieren soll wenn ich wo oder was klicke.

[prodliluk]

Hallo, mittlerweile habe ich es geschafft, das gewünschte durchzuführen. Sieht folgendermaßen aus: https://codepen.io/zwitscherluke/pen/jOxepgL
Die .txt-File ist die hier: https://codepen.io/zwitscherluke/pen/LYmgJYo

Beim Klick auf eins der Bilder soll die Funktion Change ausgeführt werden, also das Öffnen der txt, abändern des Inhalts und zurückspeichern. Letzteres habe ich noch nicht umgesetzt.
Wie mache ich das am besten?

Ich hab etwas recherchiert, ich denke das es wichtig zu erwähnen ist, dass das Ganze im Browser läuft. (bez. auf require und import). Aber wie gesagt, ich kenne mich damit eher wenig aus.

---

sollte das Ganze nicht mit
```
import fs from 'fs';
fs.writeFile('champs.txt', newAllText, err => { if(err){ console.err; return } });
```
funktionieren, wenn ich aus der change.js eine change.mjs mache. Leider passiert nichts, die Datei wird nicht beschrieben.

[admin]

Wo ist denn die txt Datei , auf dem Server (Homepage ).
Wenn ja, brauchst du wohl PHP , oder ein anderes Serverseitiges Script.

Javascript kann das nicht.
Des Weiteren würde ich eine JSON Datei oder CSV Datei nehmen für dein Vorhaben.
Ist einfacher und man brauch weniger Code