Logo
screenshot of expenses chart component

Expenses Chart Component

next.jsreacttailwindcsstypescript

Dies ist eine Lösung für die Expenses Chart Component Challenge auf Frontend Mentor.

Anforderungen

Benutzer*innen sollten in der Lage sein:

  • Das Balkendiagramm anzusehen und beim Überfahren der einzelnen Balken die korrekten Beträge für jeden Tag zu sehen
  • Die Leiste des aktuellen Tages in einer anderen Farbe als die anderen Balken hervorgehoben zu sehen
  • Das optimale Layout für den Inhalt abhängig von der Bildschirmgröße ihres Geräts zu sehen
  • Hover-Zustände für alle interaktiven Elemente auf der Seite zu sehen
  • Bonus: Die bereitgestellte JSON-Datendatei zu verwenden, um die Balken im Diagramm dynamisch zu skalieren

Gebaut mit

Code-Qualität mit

Implementierungszeit

Diese Challenge wurde innerhalb von 2 Stunden abgeschlossen.