Update README.md

baramex · Sep 9, 2021 · e6a56f9 · e6a56f9
1 parent d9b3ba1
commit e6a56f9
Showing 1 changed file with 47 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -11,8 +11,53 @@
 
 ![img](https://user-images.githubusercontent.com/47333747/131180968-900589a9-69ea-4850-9839-a10cc130eb9d.PNG)
 
-## Downloads and tuto
-[![](https://img.shields.io/github/v/release/baramex/flashes-messages-js.svg?style=for-the-badge&label=last%20release)](https://github.com/baramex/flashes-messages-js/releases/latest/)
+# TUTO
+
+## Requirements
+- [jQuery](https://code.jquery.com/)
+
+## Installation
+- <a href='#cdn'>Use CDN</a> or [download in local](https://github.com/baramex/flashes-messages-js/releases/latest/)
+
+## Append Flash
+<i>append flash function append the flash automatically to body!</i>
+- function: appendFlash(type, message, time?, parent?)
+- types: 
+  - `success-flash` <img width='70%' src='https://user-images.githubusercontent.com/47333747/130810606-c2b6d990-d224-41aa-a70a-d647a283f000.PNG'>
+  - `error-flash` <img width='70%' src='https://user-images.githubusercontent.com/47333747/130810630-6f26c84b-37fe-46fd-bf3f-88ef63ca1da1.PNG'>
+  - `info-flash` <img width='70%' src='https://user-images.githubusercontent.com/47333747/130810660-0cc2aa75-329d-42ac-9bd7-37ed6aca08bc.PNG'>
+  - `not-allowed-flash` <img src='https://user-images.githubusercontent.com/47333747/130810671-8124093c-14fa-405c-82f2-ae46e9237736.PNG' width='70%'>
+- message: string
+- time: the default is 2500 ms, 0 is infinite
+- parent: the default is flashDiv element (auto generate by the script), this is the parent to which the flash will be added, it must be an element
+- <i>exemple: appendFlash("success-flash", "You understood!", 0)</i>
+
+## Generate Flash
+<i>generate flash function returns flash as one element</i>
+- function: generateFlash(type, message)
+
+<h2 id='cdn'>CDN</h2>
+
+```html
+<link rel="stylesheet" href="http://baramex.fr:9999/cdn/flashes-messages/flashs.css">
+<script src="http://baramex.fr:9999/cdn/flashes-messages/flashs.js"></script>
+```
+
+## Exemple
+Head:
+```html
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+<link rel="stylesheet" href="http://baramex.fr:9999/cdn/flashes-messages/flashs.css">
+<script src="http://baramex.fr:9999/cdn/flashes-messages/flashs.js"></script>
+```
+
+Body:
+```html
+<body onload="appendFlash('info-flash', 'loaded!');">
+
+</body>
+```
 
 ## Credits
 The icons come from [paomedia](https://github.com/paomedia)