Beautiful, modern alerts with glassmorphism design. Pure JavaScript, no dependencies.
Show positive feedback with beautiful success animations
Display error messages with attention-grabbing styles
Alert users with important warning messages
Share information with clean, modern styling
Get user confirmation with elegant dialogs
Non-blocking notifications with progress bars
Success with confetti effects and animations
Futuristic neon glow effects
Colorful rainbow gradient animations
Get user input with beautiful forms
Loading indicators with progress bars
Error alerts with shake animation
Audio alerts with sound wave animation
Beautiful image display modals
Pure confetti effects without modal
Comprehensive form builder with validation
// Include the script
<script src="smoothalert.js"></script>
// Basic alerts
SmoothAlert.show({
type: 'success',
title: 'Success!',
message: 'Your action was completed successfully.'
});
// 🎉 Celebration with confetti
SmoothAlert.celebration('Congratulations! 🎉');
// 💬 Prompt for user input
const name = await SmoothAlert.prompt('What is your name?');
// ⏳ Loading with progress
const loader = SmoothAlert.loading('Processing...');
loader.then(l => l.updateProgress(50));
// ⚡ Neon style alert
SmoothAlert.neon('Welcome to the future!');
// 🌈 Rainbow gradient alert
SmoothAlert.rainbow('Colors everywhere!');
// 💥 Error with shake animation
SmoothAlert.errorShake('Something went wrong!');
// 🔊 Sound wave animation
SmoothAlert.soundWave('Audio notification!');
// 🖼️ Image viewer
SmoothAlert.imageViewer('image.jpg', {
title: 'Beautiful Image',
description: 'Image description here'
});
// ✨ Just confetti effects
SmoothAlert.confetti({
particleCount: 100,
duration: 3000
});
// 📝 Advanced Forms
const formConfig = {
fields: [
{
type: 'text',
name: 'name',
label: 'Name',
required: true
},
{
type: 'email',
name: 'email',
label: 'Email',
required: true
},
{
type: 'select',
name: 'category',
label: 'Category',
options: [
{ value: 'general', label: 'General' },
{ value: 'support', label: 'Support' }
]
},
{
type: 'textarea',
name: 'message',
label: 'Message',
rows: 4
}
]
};
SmoothAlert.form(formConfig, {
title: 'Contact Form',
validation: true
}).then(result => {
if (result.success) {
console.log('Form data:', result.data);
}
});// 🔧 1. Dynamic Form Creation
async function createDynamicForm() {
const formConfig = {
fields: [
{
type: 'text',
name: 'username',
label: 'Username',
placeholder: 'Enter username',
required: true,
pattern: '^[a-zA-Z0-9_]{3,20}$' // Username validation
},
{
type: 'email',
name: 'email',
label: 'Email Address',
required: true
},
{
type: 'password',
name: 'password',
label: 'Password',
required: true,
placeholder: 'Min. 8 characters'
},
{
type: 'select',
name: 'role',
label: 'User Role',
required: true,
options: [
{ value: 'user', label: '👤 Regular User' },
{ value: 'admin', label: '👑 Administrator' },
{ value: 'moderator', label: '⚖️ Moderator' }
]
},
{
type: 'checkbox',
name: 'permissions',
label: 'Permissions',
options: [
{ value: 'read', label: 'Read Access' },
{ value: 'write', label: 'Write Access' },
{ value: 'delete', label: 'Delete Access' }
]
},
{
type: 'toggle',
name: 'active',
text: 'Account Active',
checked: true
}
]
};
const result = await SmoothAlert.form(formConfig, {
title: '👤 Create User Account',
submitText: 'Create User',
validation: true,
width: 'large'
});
if (result.success) {
// Process form data
const userData = result.data;
console.log('New user:', userData);
// Send to API
await sendToAPI('/api/users', userData);
// Show success
SmoothAlert.celebration(`User ${userData.username} created successfully! 🎉`);
}
}
// 📊 2. Multi-Step Form with Validation
async function createMultiStepForm() {
const formConfig = {
steps: [
{
title: 'Personal Info',
fields: [
{ type: 'text', name: 'firstName', label: 'First Name', required: true },
{ type: 'text', name: 'lastName', label: 'Last Name', required: true },
{ type: 'date', name: 'birthDate', label: 'Birth Date' },
{ type: 'tel', name: 'phone', label: 'Phone Number' }
]
},
{
title: 'Address',
fields: [
{ type: 'text', name: 'street', label: 'Street Address', required: true },
{ type: 'text', name: 'city', label: 'City', required: true },
{ type: 'text', name: 'zip', label: 'ZIP Code', required: true },
{ type: 'select', name: 'country', label: 'Country', required: true,
options: [
{ value: 'DE', label: '🇩🇪 Germany' },
{ value: 'US', label: '🇺🇸 United States' },
{ value: 'UK', label: '🇬🇧 United Kingdom' }
]
}
]
},
{
title: 'Preferences',
fields: [
{ type: 'checkbox', name: 'interests', label: 'Interests',
options: [
{ value: 'tech', label: 'Technology' },
{ value: 'sports', label: 'Sports' },
{ value: 'music', label: 'Music' },
{ value: 'travel', label: 'Travel' }
]
},
{ type: 'range', name: 'experience', label: 'Experience Level',
min: 1, max: 10, defaultValue: 5 },
{ type: 'toggle', name: 'newsletter', text: 'Subscribe to Newsletter', checked: true }
]
}
]
};
const result = await SmoothAlert.form(formConfig, {
title: '📋 Registration Wizard',
showSteps: true,
validation: true
});
return result;
}
// 🔄 3. Form with Dynamic Field Updates
async function createDynamicFieldForm() {
const formConfig = {
fields: [
{
type: 'select',
name: 'productType',
label: 'Product Type',
required: true,
options: [
{ value: 'software', label: '💻 Software' },
{ value: 'hardware', label: '🖥️ Hardware' },
{ value: 'service', label: '🛠️ Service' }
]
},
{
type: 'text',
name: 'productName',
label: 'Product Name',
required: true
},
{
type: 'number',
name: 'price',
label: 'Price (€)',
min: 0,
required: true
},
{
type: 'textarea',
name: 'description',
label: 'Description',
rows: 4
}
]
};
const result = await SmoothAlert.form(formConfig, {
title: '🛍️ Add Product',
validation: true
});
if (result.success) {
// Validate business logic
if (result.data.price > 10000) {
const confirm = await SmoothAlert.confirm({
title: 'High Price Warning',
message: `Price €${result.data.price} is very high. Confirm?`,
confirmText: 'Yes, Continue',
cancelText: 'Edit Price'
});
if (!confirm) {
return createDynamicFieldForm(); // Restart form
}
}
return result.data;
}
}
// 📡 4. API Integration Example
async function formWithAPIIntegration() {
try {
// Show loading while fetching data
const loader = SmoothAlert.loading('Loading form data...');
// Fetch dynamic options from API
const categories = await fetch('/api/categories').then(r => r.json());
loader.then(l => l.close());
const formConfig = {
fields: [
{
type: 'text',
name: 'title',
label: 'Article Title',
required: true
},
{
type: 'select',
name: 'category',
label: 'Category',
required: true,
options: categories.map(cat => ({
value: cat.id,
label: cat.name
}))
},
{
type: 'textarea',
name: 'content',
label: 'Content',
rows: 8,
required: true
},
{
type: 'file',
name: 'featured_image',
label: 'Featured Image',
accept: 'image/*'
},
{
type: 'toggle',
name: 'published',
text: 'Publish Immediately',
checked: false
}
]
};
const result = await SmoothAlert.form(formConfig, {
title: '📝 Create Article',
validation: true,
width: 'large'
});
if (result.success) {
// Show loading during save
const saveLoader = SmoothAlert.loading('Saving article...');
try {
// Create FormData for file upload
const formData = new FormData();
Object.keys(result.data).forEach(key => {
if (key === 'featured_image' && result.data[key].length > 0) {
formData.append(key, result.data[key][0]);
} else {
formData.append(key, result.data[key]);
}
});
// Save to API
const response = await fetch('/api/articles', {
method: 'POST',
body: formData
});
saveLoader.then(l => l.close());
if (response.ok) {
SmoothAlert.celebration('Article saved successfully! 🎉');
} else {
throw new Error('Save failed');
}
} catch (error) {
saveLoader.then(l => l.close());
SmoothAlert.errorShake('Failed to save article: ' + error.message);
}
}
} catch (error) {
SmoothAlert.error('Failed to load form: ' + error.message);
}
}
// 🎯 5. Form Validation with Custom Rules
async function formWithCustomValidation() {
const formConfig = {
fields: [
{
type: 'email',
name: 'email',
label: 'Email',
required: true
},
{
type: 'password',
name: 'password',
label: 'Password',
required: true,
pattern: '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$'
},
{
type: 'password',
name: 'confirmPassword',
label: 'Confirm Password',
required: true
}
]
};
const result = await SmoothAlert.form(formConfig, {
title: '🔐 Change Password',
validation: true
});
if (result.success) {
// Custom validation
if (result.data.password !== result.data.confirmPassword) {
SmoothAlert.errorShake('Passwords do not match!');
return formWithCustomValidation(); // Restart
}
// Password strength check
const strength = checkPasswordStrength(result.data.password);
if (strength < 3) {
const confirm = await SmoothAlert.confirm({
title: 'Weak Password',
message: 'Password is weak. Continue anyway?',
confirmText: 'Yes, Continue',
cancelText: 'Choose Stronger'
});
if (!confirm) {
return formWithCustomValidation();
}
}
SmoothAlert.success('Password updated successfully!');
return result.data;
}
}
// 🔧 6. Utility Functions
function checkPasswordStrength(password) {
let strength = 0;
if (password.length >= 8) strength++;
if (/[a-z]/.test(password)) strength++;
if (/[A-Z]/.test(password)) strength++;
if (/\d/.test(password)) strength++;
if (/[@$!%*?&]/.test(password)) strength++;
return strength;
}
async function sendToAPI(url, data) {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error(`API Error: ${response.status}`);
}
return response.json();
}
// 🚀 Usage Examples
document.addEventListener('DOMContentLoaded', () => {
// Add programmatic form buttons
window.showProgrammaticForm = createDynamicForm;
window.showMultiStepForm = createMultiStepForm;
window.showAPIForm = formWithAPIIntegration;
window.showValidationForm = formWithCustomValidation;
});Programmatically created form with validation and API integration
Wizard-style form with multiple steps and progress tracking
Form with dynamic data loading and API submission
Advanced validation with custom rules and business logic