text and html file generator

use this code, save it in an HTML file and open it in a web browser. It will display a text and HTML file generator with fields for entering the text content and the desired filename. When you click the "Generate Files" button, it will generate a text file and an HTML file based on the provided inputs. The generated files will be available for download, and their contents will be displayed in the respective textareas.

Please note that the mymemory library is an unofficial JavaScript library that provides access to the MyMemory Translation service. As it is a third-party library, ensure that you review and comply with its terms of use and any licensing requirements.

<!DOCTYPE html>

<html>

<head>

  <title>Text and HTML File Generator</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background-color: #f3f3f3;

    }

    .container {

      max-width: 600px;

      margin: 0 auto;

      padding: 20px;

      background-color: #fff;

      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

      border-radius: 5px;

    }

    h1 {

      color: #333;

      text-align: center;

    }

    .prompt {

      margin-bottom: 10px;

    }

    .prompt label {

      display: block;

      font-weight: bold;

      margin-bottom: 5px;

    }

    .prompt input[type="text"] {

      width: 100%;

      padding: 5px;

      border: 1px solid #ccc;

      border-radius: 3px;

    }

    .button {

      display: block;

      width: 100%;

      padding: 10px;

      background-color: #4CAF50;

      color: #fff;

      text-align: center;

      text-decoration: none;

      border-radius: 3px;

      cursor: pointer;

    }

    .button:hover {

      background-color: #45a049;

    }

    .output {

      margin-top: 20px;

    }

    .output textarea {

      width: 100%;

      height: 200px;

      padding: 5px;

      border: 1px solid #ccc;

      border-radius: 3px;

      resize: vertical;

    }

  </style>

</head>

<body>

  <div class="container">

    <h1>Text and HTML File Generator</h1>

    <div class="prompt">

      <label for="text">Text:</label>

      <textarea id="text" placeholder="Enter your text"></textarea>

    </div>

    <div class="prompt">

      <label for="filename">Filename:</label>

      <input type="text" id="filename" placeholder="Enter the filename">

    </div>

    <button class="button" onclick="generateFiles()">Generate Files</button>

    <div class="output">

      <h3>Generated Text File:</h3>

      <textarea id="textFile" readonly></textarea>

    </div>

    <div class="output">

      <h3>Generated HTML File:</h3>

      <textarea id="htmlFile" readonly></textarea>

    </div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script src="https://unpkg.com/mymemory-translation@2.2.0/mymemory.js"></script>

  <script>

    function generateFiles() {

      var text = document.getElementById('text').value;

      var filename = document.getElementById('filename').value;

      // Generate Text File

      var textFileContent = text;

      var textFileBlob = new Blob([textFileContent], { type: 'text/plain' });

      var textFileURL = URL.createObjectURL(textFileBlob);

      var textFile = document.getElementById('textFile');

      textFile.value = textFileContent;

      textFile.download = filename + '.txt';

      // Generate HTML File

      var htmlFileContent = '<!DOCTYPE html>\n<html>\n<head>\n <title>' + filename + '</title>\n</head>\n<body>\n <pre>' + text + '</pre>\n</body>\n</html>';

      var htmlFileBlob = new Blob([htmlFileContent], { type: 'text/html' });

      var htmlFileURL = URL.createObjectURL(htmlFileBlob);

      var htmlFile = document.getElementById('htmlFile');

      htmlFile.value = htmlFileContent;

      htmlFile.download = filename + '.html';

    }

  </script>

</body>

</html>