Updated the README.md file and improved the documentation

README.md

@@ -1,123 +1,188 @@
-# ▶ Whatsapp Link Gen
-
 <div id="top"></div>
-Welcome to Whatsapp Link Gen ! 🎉 A Web App to directly message People without ever saving their phone number.
-
 <div align="center">
- <br>
-
-[![Contributors](https://img.shields.io/github/contributors/amittri1025/Whatsapp-Link-Gen?style=for-the-badge)](https://github.com/amittri1025/Whatsapp-Link-Gen/graphs/contributors) 
+
+[![Contributors](https://img.shields.io/github/contributors/amittri1025/Whatsapp-Link-Gen?style=for-the-badge)](https://github.com/amittri1025/Whatsapp-Link-Gen/graphs/contributors)
 [![Forks](https://img.shields.io/github/forks/amittri1025/Whatsapp-Link-Gen?style=for-the-badge)](https://github.com/amittri1025/Whatsapp-Link-Gen/network/members)
 [![Stargazers](https://img.shields.io/github/stars/amittri1025/Whatsapp-Link-Gen?style=for-the-badge)](https://github.com/amittri1025/Whatsapp-Link-Gen/stargazers)
 [![Open Issues](https://img.shields.io/github/issues/amittri1025/Whatsapp-Link-Gen?style=for-the-badge)](https://github.com/amittri1025/Whatsapp-Link-Gen/issues)
 
 </div>
+<!-- WaLinkGen  -->
+
+
+<div align="center">
+    <img src="https://i.imgur.com/irp03OP.png" alt="logo_here" width="500px">
+    <p>Welcome to <b>Whatsapp Link Gen</b> ! 🎉 A Web App to directly message People without ever saving their phone number.
+    </p>
+    <p>
+    <a href="https://amittri1025.github.io/Whatsapp-Link-Gen/">Visit the website</a>
+    ·
+    <a href="https://github.com/amittri1025/Whatsapp-Link-Gen/issues/new">Make an issue</a>
+    ·
+    <a href="https://github.com/amittri1025/Whatsapp-Link-Gen/issues">Work on an issue</a>
+    <br/>
+    <br/>
+  </p>
+</div>
+
 
+https://github.com/H-SM/Whatsapp-Link-Gen/assets/98532264/8f38d4e3-0b99-4e4b-a24f-932d4c85b110
 
-## 📚 Table of Contents
 
-- [👋 Introduction](#-introduction)
-- [🧰 Tech Stack Used](#-tech-stack-used)
-- [🚀 Usage](#-usage)
-- [🤝 Contributing](#-contributing)
-- [📱 Contact Me](#-contact-me)
-- [📝 License](#-license)
+<br/>
 
-## 👋 Introduction
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary style="font-size: 19px;"><b>📚 Table of Contents</b>
+</summary>
+  <ol>
+    <li><a href="#-introduction">👋 Introduction</a></li>
+    <li><a href="#-about-the-project">🌐 About The Project</a></li>
+    <li><a href="#-tech-stack-used">🧰 Tech Stack Used</a></li>
+    <li><a href="#-features">🌟 Features</a></li>
+    <li><a href="#-usage">🚀 Usage</a></li>
+    <li><a href="#-folder-format">📁 Folder Format</a></li>
+    <li><a href="#-contributing">🤝 Contributing</a></li>
+    <li><a href="#-contributors">🏆 Contributors</a></li>
+    <li><a href="#-license">📝 License</a></li>
+    <li><a href="#-contact">📱 Contact</a></li>
+  </ol>
+</details>
+<hr/>
 
-The WhatsApp Link Generator is a web-based application that allows users to send messages through WhatsApp without the need to provide their phone number. This README file provides an overview of the application, its features, and instructions for usage.
+# 👋 Introduction
 
+WhatsApp is a **ubiquitous messaging platform**, but it often requires users to share their phone numbers for communication. *Privacy concerns* and the need for a more seamless way to engage with WhatsApp led to the creation of **WhatsApp Link Generator**.
 
+Our application empowers you to *generate WhatsApp links without the need for users to reveal their phone numbers*. With just a few clicks, you can create personalized links that open WhatsApp conversations with *pre-filled messages*, making it easier for users to start chatting with you. Whether you're promoting your business, sharing contact information, or providing customer support, **WhatsApp Link Generator** streamlines the process.
 
-## Visit the WebApp
-https://amittri1025.github.io/Whatsapp-Link-Gen/
+<hr/>
 
-## 🌐 About The Project
+# 🌐 About The Project
 
-![My wassup link generator](./images/whatsappscreen.gif)
+Discover the WhatsApp Link Generator, a privacy-centric web application designed to streamline WhatsApp communication by allowing you to effortlessly generate personalized links, safeguarding user phone numbers while facilitating smooth conversations.
+
+<div align='center'>
+<img src="./images/whatsappscreen.gif" alt="gif-here" />
+</div>
 <p align="right">(<a href="#top">Back to top</a>)</p>
 
-## 🧰 Tech Stack Used
+<hr/>
+
+# 🧰 Tech Stack Used
+
+![html](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) ![css](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) ![javascript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E) ![bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)
 
-- ![html](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
-- ![css](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
-- ![javascript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E)
-- ![bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)
 <p align="right">(<a href="#top">Back to top</a>)</p>
 
-## 🌟 Features 
+# 🌟 Features
 
-1. Send Messages directly to people without saving their number
-1. The Link is created using whatsapp api.
+1. **Privacy-First**: Protect user privacy by eliminating the need to share phone numbers.
+2. **Customizable Messages**: Personalize your WhatsApp links with pre-defined messages.
+3. **Responsive Design**: Enjoy a seamless user experience across devices.
+4. **User-Friendly Interface**: An intuitive and easy-to-use interface for effortless navigation.
+5. **Multi-Language Support**: Reach a global audience with support for multiple languages.
+6. **Open Source**: Contribute to the project, adapt it for your needs, or integrate it into your applications.
 
-```javascript
-    const whatsShareLink = `api.whatsapp.com/send?phone=91${mob.value}&text=${linkText}&lang=en`
-```
+<hr/>
+
+# 🐺 Usage
+
+Using the WhatsApp Link Generator is straightforward and user-friendly. Follow these simple steps to send messages without sharing your phone number:
 
-## 🐺 Usage 
-You are free to modify it whatever way you want. Just clone and enjoy 🚀
+1. **Enter Your Phone Number:** Start by entering your phone number in the provided input field. This is the number that will receive the WhatsApp message.
+2. **Enter Text to Send:** Next, type your message into the text input box. This is the message that will appear when the user clicks the generated link.
+3. **Generate WhatsApp Link:** Click the "Generate Link" button, and the tool will create a unique WhatsApp link for your message.
+4. **Copy the Link:** Once the link is generated, click the "Copy Link" button to copy the generated WhatsApp link to your clipboard.
+5. **Share Your Link:** You can now share this link with anyone you want to contact you on WhatsApp. Share it through email, social media, or on your website.
 
-## 🤝🏼 Contributing 
-Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+Now, when someone clicks the link you've shared, they will be directed to a WhatsApp chat with your phone number pre-filled, along with the message you've specified. Enjoy convenient and private communication with the WhatsApp Link Generator!
 
-Please make sure to update tests as appropriate.
+<p align="right">(<a href="#top">Back to top</a>)</p>
+<hr/>
+
+# 📁 Folder Format 
+```bash
+WhatsApp-Link-Gen/
+├── images/
+│   ├──.png .gif .svg files   
+├── index.html
+├── styles.css   
+├── scripts/
+│   ├── clipboard.min.js 
+├── app.js
+├── LICENSE                   
+├── README.md 
+├── vanillaEmojiPicker.js 
+```
+# 🤝🏼 Contributing
 
-Instructions and How to Contribute.
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. You are free to modify it whatever way you want. Just clone and enjoy 🚀. **Please make sure to update tests as appropriate.**
 
-Step 1. Install Git/ Github in your system.
+## Instructions over how to Contribute.
 
-Fork the repository: This step creates a copy of the original repository under your GitHub account.
+**Step 1. Install Git/ Github in your system.** Fork the repository: This step creates a copy of the original repository under your GitHub account.
 
 ```bash
-git clone https://github.com/original-repo-username/original-repo.git
-cd original-repo
+git clone https://github.com/amittri1025/Whatsapp-Link-Gen.git
+cd Whatsapp-Link-Gen
 ```
 
-Step 2 . Create a new branch: It's recommended to create a new branch for your contribution. This helps keep your changes separate from the main branch.
+**Step 2 . Create a new branch:** It's recommended to create a new branch for your contribution. This helps keep your changes separate from the main branch.
 
 ```bash
 git checkout -b my-branch
 ```
 
-Step 3. Make and commit your changes: Write your code or make the necessary modifications to the files in the repository. Once you're done, commit your changes with a meaningful message describing the changes you made.
+**Step 3. Make and commit your changes:** Write your code or make the necessary modifications to the files in the repository. Once you're done, commit your changes with a meaningful message describing the changes you made.
 
 ```bash
 git add .
 git commit -m "Add my contribution"
 ```
 
-
-Step 4. 
-Sync with the original repository: Keep your forked repository in sync with the original repository to incorporate any recent changes made by other contributors.
+**Step 4. Sync with the original repository:** Keep your forked repository in sync with the original repository to incorporate any recent changes made by other contributors.
 
 ```bash
-git remote add upstream https://github.com/original-repo-username/original-repo.git
+git remote add upstream https://github.com/amittri1025/Whatsapp-Link-Gen.git
 git fetch upstream
-git merge upstream/main```
+git merge upstream/main
+```
 
-Step 5. 
-Push your changes and create a pull request: Push your branch with the committed changes to your forked repository. Then, create a pull request to propose your changes to the original repository.
+**Step 5. Push your changes and create a pull request:** Push your branch with the committed changes to your forked repository. Then, create a pull request to propose your changes to the original repository.
 
 ```bash
 git push origin my-branch
 ```
 
-
 After pushing your changes, you can visit the original repository's page on GitHub or the respective hosting platform. From there, you can create a pull request by following the prompts.
 
-Note that these commands assume you're using HTTPS to clone and push to the repository. If you have set up SSH keys, you can use the SSH URL instead for cloning and pushing.
+*Note that these commands assume you're using HTTPS to clone and push to the repository. If you have set up SSH keys, you can use the SSH URL instead for cloning and pushing.*
+
 <p align="right">(<a href="#top">Back to top</a>)</p>
 
-## 📱 Contact Me
-[![linked-in](https://img.shields.io/badge/Linked_In-0077B5?style=for-the-badge&logo=LinkedIn&logoColor=white)](https://www.linkedin.com/in/tripathiamit10/)
-[![gmail](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=Gmail&logoColor=white)](mailto:https://github.com/amittri1025)
-[![instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/amitt.zz/)
+<p align="center">
+<img src="https://i.imgur.com/FMMW1dH.png">
+</p>
+
+<hr/>
+
+# 🏆 Contributors
+<a href="https://github.com/amittri1025/Whatsapp-Link-Gen/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=amittri1025/Whatsapp-Link-Gen" />
+</a>
+
+# 📱 Contact Me
+
+[![linked-in](https://img.shields.io/badge/Linked_In-0077B5?style=for-the-badge&logo=LinkedIn&logoColor=white)](https://www.linkedin.com/in/tripathiamit10/) [![gmail](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=Gmail&logoColor=white)](mailto:https://github.com/amittri1025) [![instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/amitt.zz/)
+
 <p align="right">(<a href="#top">Back to top</a>)</p>
+<hr/>
 
-## 📝 License
+# 📝 License
 
 The project is licensed under the <a href = "https://choosealicense.com/licenses/mit/" > MIT </a> License.
-<p align="right">(<a href="#top">Back to top</a>)</p>
 
+<p align="right">(<a href="#top">Back to top</a>)</p>
 
-▶ Whatsapp Link Gen by Amit 
+▶ Whatsapp Link Gen by Amit