Custom Design Creator
#container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
#text-input {
width: 40%;
text-align: center;
}
#text-area {
width: 80%;
height: 50%;
margin: 0 auto;
font-size: 16px;
resize: none;
}
#text-options {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
select, input[type="file"] {
width: 30%;
}
#background-options {
width: 80%;
margin: 20px auto;
display: flex;
justify-content: space-between;
}
#alignment-options {
width: 80%;
margin: 20px auto;
display: flex;
justify-content: space-between;
}
button {
width: 30%;
}
#preview {
width: 50%;
height: 50%;
position: relative;
}
#text-preview {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
user-select: none;
}
#background-preview {
width: 100%;
height: 100%;
background-color: #ffffff;
background-size: cover;
}
const textArea = document.getElementById("text-area");
const fontSelect = document.getElementById("font-select");
const colorSelect = document.getElementById("color-select");
const sizeSelect = document.getElementById("size-select");
const fontFile = document.getElementById("font-file");
const backgroundColorSelect = document.getElementById("background-color-select");
const backgroundFile = document.getElementById("background-file");
const alignLeft = document.getElementById("align-left");
const alignCenter = document.getElementById("align-center");
const alignRight = document.getElementById("align-right");
const textPreview = document.getElementById("text-preview");
const backgroundPreview = document.getElementById("background-preview");
textArea.addEventListener("input", updatePreview);
fontSelect.addEventListener("change", updatePreview);
colorSelect.addEventListener("change", updatePreview);
sizeSelect.addEventListener("change", updatePreview);
fontFile.addEventListener("change", updatePreview);
backgroundColorSelect.addEventListener("change", updatePreview);
backgroundFile.addEventListener("change", updatePreview);
alignLeft.addEventListener("click", updatePreview);
alignCenter.addEventListener("click", updatePreview);
alignRight.addEventListener("click", updatePreview);
function updatePreview() {
textPreview.innerText = textArea.value;
textPreview.style.fontFamily = fontSelect.value;
textPreview.style.color = colorSelect.value;
textPreview.style.fontSize = sizeSelect.value + "px";
if (fontFile.files.length) {
const font = new FontFace(fontSelect.value, `url(${URL.createObjectURL(fontFile.files[0])})`);
font.load().then(function(loadedFont) {
document.fonts.add(loadedFont);
textPreview.style.fontFamily = fontSelect.value;
});
}
backgroundPreview.style.backgroundColor = backgroundColorSelect.value;
if (backgroundFile.files.length) {
backgroundPreview.style.backgroundImage = `url(${URL.createObjectURL(backgroundFile.files[0])})`;
} else {
backgroundPreview.style.backgroundImage = "";
}
if (alignLeft.classList.contains("active")) {
textPreview.style.textAlign = "left";
} else if (alignCenter.classList.contains("active")) {
textPreview.style.textAlign = "center";
} else if (alignRight.classList.contains("active")) {
textPreview.style.textAlign = "right";
}
alignLeft.classList.remove("active");
alignCenter.classList.remove("active");
alignRight.classList.remove("active");
if (event.target === alignLeft) {
alignLeft.classList.add("active");
} else if (event.target === alignCenter) {
alignCenter.classList.add("active");
} else if (event.target === alignRight) {
alignRight
.classList.add("active");
}
}
