<!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 media="screen">
      @import url("https://fonts.googleapis.com/css?family=Kanit&display=swap");
      body {
         height: 100vh;
         margin: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         background-color: #044b82;
         font-family: "Kanit", Verdana, Arial, sans-serif;
      }
      * {
         box-sizing: border-box;
      }
      #containerPk {
         width: 430px;
         padding: 40px 20px;
         background: white;
      }
      h1Pk {
         color: #0773d7;
         font-size: 30px;
         width: 100%;
         margin-top: -15px;
         margin-bottom: 30px;
         text-align: center;
         text-transform: uppercase;
      }
      #textPk {
         display: block;
         width: 100%;
         background-color: transparent;
         color: #021652;
         border: 2px solid #3ba9f4;
         border-radius: 2px;
         resize: none;
         margin-bottom: 35px;
         height: 200px;
         padding: 10px;
         font-size: 20px;
      }
      #filenamePk {
         width: calc(100% - 200px);
         border: 2px solid #3ba9f4;
         border-radius: 2px;
         background-color: transparent;
         color: #052a53;
         padding: 0 10px;
         height: 50px;
         line-height: 50px;
         font-size: 20px;
         margin-right: 20px;
      }
      #downloadPk {
         background-color: #3ba9f4;
         color: #fff;
         font-size: 20px;
         height: 50px;
         border: none;
         border-radius: 2px;
         width: 174px;
         cursor: pointer;
      }
   </style>
</head>
<body>
<div id="containerPk">
   <h1Pk>Save the text to a file</h1Pk>
   <textarea placeholder="Type your text here..." id="textPk"></textarea>
   <input id="filenamePk" placeholder="Specify a filename..." />
   <button id="downloadPk">Download file</button>
</div>
<script type="text/javascript">
function downloadFilePk(filename, content) {
   const elementPk = document.createElement('a');
   const blobPk = new Blob([content], { type: 'plain/text' });
   const fileUrlPk = URL.createObjectURL(blobPk);
   elementPk.setAttribute('href', fileUrlPk);
   elementPk.setAttribute('download', filename);
   elementPk.style.display = 'none';
   document.body.appendChild(elementPk);
   elementPk.click();
   document.body.removeChild(elementPk);
};
window.onload = () => {
   document.getElementById('downloadPk').
   addEventListener('click', e => {
      const filenamePk = document.getElementById('filenamePk').value;
      const contentPk = document.getElementById('textPk').value;
      if (filenamePk && contentPk) {
         downloadFilePk(filenamePk, contentPk);
      }
   });
};
</script>
</body>
</html>