diff --git a/CHANGELOG.md b/CHANGELOG.md index 75945cb..7526392 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Released] -## [v1.1.9] - 2023/01/03 +## [v1.1.1] - 2023/01/03 + +- Added Documentation for Timing function + +## [v1.1.0] - 2023/01/03 - Added Timing Function diff --git a/README.md b/README.md index 874aea5..fae9f11 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ # Toast Class Documentation -The `Toast` class is designed to create Neptune-style toasts, providing a visually appealing way to display messages on a web page. This documentation provides an overview of the class, its constructor, and usage examples. +The `Toast` class allows you to create Neptune-style toasts with configurable options such as icon, message text, style, position, and visibility time. ## Class: Toast ### Description -Create a new Neptune Toast with customizable configurations such as icon, message text, style, and position. +Create a new Neptune Toast with customizable configurations. ### Constructor @@ -16,7 +16,8 @@ javascriptCopy code icon: "YOUR ICON", text: "Test Toast", style: "primary", - position: "top-right" + position: "top-right", + time: 5000, });` #### Parameters @@ -33,6 +34,8 @@ javascriptCopy code - `position` (String): (Optional) The position of the toast on the screen, which can be one of the following: "left-top", "left-bottom", "right-top", or "right-bottom". + - `time` (Number): (Optional) The time (in milliseconds) until the toast becomes invisible. If not provided, the toast will remain visible until manually removed. + ### Example javascriptCopy code @@ -41,10 +44,11 @@ javascriptCopy code icon: "YOUR ICON", text: "Test Toast", style: "primary", - position: "top-right" + position: "top-right", + time: 5000, });` -This example creates a new `Toast` instance with a specified icon, message text, style, and position. +This example creates a new `Toast` instance with a specified icon, message text, style, position, and visibility time. ### Toast Configuration @@ -56,10 +60,12 @@ This example creates a new `Toast` instance with a specified icon, message text, - Position: The position of the toast on the screen. Options include "left-top", "left-bottom", "right-top", or "right-bottom". +- Time: The time until the toast becomes invisible. If not provided, the toast will remain visible until manually removed. + ### Error Handling If the `text` parameter is not provided, an error message will be logged to the console, indicating that a message should be added to the toast. ### Usage -To use the `Toast` class, instantiate it with a configuration object, specifying the desired icon, message text, style, and position. The toast will then be appended to the specified parent element or `document.body` if no parent is provided. +To use the `Toast` class, instantiate it with a configuration object, specifying the desired icon, message text, style, position, and visibility time. The toast will then be appended to the specified parent element or `document.body` if no parent is provided. If a visibility time is specified, the toast will automatically be removed after that duration. diff --git a/package.json b/package.json index 78981e1..d18038e 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,19 @@ { - "name": "toast-cg", - "version": "1.1.0", - "description": "A lightweight toast package in Js and CSS", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "keywords": [ - "Toast", - "Js", - "Css" - ], - "author": "Colin Grahm", - "license": "MIT", - "repository": { - "url": "https://github.com/CGWebDev2003/toast-cg" - } + "name": "toast-cg", + "version": "1.1.1", + "description": "A lightweight toast package in Js and CSS", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "Toast", + "Js", + "Css" + ], + "author": "Colin Grahm", + "license": "MIT", + "repository": { + "url": "https://github.com/CGWebDev2003/toast-cg" + } }