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


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.

Javascript – Was ist eigentlich Promisification?

January 6, 2022

“Promisification” ist ein lange Wort für eine ganz simple Sache. Es geht eigentlich um die immer gleiche Frage, sobald man das erste Mal in JS eine API Anfrage stellt. Wie krieg ich das Zeug in den globalen Scope? Man bedient sich ganz einfach damit, die asynchronität zu stoppen und mal ein päuschen einzulegen. Sobald dann […]

JS find() – Im array suchen

December 16, 2021

Ihr habt ein array mit drei ToDo Objekten. Ihr wollte jetzt nach dem Nutzernamen suchen um das Objekt auszulesen. Output Toll!

JS reverse() – Ein Array umkehren

December 16, 2021

Wer hat das noch nicht versucht? Ein array zu bekehren? 😉 In JS gibt es die Funktion reverse() die ein Array umdreht. Besipiel const people = [{name: ‘Alfons’},{name: ‘Bernd’},{name: ‘Christian’}]; Jetzt bekehren wir sie :-0 const convertetedPeople = people.reverse(); JS ist einfach cool!

Drei nützliche JavaScript Object Funktionen

October 14, 2021

Es gibt im JavaScript viele nützliche Array Funktionen aber wiederum gelten die nicht für Objekte. Das kann zum Beispiel ein Grund sein, warum man sich einer Object Funktion bedient um daraus ein Array zu machen. Ich stelle im Folgenden die Funktionen: Object.keys, Object.value und Object.entries vor. Ausgangsituation wäre ein nettes Objekt: Das sind nämlich die […]

Javascript – Das doppelte Ausrufezeichen

April 8, 2021

Der ein oder andere hat es vielleicht schon gesehen. In Javascript gibt es das doppelte Ausrufezeichen und nicht jeder kann damit auf anhieb etwas anfangen. Mein erster Gedanke war. Doppelte Verneinung. Ein häufiges Stilelement aus der russischen Sprache. Manche denken das ist ein Operator. Wieder andere denken, dass ist ein Tippfehler. The double exclamation mark […]