Text Styling App
Text Styling App
This is a Heading
This is a paragraph. Edit the styles using the controls above.
Text Styling App Code :
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Text Styling App</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.controls {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.controls label {
margin-bottom: 5px;
}
.controls input, .controls select {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.text-area {
text-align: center;
}
h1 {
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class=”container”>
<h1>Text Styling App</h1>
<div class=”controls”>
<label for=”fontFamily”>Font Family:</label>
<select id=”fontFamily”>
<option value=”Arial”>Arial</option>
<option value=”Helvetica”>Helvetica</option>
<option value=”Times New Roman”>Times New Roman</option>
<option value=”Courier New”>Courier New</option>
<option value=”Georgia”>Georgia</option>
<option value=”Verdana”>Verdana</option>
<option value=”Tahoma”>Tahoma</option>
<option value=”Impact”>Impact</option>
<option value=”Comic Sans MS”>Comic Sans MS</option>
<option value=”Trebuchet MS”>Trebuchet MS</option>
<option value=”Arial Black”>Arial Black</option>
<option value=”Lucida Sans Unicode”>Lucida Sans Unicode</option>
<option value=”Geneva”>Geneva</option>
<option value=”Palatino Linotype”>Palatino Linotype</option>
<option value=”Book Antiqua”>Book Antiqua</option>
<option value=”Symbol”>Symbol</option>
<option value=”Webdings”>Webdings</option>
<option value=”Wingdings”>Wingdings</option>
<option value=”MS Sans Serif”>MS Sans Serif</option>
<option value=”MS Serif”>MS Serif</option>
<option value=”Franklin Gothic Medium”>Franklin Gothic Medium</option>
<option value=”Century Gothic”>Century Gothic</option>
<option value=”Copperplate Gothic Light”>Copperplate Gothic Light</option>
<option value=”Papyrus”>Papyrus</option>
<option value=”Brush Script MT”>Brush Script MT</option>
<option value=”Garamond”>Garamond</option>
<option value=”Baskerville”>Baskerville</option>
<option value=”Didot”>Didot</option>
<option value=”Futura”>Futura</option>
<option value=”Rockwell”>Rockwell</option>
<option value=”Calibri”>Calibri</option>
<option value=”Cambria”>Cambria</option>
<option value=”Candara”>Candara</option>
<option value=”Consolas”>Consolas</option>
<option value=”Constantia”>Constantia</option>
<option value=”Corbel”>Corbel</option>
<option value=”Myriad Pro”>Myriad Pro</option>
<option value=”Optima”>Optima</option>
<option value=”Avant Garde”>Avant Garde</option>
<option value=”Bodoni MT”>Bodoni MT</option>
<option value=”Edwardian Script ITC”>Edwardian Script ITC</option>
<option value=”Andale Mono”>Andale Mono</option>
<option value=”Monaco”>Monaco</option>
<option value=”Kristen ITC”>Kristen ITC</option>
<option value=”Bauhaus 93″>Bauhaus 93</option>
<option value=”Algerian”>Algerian</option>
<option value=”Perpetua”>Perpetua</option>
<option value=”Agency FB”>Agency FB</option>
<option value=”Segoe UI”>Segoe UI</option>
</select>
<label for=”fontSize”>Font Size:</label>
<input type=”number” id=”fontSize” value=”24″>
<label for=”fontColor”>Font Color:</label>
<input type=”color” id=”fontColor” value=”#000000″>
<label for=”textAlign”>Text Align:</label>
<select id=”textAlign”>
<option value=”left”>Left</option>
<option value=”center”>Center</option>
<option value=”right”>Right</option>
<option value=”justify”>Justify</option>
</select>
<label for=”fontShadow”>Font Shadow:</label>
<select id=”fontShadow”>
<option value=”none”>None</option>
<option value=”2px 2px 4px rgba(0,0,0,0.5)”>Small Shadow</option>
<option value=”4px 4px 8px rgba(0,0,0,0.5)”>Medium Shadow</option>
<option value=”6px 6px 12px rgba(0,0,0,0.5)”>Large Shadow</option>
<option value=”-2px -2px 4px rgba(0,0,0,0.5)”>Inverse Small Shadow</option>
</select>
</div>
<div class=”text-area”>
<h1 id=”styledHeading”>This is a Heading</h1>
<p id=”styledParagraph”>This is a paragraph. Edit the styles using the controls above.</p>
</div>
<button id=”applyStyles”>Apply Styles</button>
</div>
<script>
document.getElementById(‘applyStyles’).addEventListener(‘click’, function() {
const fontFamily = document.getElementById(‘fontFamily’).value;
const fontSize = document.getElementById(‘fontSize’).value + ‘px’;
const fontColor = document.getElementById(‘fontColor’).value;
const textAlign = document.getElementById(‘textAlign’).value;
const fontShadow = document.getElementById(‘fontShadow’).value;
const heading = document.getElementById(‘styledHeading’);
const paragraph = document.getElementById(‘styledParagraph’);
heading.style.fontFamily = fontFamily;
heading.style.fontSize = fontSize;
heading.style.color = fontColor;
heading.style.textAlign = textAlign;
heading.style.textShadow = fontShadow;
paragraph.style.fontFamily = fontFamily;
paragraph.style.fontSize = fontSize;
paragraph.style.color = fontColor;
paragraph.style.textAlign = textAlign;
paragraph.style.textShadow = fontShadow;
});
</script>
</body>
</html>