🔔 Toaster.js

A lightweight, customizable toast notification system built using pure JavaScript. Create dynamic, reusable toast messages with a clean and simple API.

---

🚀 Features

• ⚡ Lightweight (No libraries required)
• 🧠 Built using closures (factory pattern)
• 🎯 Configurable duration
• 🎨 Simple and clean UI design
• 🔁 Reusable toaster instances
• 📦 Easy to integrate into any project

---

📁 Project Structure

Toaster/
│
├── index.html       # Main HTML structure
├── style.css        # Styling for toast notifications
├── script.js        # Core toaster logic
└── README.md        # Project documentation

---

🧠 How It Works

The core of this project is the createToaster() function, which returns a reusable function to display notifications.

function createToaster(config){
    return function(notification){
        // creates and displays toast
    };
}

This uses:

• Closures → to preserve configuration
• Factory pattern → to create multiple toaster instances

---

⚙️ Usage

1. Create a toaster instance

let toaster = createToaster({
    positionX: "top",
    positionY: "left",
    theme: "light",
    duration: 3,
});

---

2. Show notifications

toaster("Hey there 👋👋");

setTimeout(()=>{
    toaster("You are hired 👍 Congratulations 🎉");
},2000);

---

🎨 Styling

Toast messages are styled using CSS:

.block {
    background: #0f0e0e;
    color: white;
    border-radius: 10px;
}

You can fully customize:

• Colors
• Fonts
• Positioning
• Animations

---

📌 Current Limitations

• ❌ Position config (positionX, positionY) not implemented yet
• ❌ No animation (fade/slide)
• ❌ No toast types (success, error, warning)
• ❌ No stacking control (queue system)

---

🚀 Future Improvements

• ✅ Add position control (top-right, bottom-left, etc.)
• ✅ Add animations (fade in/out)
• ✅ Support multiple toast types
• ✅ Add queue management system
• ✅ Make it a reusable npm package

---

💡 Why This Project?

This project demonstrates:

• Practical use of JavaScript closures
• Clean separation of logic and UI
• Building reusable UI utilities from scratch

---

📷 Demo Idea (Add This Later)

👉 Add a GIF or screenshot here to showcase your toaster in action.

---

🧑‍💻 Author

Made with ❤️ by pr0-gramm3r

---

⭐ Support

If you like this project:

• ⭐ Star the repo
• 🍴 Fork it
• 🛠 Improve it

---

📜 License

This project is open-source and free to use.