Merge pull request #2 from oguzhan18/added-docs

Write docs and added readme

Author: oguzhan18

.DS_Store

@@ -0,0 +1,60 @@
+ # HTML Attribute Manager
+`HtmlAttributeManager` is a JavaScript class for managing HTML elements with specific attributes.
+
+## Installation
+````bash
+npm install html-attribute-manager
+````
+## Usage
+First, import `HtmlAttributeManager` into your JavaScript file:
+
+`````bash
+const HtmlAttributeManager = require('html-attribute-manager');
+`````
+Then, create an instance of HtmlAttributeManager by providing an object containing attribute-function pairs:
+
+````bash
+const attributeManager = new HtmlAttributeManager({
+    "toggle-visibility": "toggleVisibility",
+    "change-color": "changeColor"
+});
+````
+## Constructor
+HtmlAttributeManager(attributeName, functionName)
+Creates an instance of HtmlAttributeManager.
+
+* attributeName (`string`): The name of the HTML attribute to search for.
+  
+* functionName (`string`): The name of the function to call for each matching element.
+
+## Methods
+`handleEvent()`
+Finds HTML elements with the specified attribute and calls the corresponding function.
+`destroy()`
+Removes the event listener when the instance is no longer needed.
+## Example
+````javascript
+// Define functions
+window.toggleVisibility = function(element, value) {
+    if (value === 'true') {
+        element.style.display = 'block';
+    } else {
+        element.style.display = 'none';
+    }
+};
+
+window.changeColor = function(element, color) {
+    element.style.color = color;
+};
+
+// Create an instance of HtmlAttributeManager
+const attributeManager = new HtmlAttributeManager({
+    "toggle-visibility": "toggleVisibility",
+    "change-color": "changeColor"
+});
+````
+## Contributing
+Contributions are welcome! Please feel free to submit issues or pull requests on <a href="https://github.com/oguzhan18/html-attribute-manager" target="_blank">Github</a>.
+
+## License
+This project is licensed under the MIT License - see the LICENSE file for details.

README.md

@@ -1,12 +1,60 @@
- # JS UI Documentation
-Welcome to JS UI Documentation, everything you need to know about working with JS-UI CSS and related tools can be found here. 
+ # HTML Attribute Manager
+`HtmlAttributeManager` is a JavaScript class for managing HTML elements with specific attributes.
 
+## Installation
+````bash
+npm install html-attribute-manager
+````
+## Usage
+First, import `HtmlAttributeManager` into your JavaScript file:
 
+`````bash
+const HtmlAttributeManager = require('html-attribute-manager');
+`````
+Then, create an instance of HtmlAttributeManager by providing an object containing attribute-function pairs:
 
-## The JS UI 
-JS UI is a component library that you can develop very quickly without requiring any framework. It is a general UI library. The difference from other UI libraries is that you can style your HTML code in a class just like you write CSS in classes inside any HTML tag.
-So how do you start? Check out our [getting started guide](/getting-started) to understand how it works and go from there.
+````bash
+const attributeManager = new HtmlAttributeManager({
+    "toggle-visibility": "toggleVisibility",
+    "change-color": "changeColor"
+});
+````
+## Constructor
+HtmlAttributeManager(attributeName, functionName)
+Creates an instance of HtmlAttributeManager.
 
-> Got a great use case for us to demo right here? Submit it to us on [message](https://www.jengal.com)!
+* attributeName (`string`): The name of the HTML attribute to search for.
+  
+* functionName (`string`): The name of the function to call for each matching element.
 
+## Methods
+`handleEvent()`
+Finds HTML elements with the specified attribute and calls the corresponding function.
+`destroy()`
+Removes the event listener when the instance is no longer needed.
+## Example
+````javascript
+// Define functions
+window.toggleVisibility = function(element, value) {
+    if (value === 'true') {
+        element.style.display = 'block';
+    } else {
+        element.style.display = 'none';
+    }
+};
 
+window.changeColor = function(element, color) {
+    element.style.color = color;
+};
+
+// Create an instance of HtmlAttributeManager
+const attributeManager = new HtmlAttributeManager({
+    "toggle-visibility": "toggleVisibility",
+    "change-color": "changeColor"
+});
+````
+## Contributing
+Contributions are welcome! Please feel free to submit issues or pull requests on <a href="https://github.com/oguzhan18/html-attribute-manager" target="_blank">Github</a>.
+
+## License
+This project is licensed under the MIT License - see the LICENSE file for details.

docs/.DS_Store

@@ -1,11 +1,11 @@
 
-<span><img width="200"  src="images/logo.png"></span> 
+<span><svg width="256px" height="256px" viewBox="-1.26 -1.26 20.52 20.52" xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true" fill="#000000" stroke="#000000" transform="rotate(0)" stroke-width="0.45"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.18"></g><g id="SVGRepo_iconCarrier"> <path fill="#f0f0f0" d="M12.6 0H1.4A1.417 1.417 0 0 0 0 1.43v15.14A1.417 1.417 0 0 0 1.4 18h11.2a1.355 1.355 0 0 0 .2-.02A4.992 4.992 0 0 1 13 8a5.468 5.468 0 0 1 1 .1V1.43A1.417 1.417 0 0 0 12.6 0zM5 12H3a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm3-4H3a1 1 0 0 1 0-2h5a1 1 0 0 1 0 2zm3-4H3.03a1 1 0 0 1 0-2H11a1 1 0 0 1 0 2z"></path> <path fill="#f0f0f0" d="M12.89 14.55a.993.993 0 0 1-.44 1.34.934.934 0 0 1-.45.11.98.98 0 0 1-.89-.55l-1-2a.965.965 0 0 1 0-.89c.01-.03.03-.06.04-.09l.96-1.92a1 1 0 1 1 1.78.9L12.12 13zM17.89 13.44l-1 2.01A.98.98 0 0 1 16 16a1.05 1.05 0 0 1-.45-.1 1.007 1.007 0 0 1-.44-1.35l.77-1.55-.77-1.55a1 1 0 1 1 1.78-.9l.96 1.91.04.09a.965.965 0 0 1 0 .89z"></path> </g></svg></span> 
 
 [//]: # (# <span style="color:black; font-weight:800;">JS UI <small>1.0.0</small></span> )
 <span>
-Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
+Get rid of framework dependency now. HTML attribute manager system, where we can create and manage HTML attributes with HAT, is completely up to your discretion.
 </span>
 
 
-[GitHub](https://github.com/#)
-[Get Started](/layout-property/js-slider)
+[GitHub](https://github.com/oguzhan18/html-attribute-manager)
+[Get Started](/layout-property/html-attribute-manager)

docs/README.md

@@ -1,2 +1,2 @@
 ---
-**JS UI**  Documentation 2024 - [Visit our repo](https://github.com/#)
+**JS UI**  Documentation 2024 - [Visit our repo](https://github.com/oguzhan18/html-attribute-manager)

docs/_coverpage.md

@@ -1,4 +1,4 @@
 * Getting Started
-    * [Getting Started](/getting-started/getting-started)
-* Library
-    * [JS Slider](/layout-property/js-slider)
+    * [Installation](/getting-started/getting-started)
+* Usage
+    * [Usage](/layout-property/html-attribute-manager)

docs/_footer.md

@@ -1,55 +1,16 @@
-# Let's Add to Our Project
+# HTML Attribute Manager
 
-There are 2 different methods when using Glasses UI. The first method is to install it as a package and take advantage
-of the internal files. The second method is to use the library codes from CDN in html.
+HtmlAttributeManager is a JavaScript class for managing HTML elements with specific attributes.
 
-## CDN Usage and Project creation.
 
-```html
+## Installation
 
-<html>
-<head>
-    <link rel="stylesheet" crossorigin="anonymous" href="
-           https://glasses-ui.vercel.app/styles.88fede6400456408.css">
-</head>
-<body>
-
-</body>
-</html>
-```
-
-You are now ready to create your first app with `CDN`. Create a `(HTML)` project and add the following code
-
-
-> If you paste the upload code into a (`.html`) file
-> '`<body></body>`, you can use it any way you want. If you have a (HTML) file and you want to add it, you can use it by
-> pasting directly (`<link rel="stylesheet" crossorigin="anonymous"`
-> `href="https://glasses-ui.vercel.app/styles.88fede6400456408.css">`) .
-
-### Installing and using NPM.
+To use HTML Attribute Manager, you can install it via npm:
 
 ```bash
- npm i glasses-ui
+npm install html-attribute-manager
 ```
 
-* NodeJS and NPM - install latest LTS
-* Yarn - run `[sudo] npm i -g yarn` if it is not already installed
-* Run the `npm` command above in the `NodeJS` based framework project you want to use.
-
-## Running the application
-
+You can include `npmjs` in your project as you wish and use it in any javascript framework.
 
-Below I will explain how you can install and use Glasses UI in a newly created Angular project.
 
-* The first step, is to install Angular CLI `npm install -g @angular/cli`
-* The second step, is to create a new angular project. `ng new glasses-ui-user-guide`
-> `[glasses-ui-user-guid]` you can give any project name you want to the field.
-* The third step is in the `styles.scss` or styles.css file in the src folder in your created angular project.
-  `@import 'glasses-ui/style';`
-  If you add the code, you can use `Glasses UI` library in the whole project.
-<br>
-<br>
-I showed you how to download the library in Angular framework and import it into the project. However, you can use it easily by importing it into your (html) or (css) file in the framework you want.
-<br>
-<br>
-