https://github.com/codersuresh/alert-for-web
Simple alert dialog component for web
https://github.com/codersuresh/alert-for-web
frontend hacktoberfest hacktoberfest2023 npm-package
Last synced: 3 months ago
JSON representation
Simple alert dialog component for web
- Host: GitHub
- URL: https://github.com/codersuresh/alert-for-web
- Owner: coderSuresh
- Created: 2023-08-07T17:39:21.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-09T04:17:31.000Z (about 1 year ago)
- Last Synced: 2025-01-07T20:11:55.659Z (5 months ago)
- Topics: frontend, hacktoberfest, hacktoberfest2023, npm-package
- Language: TypeScript
- Homepage: https://codersuresh.github.io/alert-for-web/
- Size: 106 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Alert for Web - Show alert message on web page
[](https://badge.fury.io/js/alert-for-web)
[](https://opensource.org/licenses/MIT)
This is a simple script that shows an alert message on a web page. It can be used to show a message on a web page when a certain event occurs. For example, when a backup is completed, or when a long running process is finished.
## installation
```
npm install alert-for-web
```
## Usage
``index.html``
```html
Alert for Web
</head>
<body>
<button class="btn">Show Alert</button>
</body>
```
``app.js ``
```javascript
//import package
import showAlert from "https://www.unpkg.com/[email protected]/dist/main.js";
//use any element to trigger the alert
const btn = document.querySelector('.btn');
btn.addEventListener("click", () => {
//call the showAlert function
showAlert({
title: "Success",
message: "This is a success alert",
level: "success",
button: "Close"
})
})
```
## Options
| Option | Type | Default | Optional | Description |
| ------ | ---- | ------- | -------- | ----------- |
| title | string | null | no | The title of the alert |
| message | string | null | no | The message of the alert |
| level | string | success | yes | The level of the alert. Possible values are: success, warning, error. |
| button | string | Close | yes | The text of the button |
## License
[MIT](https://choosealicense.com/licenses/mit/)
## Authors
- [@Shishir98123](https://www.github.com/Shishir98123)
- [@coderSuresh](https://www.github.com/coderSuresh)