├── README.md
├── favicon.ico
├── index.html
└── src
    ├── css
        └── style.css
    ├── images
        ├── desktop.png
        └── mobile.png
    └── js
        └── script.js


/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # 🔐 JavaScript Text Encryption
  3 | 
  4 | This is a **simple web application** that allows users to **encrypt and decrypt text** using **AES encryption**. The application is built with **HTML, CSS, and JavaScript**.
  5 | 
  6 | ## 📸 Preview
  7 | 
  8 | ### 💻 Desktop
  9 | ![Desktop Preview](./src/images/desktop.png)
 10 | 
 11 | ### 📱 Mobile
 12 | ![Mobile Preview](./src/images/mobile.png)
 13 | 
 14 | ## ✨ Features 
 15 | 
 16 | - 🔒 **Text Encryption**: Enter any text to **securely encrypt** it.
 17 | - 🔑 **Text Decryption**: Encrypted text can be **decoded back** to its original form.
 18 | - 📋 **Copy to Clipboard**: Easily copy the text or encrypted text **with a single click**.
 19 | 
 20 | ## 🚀 Installation
 21 | 
 22 | ### 📥 Downloading the Project
 23 | 
 24 | 1. **Clone the Repository**:  
 25 |    Use the following command in your terminal to clone the repository to your local machine:
 26 |    ```bash
 27 |    git clone https://github.com/Iqbolshoh/javascript-text-encryption.git
 28 |    ```
 29 | 
 30 | 2. **Download as ZIP**:  
 31 |    Alternatively, you can download the project as a ZIP file directly from GitHub:
 32 |    - 🔗 Go to the [repository page](https://github.com/Iqbolshoh/javascript-text-encryption).
 33 |    - 🟢 Click the **"Code"** button.
 34 |    - 📥 Select **"Download ZIP"** to download the entire project as a ZIP file.
 35 |    - 📂 Extract the contents of the ZIP file to a folder on your computer.
 36 | 
 37 | ### 🏃 Running the Project
 38 | 
 39 | 1. 📁 Navigate to the project directory.
 40 | 2. 🌐 Open the **`index.html`** file in your web browser.
 41 | 
 42 | ## 🛠 Usage
 43 | 
 44 | 1. 🔒 **Encrypting Text**:
 45 |    - 📝 Type or paste your text into the **first text area**.
 46 |    - 🔐 The encrypted text will automatically appear in the **second text area**.
 47 | 
 48 | 2. 🔑 **Decrypting Text**:
 49 |    - 📝 Paste the encrypted text into the **second text area**.
 50 |    - 🔓 The original text will automatically appear in the **first text area**.
 51 | 
 52 | 3. 📋 **Copying Text**:
 53 |    - 👆 Click the **copy icon** next to the text area to **copy the text** to your clipboard.
 54 | 
 55 | ## 🖥 Technologies Used
 56 | ![HTML](https://img.shields.io/badge/HTML-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
 57 | ![CSS](https://img.shields.io/badge/CSS-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
 58 | ![JavaScript](https://img.shields.io/badge/JavaScript-%23F7DF1C.svg?style=for-the-badge&logo=javascript&logoColor=black)
 59 | 
 60 | ## 📜 License
 61 | This project is open-source and available under the **MIT License**.
 62 | 
 63 | ## 🤝 Contributing  
 64 | 🎯 Contributions are welcome! If you have suggestions or want to enhance the project, feel free to fork the repository and submit a pull request.
 65 | 
 66 | ## 📬 Connect with Me  
 67 | 💬 I love meeting new people and discussing tech, business, and creative ideas. Let’s connect! You can reach me on these platforms:
 68 | 
 69 | <div align="center">
 70 |   <table>
 71 |     <tr>
 72 |       <td>
 73 |         <a href="https://iqbolshoh.uz" target="_blank">
 74 |           <img src="https://img.icons8.com/color/48/domain.png" 
 75 |                height="40" width="40" alt="Website" title="Website" />
 76 |         </a>
 77 |       </td>
 78 |       <td>
 79 |         <a href="mailto:iilhomjonov777@gmail.com" target="_blank">
 80 |           <img src="https://github.com/gayanvoice/github-active-users-monitor/blob/master/public/images/icons/gmail.svg"
 81 |                height="40" width="40" alt="Email" title="Email" />
 82 |         </a>
 83 |       </td>
 84 |       <td>
 85 |         <a href="https://github.com/iqbolshoh" target="_blank">
 86 |           <img src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/github.svg"
 87 |                height="40" width="40" alt="GitHub" title="GitHub" />
 88 |         </a>
 89 |       </td>
 90 |       <td>
 91 |         <a href="https://www.linkedin.com/in/iqbolshoh/" target="_blank">
 92 |           <img src="https://github.com/gayanvoice/github-active-users-monitor/blob/master/public/images/icons/linkedin.svg"
 93 |                height="40" width="40" alt="LinkedIn" title="LinkedIn" />
 94 |         </a>
 95 |       </td>
 96 |       <td>
 97 |         <a href="https://t.me/iqbolshoh_777" target="_blank">
 98 |           <img src="https://github.com/gayanvoice/github-active-users-monitor/blob/master/public/images/icons/telegram.svg"
 99 |                height="40" width="40" alt="Telegram" title="Telegram" />
100 |         </a>
101 |       </td>
102 |       <td>
103 |         <a href="https://wa.me/998997799333" target="_blank">
104 |           <img src="https://github.com/gayanvoice/github-active-users-monitor/blob/master/public/images/icons/whatsapp.svg"
105 |                height="40" width="40" alt="WhatsApp" title="WhatsApp" />
106 |         </a>
107 |       </td>
108 |       <td>
109 |         <a href="https://instagram.com/iqbolshoh_777" target="_blank">
110 |           <img src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/instagram.svg"
111 |                height="40" width="40" alt="Instagram" title="Instagram" />
112 |         </a>
113 |       </td>
114 |       <td>
115 |         <a href="https://x.com/iqbolshoh_777" target="_blank">
116 |           <img src="https://img.shields.io/badge/X-000000?style=for-the-badge&logo=x&logoColor=white"
117 |                height="40" width="40" alt="X" title="X (Twitter)" />
118 |         </a>
119 |       </td>
120 |       <td>
121 |         <a href="https://www.youtube.com/@Iqbolshoh_777" target="_blank">
122 |           <img src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/youtube.svg"
123 |                height="40" width="40" alt="YouTube" title="YouTube" />
124 |         </a>
125 |       </td>
126 |     </tr>
127 |   </table>
128 | </div>
129 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Iqbolshoh/javascript-text-encryption/7b7bbbf32b1d13d6e3be0c3e858ba8eeff6fce24/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 9 |     <title>Text Encryption</title>
10 |     <link rel="icon" href="./favicon.ico">
11 |     <link rel="stylesheet" href="./src/css/style.css">
12 | </head>
13 | 
14 | <body>
15 |     <div class="container">
16 |         <h1>Text Encryption</h1>
17 |         <h2>Encrypt Text</h2>
18 |         <div class="input-container">
19 |             <textarea id="text" placeholder="Enter text here" oninput="processText(1)"></textarea>
20 |             <i class="fas fa-copy copy-icon" onclick="copyText(1)"></i>
21 |         </div>
22 |         <h2>Encrypted Text</h2>
23 |         <div class="input-container">
24 |             <textarea id="encrypted" placeholder="Encrypted text will appear here" oninput="processText(2)"></textarea>
25 |             <i class="fas fa-copy copy-icon" onclick="copyText(2)"></i>
26 |         </div>
27 |     </div>
28 | 
29 |     <script src="./src/js/script.js"></script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/src/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |     font-family: 'Arial', sans-serif;
  9 |     background-color: #E9ECEF;
 10 |     display: flex;
 11 |     justify-content: center;
 12 |     align-items: center;
 13 |     min-height: 100vh;
 14 |     padding: 20px;
 15 | }
 16 | 
 17 | .container {
 18 |     background-color: #FFFFFF;
 19 |     padding: 30px;
 20 |     border-radius: 12px;
 21 |     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
 22 |     width: 100%;
 23 |     max-width: 1000px;
 24 |     border: 1px solid #E0E0E0;
 25 | }
 26 | 
 27 | h1 {
 28 |     font-size: 32px;
 29 |     text-align: center;
 30 |     margin-bottom: 30px;
 31 |     color: #007BFF;
 32 | }
 33 | 
 34 | h2 {
 35 |     font-size: 24px;
 36 |     margin-bottom: 20px;
 37 |     color: #333333;
 38 | }
 39 | 
 40 | .input-container {
 41 |     position: relative;
 42 |     margin-bottom: 25px;
 43 | }
 44 | 
 45 | textarea {
 46 |     width: 100%;
 47 |     padding: 15px 40px 15px 15px;
 48 |     border-radius: 8px;
 49 |     border: 1px solid #CCCCCC;
 50 |     font-size: 16px;
 51 |     resize: none;
 52 |     min-height: 200px;
 53 |     background-color: #FAFAFA;
 54 |     color: #333333;
 55 |     transition: all 0.3s ease;
 56 |     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 57 | }
 58 | 
 59 | textarea:focus {
 60 |     border-color: #007BFF;
 61 |     background-color: #FFFFFF;
 62 |     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.16), 0 0 0 2px rgba(0, 123, 255, .25);
 63 | }
 64 | 
 65 | textarea::placeholder {
 66 |     color: #6c757d;
 67 | }
 68 | 
 69 | .copy-icon {
 70 |     position: absolute;
 71 |     top: 50%;
 72 |     right: 15px;
 73 |     transform: translateY(-50%);
 74 |     font-size: 20px;
 75 |     cursor: pointer;
 76 |     color: #707070;
 77 |     transition: color 0.3s ease, transform 0.3s ease;
 78 | }
 79 | 
 80 | .copy-icon:hover {
 81 |     color: #007BFF;
 82 |     transform: translateY(-50%) scale(1.1);
 83 | }
 84 | 
 85 | /* Responsive design */
 86 | @media (max-width: 768px) {
 87 |     .container {
 88 |         padding: 20px;
 89 |     }
 90 | 
 91 |     h1 {
 92 |         font-size: 28px;
 93 |         margin-bottom: 20px;
 94 |     }
 95 | 
 96 |     h2 {
 97 |         font-size: 20px;
 98 |         margin-bottom: 15px;
 99 |     }
100 | }


--------------------------------------------------------------------------------
/src/images/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Iqbolshoh/javascript-text-encryption/7b7bbbf32b1d13d6e3be0c3e858ba8eeff6fce24/src/images/desktop.png


--------------------------------------------------------------------------------
/src/images/mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Iqbolshoh/javascript-text-encryption/7b7bbbf32b1d13d6e3be0c3e858ba8eeff6fce24/src/images/mobile.png


--------------------------------------------------------------------------------
/src/js/script.js:
--------------------------------------------------------------------------------
 1 | const encrypt = (text) => text ? CryptoJS.AES.encrypt(text, "Iqbolshoh_777").toString() : "";
 2 | const decrypt = (encryptedText) => encryptedText ? CryptoJS.AES.decrypt(encryptedText, "Iqbolshoh_777").toString(CryptoJS.enc.Utf8) : "";
 3 | function processText(n) {
 4 |     let text = document.getElementById("text"),
 5 |         encrypted = document.getElementById("encrypted");
 6 |     if (n === 1) {
 7 |         encrypted.value = encrypt(text.value);
 8 |     } else {
 9 |         text.value = decrypt(encrypted.value);
10 |     }
11 | }
12 | function copyText(n) {
13 |     let copyTextarea = (n === 1) ? document.getElementById("text") : document.getElementById("encrypted");
14 |     copyTextarea.select();
15 |     document.execCommand("copy");
16 | }


--------------------------------------------------------------------------------