https://github.com/abdulkader-safi/easy-toast

a easy to use toast system for web developers built to be used with Vanilla JS just include the JS and css files and start showing toast to users
https://github.com/abdulkader-safi/easy-toast

css frontend html javascript toast web

Last synced: 12 days ago
JSON representation

a easy to use toast system for web developers built to be used with Vanilla JS just include the JS and css files and start showing toast to users

• Host: GitHub
• URL: https://github.com/abdulkader-safi/easy-toast
• Owner: Abdulkader-Safi
• Created: 2024-03-22T19:39:33.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-03T06:45:17.000Z (8 months ago)
• Last Synced: 2024-04-03T07:31:09.503Z (8 months ago)
• Topics: css, frontend, html, javascript, toast, web
• Language: CSS
• Homepage:
• Size: 27.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Easy-Toast

> built for project that i use vanilla Javascript or typescript that I do not want to use extra libraries with it

## how to use

1. Copy easy-toast.js to your project

2. Copy easy-toast.css to your project

3. add `
` at the bottom of you page

4. call function easyToast(Message, Position, type, Duration)


## Parameters

1. Message: string

2. position: string

   1. top

   2. bottom

   3. left

   4. right

   5. top left

   6. top right

   7. bottom left

   8. bottom right

3. type: string

   1. success

   2. warning

   3. error

4. Duration: number

   1. in seconds

   2. if you did not add it it will be 3 seconds by default

|            Error/Warning             |             Success              |

| :----------------------------------: | :------------------------------: |

| ![Error](./assets/error-worning.png) | ![Warning](./assets/success.png) |

## TODO

- [x] Show Toast

- [x] Select place to show toast

- [ ] Show stack of toasts

- [x] set timer of the toasts

- [ ] Show timer under the toast

- [ ] Add SVG logos depend on user request

- [ ] OnClick close toast

> Note: now you can only show one toast at a time