{"id":22886914,"url":"https://github.com/itsawa/betteralertjs","last_synced_at":"2026-02-16T17:02:28.624Z","repository":{"id":267792457,"uuid":"902375789","full_name":"ITSawa/betteralertjs","owner":"ITSawa","description":"A simple library to enhance alert functionality with more customization and control.","archived":false,"fork":false,"pushed_at":"2024-12-12T13:02:38.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T18:46:22.505Z","etag":null,"topics":["alert","alert-system","frontend","javascript","js","lib","library","notification","popup"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ITSawa.png","metadata":{"files":{"readme":"README","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-12T12:53:31.000Z","updated_at":"2024-12-12T13:02:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"27f49d07-bca4-40fe-a678-17100bed23eb","html_url":"https://github.com/ITSawa/betteralertjs","commit_stats":null,"previous_names":["itsawa/betteralertjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ITSawa/betteralertjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fbetteralertjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fbetteralertjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fbetteralertjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fbetteralertjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ITSawa","download_url":"https://codeload.github.com/ITSawa/betteralertjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fbetteralertjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29513434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","alert-system","frontend","javascript","js","lib","library","notification","popup"],"created_at":"2024-12-13T20:28:43.337Z","updated_at":"2026-02-16T17:02:28.609Z","avatar_url":"https://github.com/ITSawa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Better Alert Js Documentation 📄\nOverview 📘\nThis document provides an overview of the alert system, including various configurations, parameters, and customization options. The alert system allows you to create different types of alerts with customizable styles.\n\nGetting Started 🚀\nTo enable the alert system, include the following script in your HTML file:\n\nhtml\n\n\u003cscript src=\"path/to/alert-system.js\"\u003e\u003c/script\u003e\nBasic Usage 📋\nTo open an alert, use the openAlert function. Here's a basic example:\n\njavascript\n\nopenAlert(\"Info Alert\", \"This is an informational alert.\", \"info\");\nAlert Types 🔔\nThere are four built-in alert types:\n\nInfo ℹ️\nWarning ⚠️\nError ❌\nSuccess ✅\nExample:\n\njavascript\n\nopenAlert(\"Warning Alert\", \"This is a warning alert.\", \"warning\");\nCustomizing Alert Styles 🎨\nYou can customize the default colors for each alert type by modifying the alertStyles object:\n\njavascript\n\nwindow.alertStyles = {\n  warning: \"#FFC107\",\n  error: \"#E57373\",\n  success: \"#81C784\",\n  info: \"#64B5F6\",\n};\nAlert Parameters 🛠️\nThe openAlert function accepts the following parameters:\n\ntitle (string): The title of the alert.\ntext (string): The text of the alert.\ntype (string): The type of the alert (default: \"info\").\nstyleType (string): The style of the alert (default: \"info\").\ncallback (function): The callback function to execute when the alert is closed.\nExample:\n\njavascript\n\nopenAlert(\"Custom Alert\", \"This alert has a custom style.\", \"info\", \"#FF6347\");\nAlert Variations 🌈\nYou can create different variations of alerts by using the type parameter:\n\nSingle Button Alert: Type 1\nDisplays an \"OK\" button.\n\njavascript\n\nopenAlert(\"Single Button Alert\", \"This alert has a single button.\", 1);\nConfirmation Alert: Type 2\nDisplays \"Yes\" and \"No\" buttons with a callback.\n\njavascript\n\nopenAlert(\"Confirmation Alert\", \"Do you want to proceed?\", 2, \"info\", (result) =\u003e {\n  if (result) {\n    console.log(\"User clicked Yes\");\n  } else {\n    console.log(\"User clicked No\");\n  }\n});\nClosing Alerts ❎\nTo close an alert programmatically, use the closeAlert function:\n\njavascript\n\ncloseAlert().then(() =\u003e {\n  console.log(\"Alert closed\");\n});\nStyling the Alert Container 💅\nYou can influence the styles of the alert container using key style names and their methods:\n\ncss\n\n.alert-container {\n  position: fixed;\n  top: 2vh;\n  left: 50%;\n  width: fit-content;\n  height: fit-content;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center !important;\n  align-items: center !important;\n  padding: 15px 20px;\n  border-radius: 20px;\n  z-index: 9999;\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n  transition: opacity 0.5s ease, transform 1s ease;\n  text-align: center;\n  max-width: 100svw;\n  min-width: 300px;\n}\n\n.alert-container.open {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.close-alert-button {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background: none;\n  border: none;\n  color: white;\n  font-size: 20px;\n  cursor: pointer;\n}\n\n.alert-buttons {\n  display: flex;\n  width: 100%;\n  justify-content: center;\n  gap: 10px;\n}\n\n.alert-buttons button {\n  padding: 10px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n.alert-buttons button.ok {\n  background-color: #00bfff;\n}\n\n.alert-buttons button.yes {\n  background-color: #32cd32;\n}\n\n.alert-buttons button.no {\n  background-color: #ff6347;\n}\nEvent Listeners 🖱️\nEnsure the document is fully loaded before attaching event listeners:\n\njavascript\n\ndocument.addEventListener(\"DOMContentLoaded\", () =\u003e {\n  // Your code here\n\n  function example () {\n    try {\n        // Some logic\n    } catch (e) {\n        openAlert(\"Error\", \"An error occurred.\", 1, \"error\");\n    }\n  }\n});\nConclusion 📜\nThe alert system is highly customizable and easy to use. You can adjust the styles, add different types of alerts, and even create custom alert types to fit your application's needs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsawa%2Fbetteralertjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsawa%2Fbetteralertjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsawa%2Fbetteralertjs/lists"}