03/2025 - 04/2025

Referenzprojekt »Fortunes«

Webkomponente zur Darstellung von Sprüchen

Sprüche auf der eigenen Webseite darstellen

»Fortunes« ist eine Webkomponente, die ein oder mehrere Sprüche auf einer Webseite anzeigen kann.

Sie ist responsiv (auch für mobile Geräte geeignet), kann an das Design der Website angepasst werden, hat einen sehr geringen Speicherbedarf (ca. 100 KB) und die Sprichwortdatenbank kann leicht erweitert oder ersetzt werden.

Funktionen

  • Darstellung von Sprüchen auf der eigenen Webseite
  • Die Sprüche können einzeln oder in einem Grid dargestellt werden
  • In jedem Spruch kann zum nächsten/vorherigen Spruch navigiert oder ein zufälliger Spruch dargestellt werden, zudem kann die Spruchnummer auch direkt eingegegben werden
  • Bei Vorhandensein eines Autors wird dieser automatisch versucht in der angegebenen Wissensdatenbak (konfigurierbar) zu finden
  • Die Spruchbasis ist im Json-Format und frei erweiter-/austauschbar
  • Die Komponente ist frei stylebar
  • Das Hosting erfolgt auf der eigenen Webseite, es werden keine Ressourcen auf eine andere Webseite benötigt

Webkomponente auf Svelte-Basis

Die Implementierung erfolgte auf Svelte-/Typeskript Basis und zeichnet sich durch einen besonders geringen Fußabdruck des erzeugten Javascript-Files (ca. 100kb) aus und kommt ohne jede weitere JS-Bibliothek oder Abhängigkeit aus. Zudem war sie über CSS-Variablen umfangreich stylebar und damit an das Design/­Layout der Zeilseite anpassbar.

Demo-Seite

Die Webkomponente wurde als Demo inlusive Anleitung auf unseren Produktseiten integriert und kann von dort heruntegeladen werden.


Aufgabe im Projekt

Team-Leitung sowie Analyse, Design und Implementierung der Svelte Webkomponente.

construction

Technik

WindowsWindows 11LinuxSvelteSvelte 4WebComponentNode.jsJsonTypescriptTypescript 5.7JavascriptHTMLSCSSVisual Studio Code

group

Projektgröße

1 MAProjektsprache DeutschDokumentation Englisch

lightbulb

Durch das Auswählen von Eigenschaften dieses Projektes, können weitere Projekte mit ähnlichen Eigenschaften gesucht werden.

Ähnliche Projekte suchen
×