Scribd
Upload
2 views9 pages

Activity

The document is an HTML file for a 'Dynamic Paragraph Styler' web application that allows users to customize a sample paragraph's text color, font size, and background color. It includes a user interface with dropdown menus for selecting styles and a button to apply changes, which are reflected in real-time on the sample paragraph. The document also contains CSS for styling the layout and JavaScript for handling user interactions and applying the selected styles.

Uploaded by

palsubrata2911
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views9 pages

Activity

The document is an HTML file for a 'Dynamic Paragraph Styler' web application that allows users to customize a sample paragraph's text color, font size, and background color. It includes a user interface with dropdown menus for selecting styles and a button to apply changes, which are reflected in real-time on the sample paragraph. The document also contains CSS for styling the layout and JavaScript for handling user interactions and applying the selected styles.

Uploaded by

palsubrata2911
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Paragraph Styler</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: centre;
min-height: 100vh;
margin: 0;
background-colour: #9190e9;
}

.container {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
max-width: 400px;
}

.card {
background-colour: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
color: white;
}

.title-icon {
width: 30px;
height: 30px;
background-color: #FFD700;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

h2 {
text-align: center;
color: #666;
margin-top: 0;
margin-bottom: 20px;
font-size: 18px;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
color: #666;
}

select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
color: #333;
}

select[data-type="text-color"] {
background-color: #f8f0ff;
}

select[data-type="font-size"] {
background-color: #eaf5ff;
}

select[data-type="bg-color"] {
background-color: #fff0f3;
}

button {
width: 100%;
padding: 12px;
background-color: #5b68e3;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 10px;
}

button:hover {
background-color: #4a56c7;
}
.sparkle {
display: inline-block;
font-size: 18px;
animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.sample-paragraph {
padding: 15px;
text-align: center;
}

#preview-text {
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div class="container">
<div class="title">
<div class="title-icon">✨</div>
Dynamic Paragraph Styler
</div>

<div class="card">
<h2>Customize Your Paragraph</h2>

<div class="form-group">
<label for="text-color">Text Color:</label>
<select id="text-color" data-type="text-color">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="purple">Purple</option>
</select>
</div>

<div class="form-group">
<label for="font-size">Font Size:</label>
<select id="font-size" data-type="font-size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">Extra Large</option>
</select>
</div>

<div class="form-group">
<label for="bg-color">Background Color:</label>
<select id="bg-color" data-type="bg-color">
<option value="white">White</option>
<option value="lightgray">Light Gray</option>
<option value="lightyellow">Light Yellow</option>
<option value="lightblue">Light Blue</option>
<option value="lightpink">Light Pink</option>
</select>
</div>

<button id="apply-btn">
<span class="sparkle">✨</span> Apply Styles
</button>
</div>

<div class="card sample-paragraph">


<p id="preview-text">This is a sample paragraph. Change my
style!</p>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const textColorSelect = document.getElementById('text-color');
const fontSizeSelect = document.getElementById('font-size');
const bgColorSelect = document.getElementById('bg-color');
const applyBtn = document.getElementById('apply-btn');
const previewText = document.getElementById('preview-text');

const fontSizeMap = {
'small': '14px',
'medium': '18px',
'large': '22px',
'x-large': '26px'
};

applyBtn.addEventListener('click', function() {
const textColor = textColorSelect.value;
const fontSize = fontSizeMap[fontSizeSelect.value];
const bgColor = bgColorSelect.value;

previewText.style.color = textColor;
previewText.style.fontSize = fontSize;
previewText.style.backgroundColor = bgColor;

previewText.style.transform = 'scale(1.05)';
setTimeout(() => {
previewText.style.transform = 'scale(1)';
}, 300);
});
});
</script>
</body>
</html>

You might also like