Scribd
Upload
4 views5 pages

SCSD

The document is an HTML page for a 'Dynamic Paragraph Styler' application, featuring a form that allows users to customize the text color, font size, and background color of a sample paragraph. It includes a styled layout with a gradient background and a container for the form elements. The JavaScript function 'applyStyles' updates the paragraph's styles based on user selections from dropdown menus.

Uploaded by

jashandeep20555
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
4 views5 pages

SCSD

The document is an HTML page for a 'Dynamic Paragraph Styler' application, featuring a form that allows users to customize the text color, font size, and background color of a sample paragraph. It includes a styled layout with a gradient background and a container for the form elements. The JavaScript function 'applyStyles' updates the paragraph's styles based on user selections from dropdown menus.

Uploaded by

jashandeep20555
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/ 5

<!

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 {

background: linear-gradient(90deg, #e6ccff, #d9b3ff, #c499ff);

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

min-height: 100vh;

margin: 0;

font-family: Arial, sans-serif;

.header {

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 1rem;

font-size: 1.5rem;

font-weight: bold;

color: #4a5568;

.header::before {

content: '\1F3A8'; /* Painting palette emoji */

margin-right: 0.5rem;

.container {
background-color: #f0f0f5;

padding: 2rem;

border-radius: 0.5rem;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

width: 24rem;

text-align: center;

.form-group {

margin-bottom: 1rem;

text-align: left;

.form-group label {

display: block;

color: #4a5568;

margin-bottom: 0.5rem;

.form-group select {

width: 100%;

padding: 0.5rem;

border: 1px solid #e2e8f0;

border-radius: 0.25rem;

.apply-button {

width: 100%;

background-color: #6b46c1;

color: white;

padding: 0.5rem;

border: none;

border-radius: 0.25rem;

cursor: pointer;

}
.sample-paragraph {

margin-top: 1rem;

padding: 1rem;

background-color: #c4b5fd;

color: black;

text-align: center;

border-radius: 0.25rem;

font-weight: bold;

</style>

</head>

<body>

<div class="header">Dynamic Paragraph Styler</div>

<div class="container">

<form id="stylerForm">

<div class="form-group">

<label for="textColor">Text Color:</label>

<select id="textColor">

<option value="yellow">Yellow</option>

<option value="red">Red</option>

<option value="green">Green</option>

<option value="blue">Blue</option>

<option value="purple">Purple</option>

<option value="orange">Orange</option>

<option value="pink">Pink</option>

<option value="cyan">Cyan</option>

</select>

</div>

<div class="form-group">

<label for="fontSize">Font Size:</label>

<select id="fontSize">
<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="bgColor">Background Color:</label>

<select id="bgColor">

<option value="lightblue">Light Blue</option>

<option value="lightgreen">Light Green</option>

<option value="lightcoral">Light Coral</option>

<option value="lightgoldenrodyellow">Light Yellow</option>

</select>

</div>

<button type="button" onclick="applyStyles()" class="apply-button">Apply Styles</button>

</form>

<p id="sampleParagraph" class="sample-paragraph">This is a sample paragraph. Change my


style!</p>

</div>

<script>

function applyStyles() {

const textColor = document.getElementById('textColor').value;

const fontSize = document.getElementById('fontSize').value;

const bgColor = document.getElementById('bgColor').value;

const paragraph = document.getElementById('sampleParagraph');

paragraph.style.color = textColor;

paragraph.style.fontSize = fontSize;

paragraph.style.backgroundColor = bgColor;
}

</script>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy