Eine einfache Diashow-Anwendung, die aus der HackerRank Certification Test Suite stammt

Blog

Eine einfache Diashow-Anwendung, die aus der HackerRank Certification Test Suite stammt

Reagieren: Diashow-App

Umfeld

  • Reagieren-Version: 16.13.1
  • Knotenversion: ^12.18.3
  • Standardport: 8000

Projektspezifikationen

Eine einfache Diashow-Anwendung, die aus der HackerRank-Zertifizierungstestsuite stammt.



Erstellen Sie eine einfache Diashow-Anwendung, wie unten gezeigt. Die Anwendungsanforderungen sind unten aufgeführt, und die fertige Anwendung muss alle Komponententests bestehen.



Ihre Aufgabe ist es, die Implementierung von |_+_| . abzuschließen nach folgenden Anforderungen:

  • Die Komponente Folien verwendet ein Array von Folien als Requisite. Jedes Element dieses Arrays bezeichnet eine einzelne Folie und ist ein Objekt mit 2 Eigenschaften: String-Titel und String-Text.
  • Beim Anwendungsstart muss die erste Folie gerendert werden.
  • Durch Klicken auf die Schaltfläche Weiter wird die nächste Folie angezeigt. Diese Schaltfläche ist deaktiviert, wenn die aktuelle Folie die letzte ist.
  • Wenn Sie auf die Schaltfläche Zurück klicken, wird die vorherige Folie angezeigt. Diese Schaltfläche ist deaktiviert, wenn die aktuelle Folie die erste ist.
  • Durch Klicken auf die Schaltfläche Neustart kehren Sie zur ersten Folie zurück. Diese Schaltfläche ist deaktiviert, wenn die aktuelle Folie die erste ist.
  • Sie können davon ausgehen, dass das Array übergebene Folien mindestens eine Folie enthält.

Zunächst wird die Datei mit Boilerplate-Code gefüllt. Beachten Sie das Folgende:



  • Die Schaltfläche Neustart muss |_+_| haben.
  • Die Schaltfläche Zurück muss |_+_| haben.
  • Die Schaltfläche Weiter muss |_+_| haben.
  • Der Titel jeder Folie muss als |_+_| . gerendert werden Element mit |_+_|.
  • Der Text jeder Folie muss als |_+_| . gerendert werden Element mit |_+_|.

Bitte beachten Sie, dass die Komponente die oben genannten data-testid-Attribute für Testfälle und bestimmte Klassen und IDs für Renderingzwecke besitzt. Es wird empfohlen, sie nicht zu ändern.

Schreibgeschützte Dateien

  • src/components/Slides.js

Befehle

  • Lauf:
data-testid='button-restart'
  • Installieren:
data-testid='button-prev'
  • Prüfung:
data-testid='button-next'

Download-Details:

Autor: vimbo95

Quellcode: https://github.com/vimbo95/Diashow-App

#reagieren #reactjs #javascript