Erstellen Sie die Blöcke rot, blau und grau nur mit CSS (ohne die Markup-Struktur zu ändern, ohne Umschläge hinzuzufügen). Die Blöcke sollten entsprechend dem Beispiel im Bild angeordnet sein. Sie können Stile für den Container und die Blöcke selbst festlegen.
Frontend
Implementieren Sie eine Funktion mapper, die Daten (source), Felder (fields), Filter (filter) und Sortierung (order) akzeptiert. Es ist notwendig: die Parameter zu validieren (fields muss ein Array sein, source/filter/order sind Funktionen, die Felder in fields müssen in den Daten vorhanden sein), die Daten durch den Aufruf von source() zu erhalten, durch filter zu filtern, durch order zu sortieren und nur die angeforderten Felder aus fields zurückzugeben.
Verwenden Sie nur die DOM-API (ohne React, über document), schreiben Sie einen Code, bei dem ein Klick auf eines der Rechtecke seine Farbe ausgibt. Es ist ratsam, einen einzigen Ereignis-Handler für alle Elemente zu verwenden. Was ist der Unterschied zwischen event.target und event.currentTarget?
Führen Sie eine Code-Überprüfung des React-Komponenten durch, die Daten umschaltet, eine String-Funktion aufruft und eine Liste ausgibt. Finden und beheben Sie alle Fehler und Probleme (async in useEffect, fehlendes Abhängigkeitsarray, Verwendung des Index als key usw.).
Implementieren Sie die Methode run der Klasse Queue so, dass die Implementierung dem Beispiel entspricht. Die Methode run soll die übergebenen asynchronen Funktionen sequenziell ausführen. Die nächste Funktion in der Warteschlange kann nur nach dem Aufruf von next aufgerufen werden. Wenn in einer der Funktionen ein Fehler auftritt, werden die nachfolgenden Funktionen nicht aufgerufen. Die Methoden sollen Kettenaufrufe (chaining) unterstützen.
Schreiben Sie eine React-Komponente mit einem Button 'Hinzufügen'. Beim Klicken auf 'Hinzufügen' wird ein neuer Button mit einer Reihenfolgenummer hinzugefügt. Beim Klicken auf den erstellten Button wird dieser entfernt. Das Entfernen sollte korrekt funktionieren (nicht nach Index, sondern nach eindeutiger ID).
Implementieren Sie die Funktion asyncFilter, die ein Array von Zahlen und eine asynchrone Prädikatsfunktion übernimmt und ein gefiltertes Array zurückgibt. Zum Beispiel, bei Eingabe [1, 2, 3] und einer Funktion, die ungerade Zahlen lässt, sollte die Ausgabe [1, 3] sein.