https://github.com/koddr/sweetconfirm.js
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.
https://github.com/koddr/sweetconfirm.js
button-animation css3-animations forms gradient javascript-ux pure-javascript submit-button ui-components ux
Last synced: about 16 hours ago
JSON representation
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.
- Host: GitHub
- URL: https://github.com/koddr/sweetconfirm.js
- Owner: koddr
- License: mit
- Created: 2019-12-10T20:28:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-05T09:11:05.000Z (over 3 years ago)
- Last Synced: 2025-04-29T19:57:40.172Z (about 17 hours ago)
- Topics: button-animation, css3-animations, forms, gradient, javascript-ux, pure-javascript, submit-button, ui-components, ux
- Language: JavaScript
- Homepage: https://sweetconfirm.js.org
- Size: 4.61 MB
- Stars: 37
- Watchers: 5
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Throw out pop-ups confirming the submission of form!
A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution
for drop an annoying pop-ups confirming the submission of form in your web apps.
## [Docs](https://sweetconfirm.js.org), [Change log](CHANGELOG.md)
## Install
Simple install to your project via `npm`:
```console
npm install --save sweetconfirm.js
```
Or include to your html page from fast CDN [jsDelivr](https://www.jsdelivr.com/):
```html
```
## How to use?
Let's start with HTML page and some CSS styles for submit button (`./index.html`):
```html
Document
button {
display: block;
border-radius: 30px;
cursor: pointer;
}
💬 Push the button!
```
Next, time for JavaScript (`./script.js`):
```js
import { SweetConfirm } from "sweetconfirm.js";
// Define element (button)
var button = document.getElementById("button");
// Init SweetConfirm.js to element with callback
new SweetConfirm(button, () => {
console.log("This is fake data!");
});
```
### Use via CDN
Similar to `npm` way, but easily (all-in-one `./index.html` file):
```html
💬 Push the button!
// Define vars
var button, message;
button = document.getElementById("button");
message = document.getElementById("message");
// Callback function
function showMessage(element, text) {
element.innerText = text;
}
// Init SweetConfirm.js
new SweetConfirm(button, () => {
showMessage(message, "OK! Refresh page for try again.");
});
```
## What about options?
```console
function SweetConfirm ( element, function () {...}, [options, ...] )
```
| **Option** | **Description** | **Default value** |
| ----------------------- | --------------------------------------------------------------------------------------------- | ------------------ |
| `bg` | Background color for initial state, usually equal to `gradient.from_color` | `#0f4c81` |
| `bgSize` | Size of `background`; for better effect must be greater than 100% at the first value | `215% 100%` |
| `bgPositionIn` | Background position for init animation | `right bottom` |
| `bgPositionOut` | Background position for end animation | `left bottom` |
| `trans.init` | Enabled initial `transition` when page is loaded (`DOMContentLoaded` event) | `true` |
| `trans.in` | A `transition` speed in seconds for `DOMContentLoaded` event | `0.5` |
| `trans.out` | A `transition` speed in seconds for `mouseup` event | `0.5` |
| `gradient.deg` | Angle or position of the gradient line's starting point | `135deg` |
| `gradient.from_color` | From (start) color | `#0f4c81 50%` |
| `gradient.to_color` | To (stop, end) color | `#fa7268 50%` |
| `question` | Message during holding mouse/key button on `element` | `🤔 Are you sure?` |
| `success.message` | Message after callback function | `👍 Success!` |
| `success.color` | Color of success message | `#00b16a` |
| `timeout` | Time for `setTimeout()` function in miliseconds; this option also define a `transition` speed | `3000` |
### Use SweetConfirm.js with custom options
```js
// Define options
var options = {
bg: "#0f4c81",
bgSize: "215% 100%",
bgPositionIn: "right bottom",
bgPositionOut: "left bottom",
trans: {
init: true,
in: 0.5,
out: 0.5
},
gradient: {
deg: "135deg",
from_color: "#0f4c81 50%",
to_color: "#fa7268 50%"
},
question: "🤔 Are you sure?",
success: {
message: "👍 Success!",
color: "#00b16a"
},
timeout: 3000
};
// Init SweetConfirm.js with options
new SweetConfirm(element, () => {}, options);
```
## Demo on localhost
You may serve downloaded repository by simple Python 3 CLI snippet (for macOS/Linux/Windows WSL).
First, clone repository:
```console
git clone https://github.com/koddr/sweetconfirm.js.git
cd sweetconfirm.js
```
Let's serve it (with Python 3, for example):
```console
python3 -m http.server 8080 --bind 127.0.0.1
```
And now, go to browser to see `SweetConfirm.js Example` page:
```console
http://127.0.0.1:8080/examples
```
## Size-limit report
```console
npm run size
Time limit: 70 ms
Size: 434 B with all dependencies, minified and gzipped
Loading time: 10 ms on slow 3G
Running time: 51 ms on Snapdragon 410
Total time: 61 ms
```
_Thanks to Andrey Sitnik [@ai/size-limit](https://github.com/ai/size-limit)._
## Developers
- Idea and active development by [Vic Shóstak](https://github.com/koddr) (aka Koddr).
## Project assistance
If you want to say «thank you» or/and support active development `SweetConfirm.js`:
1. Add a GitHub Star to project.
2. Twit about project [on your Twitter](https://twitter.com/intent/tweet?text=Throw%20out%20pop-ups%20confirming%20the%20submission%20of%20form!&url=https://github.com/koddr/sweetconfirm.js).
3. Donate some money to project author via PayPal: [@paypal.me/koddr](https://paypal.me/koddr?locale.x=en_EN).
4. Join DigitalOcean at our [referral link](https://m.do.co/c/b41859fa9b6e) (your profit is **$100** and we get $25).
Thanks for your support! 😘 Together, we make this project better every day.
[](https://www.digitalocean.com/?refcode=b41859fa9b6e&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
## License
MIT