Update README.md

Author: mianzaid

README.md

@@ -1,3 +1,6 @@
+Got it! Let’s create a **detailed GitHub README** for your library, now named **`lcwTourGuide`**. I’ll include title, description, features, installation, usage, options, styling, and contributing instructions.
+
+````markdown
 # 🧭 lcwTourGuide  
 
 `lcwTourGuide` is a lightweight, dependency-free JavaScript library for creating guided tours and onboarding experiences on your website.  
@@ -23,3 +26,103 @@ Include the script and styles in your project:
 ```html
 <link rel="stylesheet" href="lcwTourGuide.css">
 <script src="lcwTourGuide.js"></script>
+````
+
+Or copy the class code directly into your project.
+
+---
+
+## 🚀 Usage
+
+### 1. Mark elements for the tour
+
+Add `data-tour-step` and `data-tour-text` attributes to elements:
+
+```html
+<button data-tour-step="1" data-tour-text="Click here to create a new item">
+  New Item
+</button>
+
+<input type="text" data-tour-step="2" data-tour-text="Enter the name here">
+
+<div data-tour-step="3" data-tour-text="Finally, click Save">
+  Save
+</div>
+```
+
+* `data-tour-step="1"` → defines the order
+* `data-tour-text="..."` → tooltip text
+
+---
+
+### 2. Initialize the tour
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+  const tour = new lcwTourGuide({
+    onStart: () => console.log("✅ Tour started"),
+    onStep: (index, el) => console.log(`➡️ Step ${index + 1}:`, el),
+    onEnd: () => console.log("🏁 Tour finished")
+  });
+
+  tour.start();
+});
+```
+
+---
+
+## ⚙️ Options
+
+| Option    | Type     | Default             | Description                     |
+| --------- | -------- | ------------------- | ------------------------------- |
+| `onStart` | Function | `() => {}`          | Called when the tour starts     |
+| `onStep`  | Function | `(index, el) => {}` | Called when a step is displayed |
+| `onEnd`   | Function | `() => {}`          | Called when the tour ends       |
+
+---
+
+## 🎨 Styling
+
+Default styles can be customized:
+
+```css
+.tour-tooltip {
+  background: #222;
+  color: #fff;
+  border-radius: 8px;
+  padding: 15px;
+  max-width: 250px;
+}
+.tour-highlight {
+  box-shadow: 0 0 0 3px #00bcd4;
+}
+.tour-overlay {
+  background: rgba(0, 0, 0, 0.5);
+}
+```
+
+---
+
+## 🛠 Example
+
+![demo gif placeholder](https://via.placeholder.com/600x300?text=lcwTourGuide+Demo)
+
+---
+
+## 📜 License
+
+MIT License. Free to use in personal and commercial projects.
+
+---
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome!
+Feel free to fork, improve, and submit pull requests.
+
+```
+
+If you want, I can also **update your JS code** so it uses the class name `lcwTourGuide` and integrates perfectly with this README, making it fully plugin-ready for GitHub.  
+
+Do you want me to do that?
+```