<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project-4</title>
<style>
.container {
height: 480px;
border: 1px solid black;
padding: 0 15px 0 15px;
}
.b {
display: flex;
width: 150px;
text-align: center;
}
.do {
width: 100%;
}
.s {
width: 15%;
}
.s1 {
width: 8%;
height: 80px;
}
.space {
display: flex;
}
.content {
width: 800px;
height: 300px;
border: 1px solid black;
position: relative;
}
.content textarea {
position: absolute;
margin: 0;
text-align: center;
cursor: move;
width: 70px;
resize: none;
overflow: hidden;
max-width: 92%;
height: 15px;
min-height: 15px;
max-height: 92%;
background: transparent;
}
textarea {
min-height: 2px;
}
.right {
margin-left: 20px;
}
.text {
font-size: 17px;
height: 18px;
}
.family {
width: 90%;
height: 25px;
}
.line {
display: flex;
}
.line label {
width: 50%;
}
.line .r {
width: 50%;
height: 20px;
}
.line .r1 {
width: 50%;
}
.bottom {
height: 30px;
}
.bottom button {
padding: 0 15px;
height: 100%;
border: 1px solid;
text-align: center;
border-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: white;
background: linear-gradient(120deg, rgb(75, 75, 240), rgb(209, 133, 133));
}
.contents {
width: 100%;
white-space: nowrap;
}
.line1{
margin-top: 10px;
}
.line2{
margin-top: 10px;
}
.r3{
width: 50px;
}
@media (max-width:600px) {
.container {
height: 650px;
}
.content {
width: 100%;
}
.right {
margin-top: 25px;
}
.space {
display: block;
}
.bottom button {
margin-top: -50px;
}
.r3{
width: 40px;
}
}
@media (max-width:750px){
.bottom{
width:150px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="b">
<p id="undo" class="do"><button id="undo"><b>↶</b> Undo</button></p>
<p id="redo" class="do"><button id="redo"><b>↷</b> Redo</button></p>
</div>
<div class="space">
<div class="s"></div>
<div class="content">
<div class="contents" id="content">
<!-- <textarea placeholder="Add text" id="draggableTextarea"></textarea> -->
</div>
</div>
<div class="right">
<label class="text">Font</label><br>
<select class="family" id="fontFamilySelect">
<option value="Arial">Arial</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Harlow Solid Italic">Harlow Solid Italic</option>
<option value="forte">forte</option>
<option value="Lucida Calligraphy">Lucida Calligraphy</option>
</select><br><br>
<div class="line">
<label class="text">Size</label>
<label class="text">Color</label>
</div>
<div class="line">
<input class="r" id="fontSizeInput" type="number">
<input class="r1" id="colorInput" type="color">
</div>
<div class="line1">
<label class="text">Height </label>
<input type="number" id="height" class="r3">
<label class="text">Width </label>
<input type="number" id="width" class="r3">
</div>
<div class="line2">
<label class="text">Remove Border</label>
<input class="r2" id="removeBorderCheckbox" type="checkbox">
</div>
<div class="s1"></div>
<div class="bottom">
<button id="addtextbox">Add Text Box</button>
</div>
</div>
<div class="s1"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const contentDiv = document.querySelector('.content');
const addTextBoxBtn = document.getElementById('addtextbox');
const colorInput = document.getElementById('colorInput');
const fontSizeInput = document.getElementById('fontSizeInput');
const removeBorderCheckbox = document.getElementById('removeBorderCheckbox');
const fontFamilySelect = document.getElementById('fontFamilySelect');
const heightInput = document.getElementById('height');
const widthInput = document.getElementById('width');
const undoBtn = document.getElementById('undo');
const redoBtn = document.getElementById('redo');
let selectedTextarea = null;
let history = [];
let redoStack = [];
let offsetX = 10;
let offsetY = 10;
const margin = 70;
function makeDraggable(textarea) {
let isDragging = false;
let startX, startY, offsetX, offsetY;
textarea.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
offsetX = e.clientX - textarea.getBoundingClientRect().left;
offsetY = e.clientY - textarea.getBoundingClientRect().top;
textarea.style.zIndex = 1000;
selectedTextarea = textarea;
heightInput.value = parseInt(textarea.style.height);
widthInput.value = parseInt(textarea.style.width);
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const rect = contentDiv.getBoundingClientRect();
let x = e.clientX - offsetX - rect.left;
let y = e.clientY - offsetY - rect.top;
x = Math.max(0, Math.min(contentDiv.clientWidth - textarea.offsetWidth, x));
y = Math.max(0, Math.min(contentDiv.clientHeight - textarea.offsetHeight, y));
textarea.style.left = `${x}px`;
textarea.style.top = `${y}px`;
}
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
textarea.style.zIndex = '';
saveState();
}
});
textarea.addEventListener('input', () => {
textarea.style.height = `${textarea.scrollHeight}px`;
textarea.style.width = 'auto';
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
tempSpan.style.whiteSpace = 'pre';
tempSpan.style.font = getComputedStyle(textarea).font;
tempSpan.innerText = textarea.value || textarea.placeholder;
document.body.appendChild(tempSpan);
textarea.style.width = `${tempSpan.offsetWidth + 10}px`;
document.body.removeChild(tempSpan);
saveState();
});
}
function saveState() {
const state = Array.from(contentDiv.querySelectorAll('textarea')).map(textarea => ({
value: textarea.value,
style: {
color: textarea.style.color,
fontSize: textarea.style.fontSize,
fontFamily: textarea.style.fontFamily,
height: textarea.style.height,
width: textarea.style.width,
border: textarea.style.border,
left: textarea.style.left,
top: textarea.style.top
}
}));
history.push(state);
redoStack = [];
}
function restoreState(state) {
contentDiv.innerHTML = '';
state.forEach(textareaState => {
const newTextarea = document.createElement('textarea');
newTextarea.value = textareaState.value;
Object.assign(newTextarea.style, textareaState.style);
newTextarea.style.position = 'absolute';
contentDiv.appendChild(newTextarea);
makeDraggable(newTextarea);
});
}
function addNewTextBox() {
const newTextarea = document.createElement('textarea');
newTextarea.placeholder = 'Add text';
newTextarea.className = 'draggableTextarea';
newTextarea.style.position = 'absolute';
newTextarea.style.top = `${offsetY}px`;
newTextarea.style.left = `${offsetX}px`;
contentDiv.appendChild(newTextarea);
makeDraggable(newTextarea);
offsetX = offsetX + margin - 50;
offsetY += margin - 45;
saveState();
}
function undo() {
if (history.length > 0) {
const currentState = history.pop();
redoStack.push(currentState);
restoreState(currentState);
}
}
function redo() {
if (redoStack.length > 0) {
const redoState = redoStack.pop();
history.push(redoState);
restoreState(redoState);
}
}
addTextBoxBtn.addEventListener('click', addNewTextBox);
undoBtn.addEventListener('click', undo);
redoBtn.addEventListener('click', redo);
const initialTextareas = document.querySelectorAll('.draggableTextarea');
initialTextareas.forEach(makeDraggable);
colorInput.addEventListener('input', () => {
if (selectedTextarea) {
selectedTextarea.style.color = colorInput.value;
}
});
fontSizeInput.addEventListener('input', () => {
if (selectedTextarea) {
selectedTextarea.style.fontSize = `${fontSizeInput.value}px`;
}
});
removeBorderCheckbox.addEventListener('change', () => {
if (selectedTextarea) {
selectedTextarea.style.border = removeBorderCheckbox.checked ? 'none' : '1px solid black';
}
});
fontFamilySelect.addEventListener('change', () => {
if (selectedTextarea) {
selectedTextarea.style.fontFamily = fontFamilySelect.value;
}
});
heightInput.addEventListener('input', function() {
let value = parseInt(this.value);
if (value > 999) {
this.value = 999;
value = 999;
}
if (selectedTextarea) {
selectedTextarea.style.height = `${value}px`;
}
});
widthInput.addEventListener('input', function() {
let value = parseInt(this.value);
if (value > 999) {
this.value = 999;
value = 999;
}
if (selectedTextarea) {
selectedTextarea.style.width = `${value}px`;
}
});
});
</script>
</body>
</html>
Can I use it Partially?
I won't if you say no.