Scribd
Upload
5 views3 pages

Lab 2

Uploaded by

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

Lab 2

Uploaded by

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

Date: Title

Exp. No: 02 JQUERY

AIM OF THE EXPERIMENT:

1. On click of a button, welcome message should display.


2. There are three input textboxes. On click of the input box , the background colour
should change to yellow. ( Hint : use this )
3. Remove and add different style to the element by using JQuery. Create two style
properties and by default apply first one to one element. On click of a button change
the elements associated property to other style.
4. Toggle the style properties of the element on click
5. Create one button and a textbox. On click of the button the text written in text box
should display on the button.

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Elements</title>
<style>
/* Default style */
.styled-element {
color: blue;
font-size: 16px;
}
/* Alternate style */
.alternate-style {
color: red;
font-size: 20px;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<!-- Requirement 1: Welcome Message -->


<button onclick="displayWelcome()">Show Welcome Message</button>
<!-- Requirement 2: Change Background Color on Click -->
<input type="text" id="colorChangeInput" onclick="changeBackgroundColor()"
placeholder="Click me">

<!-- Requirement 3 and 4: Toggle Style Properties -->


<div id="styledElement" class="styled-element"
onclick="toggleStyleProperties()">Click me to toggle style</div>
<button onclick="changeStyle()">Change Style</button>

<!-- Requirement 5: Display Text from TextBox on Button -->


<input type="text" id="textBox" placeholder="Type something">
<button onclick="displayTextOnButton()">Display Text on Button</button>

<script>
// Requirement 1
function displayWelcome() {
alert('Welcome to the page!');
}

// Requirement 2
function changeBackgroundColor() {
document.getElementById('colorChangeInput').style.backgroundColor =
'yellow';
}

// Requirement 3 and 4
function toggleStyleProperties() {
$('#styledElement').toggleClass('alternate-style');
}

function changeStyle() {
$('#styledElement').removeClass('styled-element').addClass('alternate-
style');
}

// Requirement 5
function displayTextOnButton() {
var text = $('#textBox').val();
$('button').text(text);
}
</script>

</body>
</html>
OUTPUT SCREENSHOT:

You might also like