Start typing here...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.toolbar {
display: flex;
justify-content: flex-start;
gap: 10px;
margin: 10px;
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
}
.toolbar button,
.toolbar select,
.toolbar input {
padding: 5px;
font-size: 14px;
}
.editor {
width: 100%;
height: 400px;
margin: 20px;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
background-color: white;
font-size: 16px;
font-family: Arial, sans-serif;
overflow-y: auto;
}
// Format Text (Bold, Italic, Underline, Strike-through)
function formatText(command) {
document.execCommand(command, false, null);
}
// Align Text (Left, Center, Right)
function alignText(alignment) {
document.execCommand('justify' + alignment, false, null);
}
// Change Font Family
function changeFont(selectElement) {
document.execCommand('fontName', false, selectElement.value);
}
// Change Font Size
function changeFontSize(inputElement) {
document.execCommand('fontSize', false, inputElement.value);
}
// Change Font Color
function changeFontColor(inputElement) {
document.execCommand('foreColor', false, inputElement.value);
}
// Change Background Color
function changeBackgroundColor(inputElement) {
document.execCommand('backColor', false, inputElement.value);
}
// Download the content as a .txt file
function downloadTxt() {
const text = document.querySelector('.editor').innerText;
const blob = new Blob([text], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'document.txt';
link.click();
}
