Scribd
Upload
5 views9 pages

Prac1 4

Uploaded by

snegi2290
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
5 views9 pages

Prac1 4

Uploaded by

snegi2290
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

Practical 1. Write a js program to display welcome message on click button. .

<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<h1 id="welcomeMessage"></h1>
<script>
document.getElementById("welcomeMessage").innerHTML = "Welcome Vishal
Chaurasiya!";
</script>
</body>
</html>

OUTPUT:
Practical 2. Create a code using JavaScript to change the text as well as color and size
also.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text</title>
</head>
<script>
function changetext()
{
var y= document.getElementById("x");
y.innerText="Advance Web Technology";
y.style.color="red";
y.style.fontSize="40px";
}
</script>
<body>
<p id="x">Web Technology</p>
<form>
<input type="button" value="change" onclick="changetext()">
</form>
</body>
</html>
OUTPUT :
Practical 3. Write a javascript program for images slideshow.
<!DOCTYPE html>
<html>
<head>
<title>Image Slideshow</title>
<style>
#slideshow {
width: 500px;
height: 300px;
border: 1px solid black;
}
#slideshow img {
width: 100%;
height: 100%;
display: none;
}
#slideshow img:first-child {
display: block;
}
</style>
</head>
<body>
<div id="slideshow">
<img src="image1.jpeg" alt="Image 1">
<img src="image2.jpeg" alt="Image 2">
<img src="image3.jpeg" alt="Image 3">
<img src="image4.jpeg" alt="Image 4">
</div>
<script>
var images = document.getElementById("slideshow").getElementsByTagName("img");
var currentImage = 0;
function slideshow() {
for (var i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
images[currentImage].style.display = "block";
currentImage = (currentImage + 1) % images.length;
}
setInterval(slideshow, 2000);
</script>
</body>
</html>
OUTPUT:
Practical 4. Write a javascript program for to hide paragraph and add new paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Hide and Add Paragraph</title>
</head>
<body>
<p id="originalParagraph">
"Being good to everyone is a simple yet powerful act that can bring joy and positivity to
those around us. By treating others with kindness, respect, and compassion, we create a ripple
effect of goodness that can spread far and wide. Whether it's a smile, a helping hand, or a
listening ear, every small act of kindness can make a big difference in someone's life. So, let's
strive to be good to everyone we meet, and watch the world become a brighter and more
loving place, one small act at a time."</p>
<button onclick="hideParagraph()">Hide Paragraph</button>
<button onclick="addNewParagraph()">Add New Paragraph</button>
<div id="newParagraphContainer" style="display: none;">
<textarea id="newParagraphText" rows="5" cols="50"></textarea>
<button onclick="saveNewParagraph()">Save</button>
</div>
<script>
function hideParagraph() {
document.getElementById("originalParagraph").style.display = "none";
}
function addNewParagraph() {
document.getElementById("newParagraphContainer").style.display = "block";
}
function saveNewParagraph() {
var newParagraphText = document.getElementById("newParagraphText").value;
var newParagraph = document.createElement("p");
newParagraph.innerHTML = newParagraphText;
document.body.appendChild(newParagraph);
document.getElementById("newParagraphContainer").style.display = "none";
document.getElementById("newParagraphText").value = "";
}
</script>
</body>
</html>
OUTPUT:

You might also like