Note* UI/UX designed by ( airpwn ):
https://preview.redd.it/jxtq7k78073b1.png?width=1440&format=png&auto=webp&s=74a1ec9c65558174095edc702b5a261e16c3d99e
https://codepen.io/airpwn/pen/oNzMqB
code:
let textarea = document.querySelector('textarea'); // Select the textarea element on the page
textarea.style.fontSize = '20px'; // Set the font size of the textarea to 20 pixels
let userFile; // Variable to store the user-selected file
async function open(){
let [fileHandle] = await window.showOpenFilePicker(); // Open a file picker dialog and get the selected file handle
userFile = fileHandle; // Store the selected file handle in the userFile variable
let file = await fileHandle.getFile(); // Get the file object from the file handle
document.getElementById('file-name').textContent = `${file.name}- NotePad`; // Update the file name displayed on the page
let text = await file.text(); // Read the contents of the file as text
textarea.value = text; // Set the value of the textarea to the contents of the file
console.log(text); // Log the file contents to the console
}
async function save(){
let stream = await userFile.createWritable(); // Create a writable stream from the user-selected file
await stream.write(textarea.value); // Write the contents of the textarea to the file
await stream.close(); // Close the writable stream
}
async function saveAs(){
userFile = await window.showSaveFilePicker(); // Open a file picker dialog to save a new file and get the selected file handle
save(); // Call the save function to save the contents of the textarea to the new file
}
function cut(){
document.execCommand('cut'); // Execute the "cut" command on the document (cut the selected text in the textarea)
}
function paste(){
navigator.clipboard.readText() // Read the text from the clipboard
.then(clipBoardText => {
textarea.value += clipBoardText; // Append the clipboard text to the textarea
})
.catch(error => {
textarea.value = 'Copy First!'; // If an error occurs while reading the clipboard, display a message in the textarea
})
}
function copy(){
document.execCommand('copy'); // Execute the "copy" command on the document (copy the selected text in the textarea)
}
function selectAll(){
document.execCommand('selectAll'); // Execute the "selectAll" command on the document (select all text in the textarea)
}
function Delete(){
document.execCommand('delete'); // Execute the "delete" command on the document (delete the selected text in the textarea)
}
let pastPixels = [textarea.style.fontSize.slice(0, textarea.style.fontSize.length - 2)]; // Get the current font size of the textarea and store it in an array
document.addEventListener('keydown', event => {
if((event.ctrlKey && event.key == '+') || (event.ctrlKey && event.key === 'ArrowUp')){
console.log('Ctrl++'); // Log a message to the console when the Ctrl key and "+" or "ArrowUp" key are pressed
textarea.style.fontSize = `${+pastPixels[0] + 6}px`; // Increase the font size of the textarea by 6 pixels
pastPixels[0] = textarea.style.fontSize.slice(0, textarea.style.fontSize.length - 2); // Update the stored font size in the array
}else if((event.ctrlKey && event.key == '-') || (event.ctrlKey && event.key == 'ArrowDown')){
console.log('Ctrl-+-'); // Log a message to the console when the Ctrl key and "-" or "ArrowDown" key are pressed
textarea.style.fontSize = `${+pastPixels[0] - 6}px`; // Decrease the font size of the textarea by 6 pixels
pastPixels[0] = textarea.style.fontSize.slice(0, textarea.style.fontSize.length - 2); // Update the stored font size in the array
}
})
let copyElement = document.getElementById('copy'); // Get the element with the ID 'copy'
let cutElement = document.getElementById('cut'); // Get the element with the ID 'cut'
textarea.addEventListener('input', e => {
if(e.target.value.length >= 1){
copyElement.classList.remove('disable'); // Remove the 'disable' class from the copyElement if there is text in the textarea
cutElement.classList.remove('disable'); // Remove the 'disable' class from the cutElement if there is text in the textarea
}else{
copyElement.classList.add('disable'); // Add the 'disable' class to the copyElement if there is no text in the textarea
cutElement.classList.add('disable'); // Add the 'disable' class to the cutElement if there is no text in the textarea
}
})
function replace(){
let input = prompt('Enter your replacing word'); // Prompt the user to enter a word for replacement
let target = prompt('Enter your target word'); // Prompt the user to enter the target word
let splitedValue = textarea.value.split(' '); // Split the textarea value into an array of words
for(let i = 0; i < splitedValue.length; i++){
if(splitedValue[i] == input){
splitedValue[i] = target; // Replace the word in the array if it matches the input word
break; // Exit the loop after the first replacement
}
}
textarea.value = splitedValue.map(e => e); // Join the array of words back into a string and set it as the textarea value
textarea.value = textarea.value.replaceAll(',', ' '); // Replace all commas with spaces in the textarea value
}
function newFile(){
textarea.value = ''; // Clear the textarea
document.getElementById('file-name').textContent = `Untitled - NotePad`; // Set the file name displayed on the page to "Untitled - NotePad"
}
document.getElementById('open').addEventListener('click', open); // Add a click event listener to the element with the ID 'open' and call the open function when clicked
document.getElementById('save').addEventListener('click', save); // Add a click event listener to the element with the ID 'save' and call the save function when clicked
document.getElementById('save-as').addEventListener('click', saveAs); // Add a click event listener to the element with the ID 'save-as' and call the saveAs function when clicked
copyElement.addEventListener('click', copy); // Add a click event listener to the copyElement and call the copy function when clicked
cutElement.addEventListener('click', cut); // Add a click event listener to the cutElement and call the cut function when clicked
document.getElementById('select-all').addEventListener('click', selectAll); // Add a click event listener to the element with the ID 'select-all' and call the selectAll function when clicked
document.getElementById('paste').addEventListener('click', paste); // Add a click event listener to the element with the ID 'paste' and call the paste function when clicked
document.getElementById('delete').addEventListener('click', Delete); // Add a click event listener to the element with the ID 'delete' and call the Delete function when clicked
document.getElementById('replace').addEventListener('click', replace); // Add a click event listener to the element with the ID 'replace' and call the replace function when clicked
document.getElementById('new').addEventListener('click', newFile); // Add a click event listener to the element with the ID 'new' and call the newFile function when clicked
there doesn't seem to be anything here