Fancy Font Generator
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Container */
.container {
background: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
width: 100%;
max-width: 600px;
text-align: center;
}
/* Heading */
h1 {
color: #333;
margin-bottom: 20px;
font-size: 2rem;
text-align: center;
}
/* Input Area */
.input-area textarea {
width: 100%;
height: 150px;
padding: 10px;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
/* Controls Area */
.controls {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.controls label {
margin-bottom: 10px;
font-size: 1rem;
color: #555;
}
.controls select,
.controls input {
margin-bottom: 20px;
padding: 8px;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
width: 80%;
}
/* Output Area */
.output-area {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
.output-area h2 {
margin-bottom: 10px;
font-size: 1.5rem;
}
#outputText {
font-size: 1.2rem;
font-weight: 500;
color: #333;
}
/* Media Query for Small Devices */
@media (max-width: 600px) {
.container {
padding: 15px;
}
.controls select,
.controls input {
width: 100%;
}
}
// Getting references to HTML elements
const inputText = document.getElementById("inputText");
const outputText = document.getElementById("outputText");
const fontStyleSelect = document.getElementById("fontStyle");
const textColorInput = document.getElementById("textColor");
const textSizeInput = document.getElementById("textSize");
// Function to update the output text based on user input
function updateOutput() {
const fontStyle = fontStyleSelect.value;
const textColor = textColorInput.value;
const textSize = textSizeInput.value + "px";
// Set the font family, color, and size
outputText.style.fontFamily = fontStyle;
outputText.style.color = textColor;
outputText.style.fontSize = textSize;
// Set the content of the output text
outputText.textContent = inputText.value || "Your fancy text will appear here...";
}
// Event listeners for input changes
inputText.addEventListener("input", updateOutput);
fontStyleSelect.addEventListener("change", updateOutput);
textColorInput.addEventListener("input", updateOutput);
textSizeInput.addEventListener("input", updateOutput);
// Initialize the output on page load
window.addEventListener("load", updateOutput);
