}
}
Responsive Text Editor
/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #FF6B6B, #556270);
color: white;
text-align: center;
padding: 20px;
}
.editor-container {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
max-width: 700px;
margin: auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
h2 {
margin-bottom: 10px;
}
.toolbar {
background: rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.toolbar button, .toolbar input, .toolbar select {
padding: 8px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.toolbar button {
background: white;
color: black;
}
.toolbar input {
width: 40px;
height: 30px;
border: none;
cursor: pointer;
}
.toolbar select {
background: white;
color: black;
}
.toolbar button:hover {
background: #FF6B6B;
color: white;
}
.text-area {
min-height: 200px;
background: white;
color: black;
padding: 15px;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #ccc;
overflow-y: auto;
text-align: left;
}
@media (max-width: 600px) {
.toolbar {
flex-direction: column;
}
.toolbar button {
width: 100%;
}
}
// Function to format text (bold, italic, underline, etc.)
function formatText(command) {
document.execCommand(command, false, null);
}
// Function to change font color
function changeColor(color) {
document.execCommand("foreColor", false, color);
}
// Function to change font size
function changeFontSize(size) {
document.execCommand("fontSize", false, size);
}
// Function to undo last action
function undo() {
document.execCommand("undo", false, null);
}
// Function to redo last undone action
function redo() {
document.execCommand("redo", false, null);
}
// Function to clear the text area
function clearText() {
document.getElementById("editor").innerHTML = "";
}
// Function to download text as .txt file
function downloadText() {
let text = document.getElementById("editor").innerText;
let blob = new Blob([text], { type: "text/plain" });
let anchor = document.createElement("a");
anchor.href = URL.createObjectURL(blob);
anchor.download = "text-editor-content.txt";
anchor.click();
}
}
}
No comments:
Post a Comment