                    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML Escape</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            margin-top: 60px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        textarea {
            width: 90%;
            height: 250px;
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: "Arial", sans-serif;
        }

        button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>








    <div class="container">
        <textarea wrap="off" placeholder="Enter HTML code here" id="box"></textarea>
        <button onclick="escapeHTMLAndAddText()">Escape HTML and Add Text</button>
        <br>
        <button id="copyButton" onclick="copyText()">Copy </button>
        <button id="resetButton" onclick="resetText()">Reset</button>

    </div>

    <script>
        function resetText() {
            var textarea = document.getElementById("box");
            textarea.value = ""; // Reset the textarea content

            var resetButton = document.getElementById('resetButton');
            resetButton.textContent = "Reseted";

            setTimeout(function() {
                resetButton.textContent = "Reset";
            }, 2000); // Reset the button text to "Reset" after 2 seconds
        }
    </script>

    <script>
        // Your JavaScript functions remain unchanged.
    </script>
    <script>
        function copyText() {
            var textarea = document.getElementById("box");
            textarea.select();
            document.execCommand("copy");
            window.getSelection().removeAllRanges();

            var copyButton = document.getElementById('copyButton');
            copyButton.textContent = "Copied";

            setTimeout(function() {
                copyButton.textContent = "Copy";
            }, 2000); // Reset the button text to "Copy" after 2 seconds
        }
    </script>

    <script>
        function escapeHTMLAndAddText() {
            const box = document.getElementById("box");
            const escapedCode = htmlEscape(box.value);
            const textBefore = ' \n\n\n\n\n<!--            start           --> \n\n\n\n\n        <h1>      </h1> \n \n<pre class="response">\n                    <code style="background: black; padding-top: 40px; padding-left: 20px;" class="language-html">';
            const textAfter = '    \n</code>\n        <button class="copy-button" onclick="copyCode(this)">Copy</button>\n        <button class="leftb" onclick="openContentInNewTab(this)">View</button>\n        <button class="leftc" onclick="toggleEditMode(this)">Edit</button>\n        <button class="download-button" style="display: none;" onclick="downloadHTML(this)">Download HTML</button>\n </pre>  \n\n\n\n\n<!--            end          --> \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n';
            box.value = textBefore + escapedCode + textAfter;
        }

        function htmlEscape(text) {
            return text.replace(/[<>&]/g, function(tag) {
                const replacements = {
                    '<': '&lt;',
                    '>': '&gt;',
                    '&': '&amp;'
                };
                return replacements[tag] || tag;
            });
        }
    </script>
</body>

</html>

Bolier plate

                    <!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title> </title>

    <style>
    
    
        /*textarea{
              border: 1px solid black ;
              border-radius: 5px;
              color: black ;
              background: white ;
              text-align: center;
               } */
    </style>
    <style>


    </style>
</head>
<body>



    <!--    <textarea wrap="off"  >     </textarea>   -->

      <!--          -->


    <script>


    </script>
    <script>


    </script>
</body>
</html>

textarea

                    <textarea wrap="off" style="width: 90%; height: 250px; padding: 10px; margin-top: 10px; border: 2px solid #ccc; border-radius: 5px; font-family: 'Arial', sans-serif;"></textarea>

Hilight js viewer

                    <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Syntax Highlighting</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/base16/humanoid-dark.min.css" integrity="sha512-VpzmzXvIXjYfKE4xjvTjF41gt15bbXf3u0CDWXDm105TA7yphqLSVqAc+gnpJswiS068uRYqiXCC4MvCycjQhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
      <style>
      
         *{
         box-sizing: border-box;
         margin: 0;
         }
         
         
         html{
         background: #000;
         }
         
         
         .fakeTextarea {
         outline: none;
         width: 100vw;
         background: #000;
         margin: auto;
         white-space: pre-wrap;
         overflow: auto;
         color: white;
         padding: 20px;
         height: 900px;
         }
         
         
         code {
         white-space: pre;
         overflow-wrap: normal;
         word-break: normal;
         }
         
         
      </style>
   </head>
   <body>
     
      <div class="editor-container fakeTextarea" contenteditable="true" spellcheck="false"></div>
      
      
      <script>
         hljs.initHighlightingOnLoad();
         
         const fakeTextareas = document.querySelectorAll('.fakeTextarea');
         
         // Add an input event listener with debounce to apply syntax highlighting
         fakeTextareas.forEach(textarea => {
             let debounceTimer;
             textarea.addEventListener('input', () => {
                 clearTimeout(debounceTimer);
                 debounceTimer = setTimeout(() => {
                     highlightCode(textarea);
                 }, 10); // Delay for 500ms after the last input
             });
         });
         
         // Function to apply syntax highlighting
         function highlightCode(textarea) {
             const codeContent = textarea.innerText;
             textarea.innerHTML = `<code>${hljs.highlightAuto(codeContent).value}</code>`;
         }
      </script>
      
      
   </body>
</html>

Accordion

                    <!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS Animation</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/languages/javascript.min.js"></script>
      <script>
         hljs.highlightAll();
      </script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/base16/humanoid-dark.min.css" integrity="sha512-VpzmzXvIXjYfKE4xjvTjF41gt15bbXf3u0CDWXDm105TA7yphqLSVqAc+gnpJswiS068uRYqiXCC4MvCycjQhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
      <style>
      
         .response {
         border: 1px solid white;
         width: 90vw;
         margin: auto;
         position: relative;
         display: flex;
         flex-wrap: nowrap; /* Prevent wrapping of boxes when scrolling horizontally */
         margin-bottom: 20px;
         background: black;
         overflow-x: auto; /* Enable horizontal scrolling */
         border-radius: 10px;
         max-height: 40vh;
         color: white;
         padding-left: 14px;
         }
         
         
         .git{
         /*   for link  */
         display: block;
         width: 90%;
         color: white;
         margin: auto;
         border-radius: 40px;
         padding-top: 15px;
         text-decoration: none;
         height: 40px;
         text-align: center;
         margin-top: 30px;
         border: 1px solid white;
         }
         
         
         /* Styles for the copy button */
         .copy-button {
         position: sticky;
         top: 10px;
         right: 10px;
         height: 25px;
         padding: 4px 8px;
         border: none;
         border-radius: 4px;
         background-color: #007bff;
         color: #fff;
         cursor: pointer;
         }
         
      </style>
      
      <style>
      
         html {
         box-sizing: border-box;
         background: #000;
         color: white;
         }
         
        
         .accordion-button {
         margin: 20px;
         width: 85vw;
         border-radius: 50px;
         background-color: dodgerblue;
         color: white;
         border: none;
         height: 50px; /* Set a fixed height for the button */
         }
         
         
         .accordion-button:hover {
         background-color: saddlebrown;
         }
         
         
         .container {
         max-width: 100vw;
         overflow: hidden;
         transition: max-height 0.6s ease-out; /* Use max-height for smooth transition */
         }
         
         
         .container.closed {
         max-height: 0;
         }
         
      </style>
      
   </head>
   <body>
     
      <!--          start          -->



      <div class="accordion">
         <button class="accordion-button" onclick="toggleContainer(this)">Box</button>
         <div class="container closed">
            <div class="response">
               <pre><code style="background: black;" class="language-html">
                 

               </code></pre>
               <button class="copy-button">Copy.    </button>
            </div>
            <br>
            <br>
         </div>
      </div>
      
       <!--           end           -->
     
      
      
      
      
      
      
      
      <!--          start          -->

      
      
      <div class="accordion">
         <button class="accordion-button" onclick="toggleContainer(this)">Simple</button>
         <div class="container closed">
            <p>This is some content inside the first container.</p>
            <pre>
                .
                .
                .
            </pre>
         </div>
      </div>
      
      
      <!--           end           -->








      
      
      <!--          start          -->
      
      
      
      <div class="accordion">
         <button class="accordion-button" onclick="toggleContainer(this)">Link</button>
         <div class="container closed">
            <a href="" class="git">link 1</a>
            <a href="" class="git">link 2</a>
         </div>
      </div>
      
      
      
            <!--           end           -->









      <!-- 
         **********************
         iske phle sb Krna hai 
         
         **********************
         
         
         -->    
      <div style="height: 50vh;" ></div>
      <script>
         function toggleContainer(button) {
             const container = button.nextElementSibling;
             const isOpen = !container.classList.contains('closed');
         
             if (isOpen) {
                 // Container is open, so just close it without scrolling
                 container.style.maxHeight = '0';
                 container.classList.add('closed');
             } else {
                 // Calculate the container's current scroll height before opening
                 const currentScrollHeight = container.scrollHeight;
         
                 // Open the container
                 container.style.maxHeight = currentScrollHeight + 'px';
                 container.classList.remove('closed');
             }
         }
         
         
             
      </script>
      <script>
         function copyResponseText() {
           const responseTextElement = this.previousElementSibling;
           const textToCopy = responseTextElement.innerText;
         
          
           const tempTextArea = document.createElement('textarea');
           tempTextArea.value = textToCopy;
           document.body.appendChild(tempTextArea);
         
         
           tempTextArea.select();
           document.execCommand('copy');
         
           
           document.body.removeChild(tempTextArea);
         
         
           this.innerText = 'Copied!';
           setTimeout(() => {
             this.innerText = 'Copy';
           }, 2000);
         }
         
         
         const copyButtons = document.querySelectorAll('.copy-button');
         copyButtons.forEach((button) => {
           button.addEventListener('click', copyResponseText);
         });
      </script>
        <script>
    function toggleContainer(button) {
      const container = button.nextElementSibling;
      const isOpen = !container.classList.contains('closed');

      if (isOpen) {
        // Container is open, so just close it without scrolling
        container.style.maxHeight = '0';
        container.classList.add('closed');
        // Set button color to default when closing
        button.style.backgroundColor = 'dodgerblue';
      } else {
        // Calculate the container's current scroll height before opening
        const currentScrollHeight = container.scrollHeight;

        // Open the container
        container.style.maxHeight = currentScrollHeight + 'px';
        container.classList.remove('closed');
        // Change button color when opening
        button.style.backgroundColor = 'grey';
      }
    }
  </script>

   </body>
</html>

Format

                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <style>
       textarea{
           width: 90vw;
           height: 400px;
       }
   </style>
</head>
<body>
    
 
     
        <textarea wrap="off" id="box" cols="30" rows="10"></textarea>
        <button id="formatButton" onclick="format()">Format</button>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-html.min.js"></script>
    
        <script>
            function format() {
                const box = document.getElementById("box");
                const currentText = box.value;
                const formattedText = html_beautify(currentText, {
                    indent_size: 5, // Adjust the indent size as needed
                    wrap_line_length: 0
                });
                box.value = formattedText;
            }
        </script>
        
        
        
       
       
        
</body>
</html>

Escape

                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <style>
       textarea{
           width: 90vw;
           height: 400px;
       }
   </style>
</head>
<body>
    
 
 
 
 
 
     <textarea wrap="off" id="box"></textarea>
    <button id="escapeButton" onclick="escape()">Escape</button>


    <script>
        function escape() {
            const box = document.getElementById("box");
            const escapedCode = htmlEscape(box.value);
            box.value = escapedCode;

            // Change button text to "Escaped" for 2 seconds
            const button = document.getElementById("escapeButton");
            button.textContent = "Escaped";
            setTimeout(function() {
                button.textContent = "Escape";
            }, 2000);
        }

        function htmlEscape(text) {
            return text.replace(/[<>&]/g, function(tag) {
                const replacements = {
                    '<': '&lt;',
                    '>': '&gt;',
                    '&': '&amp;'
                };
                return replacements[tag] || tag;
            });
        }
    </script>
        
        
        
        
        
</body>
</html>

Resat

                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <style>
       textarea{
           width: 90vw;
           height: 400px;
       }
   </style>
</head>
<body>
    
 
 
 
 
 
 <textarea class="box" id="myTextarea">This is the text you want to copy.</textarea>
<button id="resetButton" onclick="resetText()">Reset</button>

<script>
function resetText() {
  var textarea = document.getElementById("myTextarea");
  textarea.value = ""; // Reset the textarea content

  var resetButton = document.getElementById('resetButton');
  resetButton.textContent = "Reseted";

  setTimeout(function() {
    resetButton.textContent = "Reset";
  }, 2000); // Reset the button text to "Reset" after 2 seconds
}
</script>

        
        
        
        
        
</body>
</html>

Copy

                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <style>
       textarea{
           width: 90vw;
           height: 400px;
       }
   </style>
</head>
<body>
    
 
 
 
 
 
 

    <textarea wrap="off" class="box" id="myTextarea"></textarea>
    <button id="copyButton" onclick="copyText()">Copy</button>

    <script>
        function copyText() {
            var textarea = document.getElementById("myTextarea");
            textarea.select();
            document.execCommand("copy");
            window.getSelection().removeAllRanges();

            var copyButton = document.getElementById('copyButton');
            copyButton.textContent = "Copied";

            setTimeout(function() {
                copyButton.textContent = "Copy";
            }, 2000); // Reset the button text to "Copy" after 2 seconds
        }
    </script>


        
        
        
        
        
</body>
</html>

Download in .html format

                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <style>
       textarea{
           width: 90vw;
           height: 400px;
       }
   </style>
</head>
<body>
    
 
 
 
 
 
 <textarea id="box" rows="4" cols="50"></textarea>
<button onclick="downloadHTML()">Download HTML</button>
<script>
    function getRandomWord(length) {
    const characters = 'abcdefghijklmnopqrstuvwxyz';
    let randomWord = '';
    for (let i = 0; i < length; i++) {
    ¹8    const randomIndex = Math.floor(Math.random() * characters.length);
        randomWord += characters.charAt(randomIndex);
    }
    return randomWord;
}


function downloadHTML() {
    const textarea = document.getElementById('box');
    const htmlContent = textarea.value;
    const blob = new Blob([htmlContent], { type: 'text/html' });


    const randomFileName = getRandomWord(8) + '.html';
    const url = URL.createObjectURL(blob);


    const a = document.createElement('a');
    a.href = url;
    a.download = randomFileName;
    a.click();


    URL.revokeObjectURL(url);
}


</script>  
        
        
        
        
        
</body>
</html>

Download in .txt format

                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <style>
       textarea{
           width: 90vw;
           height: 400px;
       }
   </style>
</head>
<body>
    
 
 
 
 
 
    <textarea id="box" rows="4" cols="50"></textarea>
<button onclick="downloadTxt()">Download Text</button>
 <script>
     function getRandomWord(length) {
    const characters = 'abcdefghijklmnopqrstuvwxyz';
    let randomWord = '';
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        randomWord += characters.charAt(randomIndex);
    }
    return randomWord;
}

function downloadTxt() {
    const textarea = document.getElementById('box');
    const textContent = textarea.value;
    const blob = new Blob([textContent], { type: 'text/plain' });

    const randomFileName = getRandomWord(8) + '.txt';
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = randomFileName;
    a.click();

    URL.revokeObjectURL(url);
}

 </script>
        
        
        
        
        
</body>
</html>

All formate download

                    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        
        #container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        h2 {
            text-align: center;
            color: #3E4EFD;
        }

        label, input, button {
            display: block;
            margin: 10px 0;
        }

        input, button {
            width: 100%;
            height: 40px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background: #3E4EFD;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="container">
        <h2>Text to File Converter</h2>

        <label for="textInput">Enter Text:</label>
        <textarea wrap="off" id="textInput" placeholder="Enter your text here"></textarea>

        <label for="fileNameInput">File Name:</label>
        <input type="text" id="fileNameInput" placeholder="File name">

        <label for="fileFormatInput">File Format:</label>
        <input type="text" id="fileFormatInput" placeholder="e.g., txt, csv, json">

        <button onclick="convertTextToFile()">Download</button>
    </div>
    <script>
        function convertTextToFile() {
            const text = document.getElementById("textInput").value;
            const format = document.getElementById("fileFormatInput").value;
            let fileName = document.getElementById("fileNameInput").value.trim();

            if (fileName === "") {
                fileName = generateRandomFileName(8);
            }

            const blob = new Blob([text], { type: 'text/plain' });
            const downloadLink = document.createElement('a');
            downloadLink.href = window.URL.createObjectURL(blob);
            downloadLink.download = `${fileName}.${format}`;

            downloadLink.style.display = 'none';
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }

      
    </script>
</body>
</html>

Open in New Tab to view html

                    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Text Converter</title>
    <style>
        textarea {
            width: 90vw;
            height: 400px;
        }
    </style>
</head>

<body>





    <textarea id="textInput" rows="8" placeholder="Paste your text here..."></textarea>
    <br>
    <button id="openButton" onclick="openTextInNewTab()">Open in New Tab</button>
    <script>
        function openTextInNewTab() {
            const text = document.getElementById('textInput').value;

            // Create a new tab/window and display the text
            const newTab = window.open('', '_blank');
            newTab.document.write(text);
        }
    </script>








</body>

</html>

Bolb to open

                    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Preview</title>
</head>
<body>
    <textarea wrap="off" id="htmlInput" placeholder="Paste your HTML here" rows="10" cols="40"   ></textarea>
    <button id="generateLink" onclick="generatePreview()">Open</button>

    <script>
        function generatePreview() {
            const htmlContent = document.getElementById("htmlInput").value;

            // Generate a temporary HTML file and open it in a new tab
            const blob = new Blob([htmlContent], { type: "text/html" });
            const url = URL.createObjectURL(blob);

            // Open the URL in a new tab
            window.open(url, "_blank");
        }
    </script>
</body>
</html>

Password protection

                    
<script>
    window.onload = function () {
      // Set body display to none by default
      document.body.style.display = "none";
      checkPassword();
    };

    function checkPassword() {
      var password = prompt("Enter the password:");

      // Check if the entered password is correct
      if (password === "1") {
        // Show the body content
        document.body.style.display = "block";
        showContent();
      } else {
        alert("Incorrect password. Access denied.");
        // You may choose to handle incorrect password attempts differently.
      }
    }
  </script>

Password protection

                        <script>
        function getPassword() {
            const password = "yourpassword"; // Replace with your actual password
            const input = prompt("Please enter the password to access the content:");
            if (input === password) {
                showContent("Authenticated content here.");
            } else if (input === "king") {
                alert("pliiiiii");
                getPassword(); // Redirect back to the password entry section
            } else if (input === null) {
                window.close(); // Close the tab if the user clicks "Cancel" or presses "Esc"
            } else {
                alert("Incorrect password. Click OK to try again.");
                getPassword(); // Redirect back to the password entry section
            }
        }
        function showContent(content) {
            document.body.innerHTML = content;
        }
        getPassword(); // Start the password entry process
    </script>

Password protect a webpage

                        <script>
        var password = prompt("Enter the password:");
        if (password !== "yourpassword") {
            window.location.href = "access-denied.html"; // Redirect to an access denied page
        }
    </script>

Horizontal scroll in text area

white-space: nowrap;

                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


    <style>
        textarea {
            white-space: nowrap;
            width: 90vw;
            height: 100px;
        }
    </style>




</head>

<body>





    <textarea>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas 

repellendus quis atque architecto beatae minus temporibus quidem impedit nobis recusandae!
        
sit amet, consectetur adipisicing elit. Nesciunt eum facere veritatis aliquid delectus,

nemo dolorum praesentium id laudantium atque dolores similique hic temporibus ex porro illum.

Excepturi, tenetur, modi.
    </textarea>





</body>

</html>

textarea

                    <textarea wrap="off" style="width: 90%; height: 250px; padding: 10px; margin-top: 10px; border: 2px solid #ccc; border-radius: 5px; font-family: 'Arial', sans-serif;"></textarea>

scroll By wrap="off"

                    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        textarea {
            width: 90vw;
            height: 100px;
        }
    </style>
</head>

<body>



    <textarea   wrap="off"    >

 This is example of vertical and horizontal scroll in textarea 
    
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
 Unde ab provident delectus rerum facilis at libero, quis, distinctio 
 
 sint asperiores dolor tenetur dolores ea eveniet. Doloremque quod facilis maiores consequatur.

</textarea>




</body>

</html>

Scroll in any element

            overflow: auto;
            white-space: nowrap;

                     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;






            overflow: auto;
            white-space: nowrap;





        }
    </style>
</head>

<body>
    <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus sapiente optio amet placeat mollitia tempore repudiandae, omnis rerum commodi similique sequi nesciunt ratione magnam corporis, est veritatis ut perspiciatis hic rem ipsa, quibusdam distinctio autem impedit illum? Laborum quidem minus ad, corporis, voluptates sed consectetur ut dicta doloremque deserunt obcaecati nobis impedit fugiat! Possimus ullam mollitia culpa, nemo temporibus dolore cum, nobis, soluta dolor vitae tempore necessitatibus odit quam sunt!</div>

</body>
</html>

                        <textarea wrap="off" id="box" cols="30" rows="10"></textarea>
    <button id="formatButton" onclick="format()">Format</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-html.min.js"></script>

    <script>
        function format() {
            const box = document.getElementById("box");
            const currentText = box.value;
            const formattedText = html_beautify(currentText, {
                indent_size: 5, // Adjust the indent size as needed
                wrap_line_length: 0
            });
            box.value = formattedText;
        }
    </script>

            
<!--     Start           -->
    
    
    
    
    
    
    <pre class="response">
        <code style="background: black; padding-top: 40px; padding-left: 20px;" class="language-html">
</code>
        <button class="copy-button" onclick="copyCode(this)">Copy</button>
        <button class="leftb" onclick="openContentInNewTab(this)">View</button>
        <button class="leftc" onclick="toggleEditMode(this)">Edit</button>
        <button class="download-button" style="display: none;" onclick="downloadHTML(this)">Download HTML</button>
 </pre>




<!--     End          -->

                    <!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">




    <style>
        .scroll-box {
            width: 90vw;
            height: 200px;
            overflow: auto;
            position: relative;
border: 1px solid black ;
        }
        
        .section {
            position: sticky;
            top: 10px;
            Left: 0px;
            background-color: transparent;
        }


        .button {
            margin: 5px;
            padding: 10px;
            background-color: #3498db;
            color: #ffffff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="scroll-box">
        <div class="section">
            <button class="button">Button 1</button>
            <button class="button">Button 2</button>
            <button class="button">Button 3</button>
        </div>








    &lt;!--     start       --&gt;




    &lt;pre class="response"&gt;
        &lt;code style="background: black; padding-top: 40px; padding-left: 20px;" class="language-html"&gt;
&lt;/code&gt;
        &lt;button class="copy-button" onclick="copyCode(this)"&gt;Copy&lt;/button&gt;
        &lt;button class="leftb" onclick="openContentInNewTab(this)"&gt;View&lt;/button&gt;
        &lt;button class="leftc" onclick="toggleEditMode(this)"&gt;Edit&lt;/button&gt;
&lt;button class="format-button" style="display: none;" onclick="formatAndCopy(event)"&gt;Format&lt;/button&gt;
        &lt;button class="escape-button" style="display: none;" onclick="escapeAndCopy(this)"&gt;Escape&lt;/button&gt;
       &lt;button class="download-button" style="display: none;" onclick="downloadHTML(this)"&gt;Download HTML&lt;/button&gt;&lt;/pre&gt;




    &lt;!--     End       --&gt;




































        <!-- Add your content here that may cause the box to scroll -->
    </div>
</body>
</html>

Age calculator

                    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Age Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 400px;
        }

        .input-container {
            margin-bottom: 30px;
        }

        select,
        button,
        div {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            margin: 5px 0;
        }

        .day {
            display: block;
            font-weight: bold;
            color: #333;
        }

        button {
            background-color: #0074cc;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0054a2;
        }

        p.warning {
            margin-top: 10px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Age Calculator</h1>
        <div class="input-container">
            <select id="fromDay"></select>
            <select id="fromMonth"></select>
            <select id="fromYear"></select>
            <span class="day" id="fromDayOfWeek"></span>
        </div>
        <div class="input-container">
            <select id="toDay"></select>
            <select id="toMonth"></select>
            <select id="toYear"></select>
            <span class="day" id="toDayOfWeek"></span>
        </div>
        <button onclick="calculateAge()">Calculate</button>
        <p class="warning" id="result"></p>
    </div>

    <script>
        // Existing JavaScript code here
    </script>
    <script>
        function populateDropdowns(daySelect, monthSelect, yearSelect, startYear, endYear) {
            // Populate day dropdown with 1-31
            for (let day = 1; day <= 31; day++) {
                daySelect.innerHTML += `<option value="${day}">${day}</option>`;
            }

            // Populate month dropdown with full month names
            const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            for (let i = 0; i < months.length; i++) {
                monthSelect.innerHTML += `<option value="${i + 1}">${months[i]}</option>`;
            }

            // Populate year dropdown with the specified range
            for (let year = startYear; year <= endYear; year++) {
                yearSelect.innerHTML += `<option value="${year}">${year}</option>`;
            }
        }

        function setDefaultDates() {
            // Set the "From" date to 1st January 2000
            document.getElementById("fromDay").value = 1;
            document.getElementById("fromMonth").value = 1;
            document.getElementById("fromYear").value = 2000;

            // Set the "To" date to the current date
            const currentDate = new Date();
            document.getElementById("toDay").value = currentDate.getDate();
            document.getElementById("toMonth").value = currentDate.getMonth() + 1; // Months are zero-based
            document.getElementById("toYear").value = currentDate.getFullYear();
        }

        function calculateAge() {
            const fromDay = parseInt(document.getElementById("fromDay").value);
            const fromMonth = parseInt(document.getElementById("fromMonth").value);
            const fromYear = parseInt(document.getElementById("fromYear").value);

            const toDay = parseInt(document.getElementById("toDay").value);
            const toMonth = parseInt(document.getElementById("toMonth").value);
            const toYear = parseInt(document.getElementById("toYear").value);

            // Check if the selected day is valid for the selected month
            if (isValidDate(fromDay, fromMonth, fromYear) && isValidDate(toDay, toMonth, toYear)) {
                // Check for invalid day values for 30 and 31-day months
                if ((fromDay > 30 && (fromMonth === 4 || fromMonth === 6 || fromMonth === 9 || fromMonth === 11)) ||
                    (toDay > 30 && (toMonth === 4 || toMonth === 6 || toMonth === 9 || toMonth === 11)) ||
                    (fromDay > 31) || (toDay > 31)) {
                    document.getElementById("result").innerText = "Invalid date selection. Please check the day and month.";
                    document.getElementById("fromDayOfWeek").innerText = "";
                    document.getElementById("toDayOfWeek").innerText = "";
                    return;
                }

                const fromDate = new Date(fromYear, fromMonth - 1, fromDay);
                const toDate = new Date(toYear, toMonth - 1, toDay);

                if (fromDate > toDate) {
                    document.getElementById("result").innerText = "Please select a 'To' date that is after the 'From' date.";
                } else {
                    // Calculate age and display the result
                    const ageInMilliseconds = toDate - fromDate;
                    const ageDate = new Date(ageInMilliseconds);
                    const years = ageDate.getFullYear() - 1970;
                    const months = ageDate.getMonth();
                    const days = ageDate.getDate();

                    const formattedAge = `${years} years, ${months} months, ${days} days`;

                    const options = { weekday: 'long' };
                    const dayOfWeekFrom = new Intl.DateTimeFormat('en-US', options).format(fromDate);
                    const dayOfWeekTo = new Intl.DateTimeFormat('en-US', options).format(toDate);

                    document.getElementById("fromDayOfWeek").innerText = `(${dayOfWeekFrom})`;
                    document.getElementById("toDayOfWeek").innerText = `(${dayOfWeekTo})`;
                    document.getElementById("result").innerHTML = `${formattedAge}`;
                }
            } else {
                document.getElementById("result").innerText = "Invalid date selection. Please check the day and month.";
                document.getElementById("fromDayOfWeek").innerText = "";
                document.getElementById("toDayOfWeek").innerText = "";
            }
        }

        // Function to check if the selected day is valid for the selected month
        function isValidDate(day, month, year) {
            const lastDay = new Date(year, month, 0).getDate();
            return day > 0 && day <= lastDay;
        }

        // Populate the dropdowns, set default dates, and enable selecting years up to 2050
        populateDropdowns(
            document.getElementById("fromDay"),
            document.getElementById("fromMonth"),
            document.getElementById("fromYear"),
            1800, 2100
        );

        populateDropdowns(
            document.getElementById("toDay"),
            document.getElementById("toMonth"),
            document.getElementById("toYear"),
            1800, 2100
        );

        setDefaultDates();
    </script>
</body>
</html>