Send/Recieve Files Online (Recieve Files by Enter 6 Digit Code) 👉

X
Code copied to clipboard!

POMSD

Advertisement

Create a Simple Notepad || Blogger || Blog

June 07, 2023
Image
Full CODE 
    
 <div class="container">
  <div class="notepad">
    <h1>  <p contenteditable="true">My Notepad</p> </h1>
 <textarea id="textArea" placeholder="Write your notes here"></textarea>
    <button id="downloadBtn">Download</button>
  </div>
</div>


<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.notepad {
  width: 400px;
  background-color: #f9f9f9;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  
}

h1 {
  margin-top: 0;
}

textarea {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
  padding: 5px;
  background: #fff;
  color: #000;
  border-radius: 13px 13px 13px 13px; -moz-border-radius: 13px 13px 13px 13px; border-radius: 13px 13px 13px 13px;
  border: 2px dashed #1C6EA4;
}

button {
  background: linear-gradient(to right, #2c12f3, #ff0000);
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

button:hover {
  background: linear-gradient(to right, #ff0000, #070ff2);
  
}
</style>
<script>
var downloadBtn = document.getElementById('downloadBtn');
var textArea = document.getElementById('textArea');

downloadBtn.addEventListener('click', function() {
  var text = textArea.value;
  var filename = 'pomsd.txt';
  var blob = new Blob([text], { type: 'text/plain' });

  // Create a temporary link element
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = filename;

  // Simulate a click to trigger the download
  link.click();

  // Clean up the temporary link
  /*-- https://priyanshuomsd.blogspot.com --*/
  link.remove();
});

</script>
Add Css Shadow
Share on

Contact Us!

Comment Box

0 Comments

type your comment...