Tailwind und VanillaJS – Toast Hawaii bzw. Notification

Stellt euch vor ihr wollt für ein Shop eine Notification oder auch bekannt als Toast ausgeben. Zum Beispiel Produkt in Warenkorb gelegt. Oder „ups, leider ist das Produkt in ihrer Größe nicht mehr vorhaben. Es gibt hier echt viele und gute Bibliotheken. Aber ich will selber eine Toaster Klasse bauen, weil mir der Overhead gerade nicht passt. Ansonsten immer gerne. Weil man muss ja nicht das Rad jedes Mal von vorne erfinden.

Die Vorüberlegung

– die ToastHawaii Klasse kann bei der Initiierung ein Config Objekt mitgegeben werden. In meinem Beispiel ist nur die Verweildauer des Toast in der Config enthalten. Man kann es hier noch genügend anreichern. Position des Posts, Style Klassen und und und.

– mit der Toast Methode makeToast( {title: <string>, msg: <string>,style:<string>}) kann ein Toast angetriggert werden
– Wenn mehrere Toast hintereinander abgefeuert werden hänge den neusten Toast unten ran
– Im Quelltext befindet sich nur Componenten Container der mit der id toast-hawaii angesprochen wird

Der Aufbau der Klasse

– constructor(paras = {}),
– getIcon()
– makeToast()
– die Klasse beinhaltet das HTML und kann somit für andere Toastdesign problemlos angepasst werden
– makeToast kann default Config Parameter die bei der Instanziierung des Objekts mitgegeben wurden überschreiben (zum Beispiel Anzeigedauer / duration)
– makeToast besitzt Pflichtfelder die als Parameter vom Type Objekt mitgegeben werden ( {title:‘‘, msg: ‘‘, style=‘‘} )

Die Umsetzung

– HTML
– VanillaJS
– TailwindCSS

Es würde mich riesig freuen, wenn ihr auf GitHub das Projekt Folkt und mit weiterentwickelt. Um somit ein solides und einfaches sowie flexibles Notifikation System in Tailwind und purem Javascript anzubieten.

Zum GitHub: https://github.com/MikeLowrey/toast-hawaii

Demo Toast Hawaii


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Alphanumeric sorting of an array with objects according to the value of an object

June 30, 2022

Especially in the frontend it happens quite often that you want to sort an array, an array with objects according to a certain pattern. Javascript has very performant and nice functions. But you can use these functions not only in the frontend. If you write your backend with NodeJS you will also appreciate the array […]

JS reduce()

March 21, 2022

Man hat ein array und möchte zum Beispiel alle Zahlen im Array kumulieren. Mit der Javascript Array Function reduce() geht das ganz leicht.

Return days of a month in an array

March 14, 2022

You need all days of a certain month then you can use this function: getDaysInMonth = (month,year) => new Date(year, month, 0).getDate();console.log( […Array(getDaysInMonth(3, 2022)).keys()] ); Greets!

JS flat()

March 9, 2022

Es kommt schon mal vor das man geschachtelte arrays bekommt.Zum Beispiel: Man möchte aus einem geschachteltem Array alle Werte in einem Array sammeln. Mit der array Funktion flat() ist das kein Problem. Auch mehrstuffig verschachtelte Arrays kann man geradeziehen (flatten). Indem man der flat Funktion die Anzahl der verschachtelungen die aufgelöst werden sollen, mitgibt. Da […]

JS bind()

March 8, 2022

Ein einfaches besipiel um JS bind() function zu verdeutlichen:

Javascript – Fakultät berechnen

January 19, 2022

Ab und an braucht man das und nicht nur in der Kombinatorik. Wer es etwas übersichtlicher braucht (und dazu zähle ich mich auch) kann es auch in einer for schleife machen.