Scribd
Upload
25 views

Css Pr Answers

Uploaded by

deepalimore9822
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Css Pr Answers

Uploaded by

deepalimore9822
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

1.

JavaScript for Image Rollover Effect

<!DOCTYPE html><html><head>
<title>Image Rollover Effect</title></head><body>
<img id="rolloverImage" src="image1.jpg" alt="Image"
onmouseover="changeImage('image2.jpg')"
onmouseout="changeImage('image1.jpg')"
style="width: 300px; height: 200px;">
<script>
function changeImage(newSrc) {
var img = document.getElementById('rolloverImage');
img.src = newSrc;
}
</script></body></html>

2. Webpage for Slideshow

<!DOCTYPE html><html><head>
<title>Slideshow</title></head><body>
<img id="slideshow" src="image1.jpg" alt="Slideshow" style="width: 400px; height: 300px;">
<button onclick="startSlideshow()">Start</button>
<button onclick="stopSlideshow()">Stop</button>

<script>
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var index = 0;
var interval;

function startSlideshow() {
interval = setInterval(function() {
index = (index + 1) % images.length;
document.getElementById('slideshow').src = images[index];
}, 2000);
}

function stopSlideshow() {
clearInterval(interval);
}
</script></body></html>

3. Display Fruits Array in a Message Box

<!DOCTYPE html><html><head>
<title>Fruits Array</title></head><body>
<button onclick="showFruits()">Show Fruits</button>
<script>
function showFruits() {
var Fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
alert('Fruits: ' + Fruits.join(', '));
}
</script></body></html>

4. Check if a String is a Palindrome

<!DOCTYPE html><html><head>
<title>Palindrome Checker</title></head><body>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="checkPalindrome()">Check Palindrome</button>
<script>
function checkPalindrome() {
var str = document.getElementById('inputString').value;
var reversedStr = str.split('').reverse().join('');
if (str === reversedStr) {
alert('It is a palindrome!');
} else {
alert('Not a palindrome.');
}
}
</script></body></html>

5.Write a function that prompts the user for a color and uses what they
select to set the background color of the new webpage opened
<!DOCTYPE html><html><head>
<title>Change Background Color</title></head><body>
<button onclick="changeBackgroundColor()">Change Background</button>
<script>
function changeBackgroundColor() {
var color = prompt('Enter a color for the background:');
var newWindow = window.open('', '', 'width=400,height=400');
newWindow.document.body.style.backgroundColor = color;
}
</script></body></html>

6.. Generate college Admission form using html form tag

<!DOCTYPE html><html><head>
<title>College Admission Form</title></head><body>
<h1>College Admission Form</h1>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<label for="course">Select Course:</label>
<select id="course" name="course">
<option value="B.Tech">B.Tech</option>
<option value="B.Sc">B.Sc</option>
<option value="B.Com">B.Com</option>
</select><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit">
</form></body></html>

7. Write a Java script that will replace following specified value with
another value in a string. String = “ I will fail” Replace “fail” by “pass”

<!DOCTYPE html><html><head>
<title>Replace String Value</title></head><body>
<button onclick="replaceValue()">Replace Value</button>
<script>
function replaceValue() {
var str = "I will fail";
var newStr = str.replace("fail", "pass");
alert("Original: " + str + "\nUpdated: " + newStr);
}
</script></body></html>

8.Develop a JavaScript Program to Create Rotating Banner Ads with


URL Links.

<!DOCTYPE html><html><head>
<title>Rotating Banner Ads</title></head><body>
<a id="bannerLink" href="#" target="_blank">
<img id="banner" src="ad1.jpg" alt="Banner Ad" style="width: 400px; height: 150px;">
</a>
<script>
var banners = [
{ image: "ad1.jpg", url: "https://www.google.com" },
{ image: "ad2.jpg", url: "https://www.msbte.org" },
{ image: "ad3.jpg", url: "https://www.yahoo.com" }
];
var index = 0;

function rotateBanner() {
index = (index + 1) % banners.length;
document.getElementById("banner").src = banners[index].image;
document.getElementById("bannerLink").href = banners[index].url;
}

setInterval(rotateBanner, 3000);
</script></body></html>

9. Create a slideshow with the group of four images, also simulate the
next and previous transition between slides in your JavaScript

<!DOCTYPE html><html><head>
<title>Slideshow with Navigation</title></head><body>
<img id="slideshow" src="img1.jpg" alt="Slideshow" style="width: 400px; height: 300px;">
<br>
<button onclick="previousSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
<script>
var images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg'];
var index = 0;

function showSlide() {
document.getElementById('slideshow').src = images[index];
}

function nextSlide() {
index = (index + 1) % images.length;
showSlide();
}

function previousSlide() {
index = (index - 1 + images.length) % images.length;
showSlide();
}
</script></body></html>

10. Write a Javascript to create a pull – down menu with three options
[Google, MSBTE, Yahoo] once the user will select one of the options
then user will be redirected to that site.

<!DOCTYPE html><html><head>
<title>Pull-Down Menu Redirect</title></head><body>
<select id="menu" onchange="redirect()">
<option value="">Select an option</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.msbte.org">MSBTE</option>
<option value="https://www.yahoo.com">Yahoo</option>
</select>

<script>
function redirect() {
var url = document.getElementById('menu').value;
if (url) {
window.location.href = url;
}
}
</script></body></html>

11. Write a JavaScript that displays first 20 even numbers on the


document window

<!DOCTYPE html><html><head>
<title>First 20 Even Numbers</title></head><body>
<h3>First 20 Even Numbers:</h3>
<script>
document.write('<ul>');
for (var i = 1; i <= 20; i++) {
document.write('<li>' + (i * 2) + '</li>');
}
document.write('</ul>');
</script></body></html>

12. Create an array with 10 elements. Perform following operations:


1)Add an element to the end of an array. 2)Remove an element from
the beginning of an array. 3)Check if an array contains a specific
element.

<!DOCTYPE html><html><head>
<title>Array Operations</title></head><body>
<button onclick="arrayOperations()">Perform Array Operations</button>
<script>
function arrayOperations() {
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
alert('Original Array: ' + arr.join(', '));

// Add an element to the end


arr.push(11);
alert('After Adding 11 to the End: ' + arr.join(', '));

// Remove an element from the beginning


arr.shift();
alert('After Removing the First Element: ' + arr.join(', '));

// Check if the array contains a specific element


var contains = arr.includes(5);
alert('Does the array contain 5? ' + (contains ? 'Yes' : 'No'));
}
</script></body></html>

13. Write a function that calculates the factorial of a number.

<!DOCTYPE html><html><head>
<title>Factorial Calculator</title></head><body>
<input type="number" id="num" placeholder="Enter a number">
<button onclick="calculateFactorial()">Calculate Factorial</button>
<script>
function calculateFactorial() {
var num = parseInt(document.getElementById('num').value);
if (num < 0) {
alert('Factorial is not defined for negative numbers.');
return;
}
var factorial = 1;
for (var i = 1; i <= num; i++) {
factorial *= i;
}
alert('The factorial of ' + num + ' is ' + factorial);
}
</script></body></html>

14. . Write a function that calculates the factorial of a number (Using


Recursion)

<!DOCTYPE html><html><head>
<title>Factorial Using Recursion</title></head><body>
<input type="number" id="recNum" placeholder="Enter a number">
<button onclick="factorialRec()">Calculate Factorial</button>
<script>
function factorial(num) {
if (num === 0 || num === 1) return 1;
return num * factorial(num - 1);
}

function factorialRec() {
var num = parseInt(document.getElementById('recNum').value);
if (num < 0) {
alert('Factorial is not defined for negative numbers.');
return;
}
alert('The factorial of ' + num + ' is ' + factorial(num));
}
</script></body></html>

15. Write a function that checks if a given number is even or odd.

<!DOCTYPE html><html><head>
<title>Even or Odd Checker</title></head><body>
<input type="number" id="number" placeholder="Enter a number">
<button onclick="checkEvenOdd()">Check Even or Odd</button>
<script>
function checkEvenOdd() {
var num = parseInt(document.getElementById('number').value);
if (num % 2 === 0) {
alert(num + ' is Even');
} else {
alert(num + ' is Odd');
}
}
</script></body></html>

16. Write Javascript to create cookie of user’s name and display it.

<!DOCTYPE html><html><head>
<title>Create and Display Cookie</title></head><body>
<input type="text" id="userName" placeholder="Enter your name">
<button onclick="createCookie()">Create Cookie</button>
<button onclick="displayCookie()">Display Cookie</button>

<script>
function createCookie() {
var name = document.getElementById('userName').value;
if (name) {
document.cookie = "userName=" + name + ";path=/;";
alert('Cookie created!');
} else {
alert('Please enter a name!');
}
}

function displayCookie() {
var cookies = document.cookie.split('; ');
for (var i = 0; i < cookies.length; i++) {
var parts = cookies[i].split('=');
if (parts[0] === 'userName') {
alert('User Name from Cookie: ' + parts[1]);
return;
}
}
alert('No cookie found!');
}
</script></body></html>

17. Write Javascript to Open a new browser window with a specific


URL

<!DOCTYPE html><html><head>
<title>Open New Window</title></head><body>
<button onclick="openNewWindow()">Open Google</button>

<script>
function openNewWindow() {
window.open("https://www.google.com", "_blank", "width=800,height=600");
}
</script></body></html>

18. Write javascript to demonstrate Conversion of a string to


uppercase and lowercase.

<!DOCTYPE html><html><head>
<title>String Case Conversion</title></head><body>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="convertCase()">Convert Case</button>

<script>
function convertCase() {
var str = document.getElementById('inputString').value;
if (str) {
alert("Uppercase: " + str.toUpperCase() + "\nLowercase: " + str.toLowerCase());
} else {
alert('Please enter a string!');
}
}
</script></body></html>

19. Create an object representing a person with properties like name,


age, and address. Display details.

<!DOCTYPE html><html><head>
<title>Person Object</title></head><body>
<button onclick="displayPerson()">Display Person Details</button>

<script>
function displayPerson() {
var person = {
name: "John Doe",
age: 30,
address: "123 Main Street, Cityville"
};
alert("Name: " + person.name + "\nAge: " + person.age + "\nAddress: " + person.address);
}
</script></body></html>

20. Write a function that reverses a string accepted from user.

<!DOCTYPE html><html><head>
<title>Reverse String</title></head><body>
<input type="text" id="stringToReverse" placeholder="Enter a string">
<button onclick="reverseString()">Reverse String</button>

<script>
function reverseString() {
var str = document.getElementById('stringToReverse').value;
if (str) {
var reversed = str.split('').reverse().join('');
alert("Original: " + str + "\nReversed: " + reversed);
} else {
alert('Please enter a string!');
}
}
</script></body></html>

21. Write Javascript to open multiple windows on button click.


<!DOCTYPE html><html><head>
<title>Open Multiple Windows</title></head><body>
<button onclick="openMultipleWindows()">Open Windows</button>

<script>
function openMultipleWindows() {
window.open("https://www.google.com", "_blank", "width=800,height=600");
window.open("https://www.yahoo.com", "_blank", "width=800,height=600");
window.open("https://www.bing.com", "_blank", "width=800,height=600");
}
</script></body></html>

24. Write javascritp to create persistent cookie with name location and
value Nashik.

<!DOCTYPE html><html><head>
<title>Create Persistent Cookie</title></head><body>
<button onclick="createPersistentCookie()">Create Persistent Cookie</button>
<button onclick="displayCookie()">Display Cookie</button>

<script>
function createPersistentCookie() {
var expiryDate = new Date();
expiryDate.setFullYear(expiryDate.getFullYear() + 1); // Set expiration to 1 year from now
document.cookie = "location=Nashik;expires=" + expiryDate.toUTCString() + ";path=/;";
alert("Persistent cookie created!");
}

function displayCookie() {
var cookies = document.cookie.split('; ');
for (var i = 0; i < cookies.length; i++) {
var parts = cookies[i].split('=');
if (parts[0] === 'location') {
alert("Cookie Value: " + parts[1]);
return;
}
}
alert("No cookie found!");
}
</script></body></html>

25. Write javascript to demonstrate following array functions: 1) slice()


2) splice() 3) push() 4) pop()

<!DOCTYPE html><html><head>
<title>Array Functions</title></head><body>
<button onclick="demonstrateArrayFunctions()">Demonstrate Array Functions</button>

<script>
function demonstrateArrayFunctions() {
var arr = [10, 20, 30, 40, 50];
alert("Original Array: " + arr);

// slice
var sliced = arr.slice(1, 4);
alert("Sliced Array (1, 4): " + sliced);

// splice
arr.splice(2, 1, 99, 100);
alert("After Splice (remove 1 at index 2, add 99, 100): " + arr);

// push
arr.push(60);
alert("After Push (add 60): " + arr);

// pop
var popped = arr.pop();
alert("After Pop (remove last): " + arr + "\nPopped Element: " + popped);
}
</script></body></html>

26. Write javascript to demonstrate following String functions: 1)


toUpperCase() 2) toLowerCase()
<!DOCTYPE html><html><head>
<title>String Functions</title></head><body>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="demonstrateStringFunctions()">Demonstrate String Functions</button>

<script>
function demonstrateStringFunctions() {
var str = document.getElementById('inputString').value;
if (str) {
alert("Original String: " + str +
"\nUppercase: " + str.toUpperCase() +
"\nLowercase: " + str.toLowerCase());
} else {
alert("Please enter a string!");
}
}
</script></body></html>

27. Write a program to read arithmetic expression from user, evaluate


it and display the answer using alert box.

<!DOCTYPE html><html><head>
<title>Evaluate Expression</title></head><body>
<input type="text" id="expression" placeholder="Enter arithmetic expression">
<button onclick="evaluateExpression()">Evaluate</button>

<script>
function evaluateExpression() {
try {
var expression = document.getElementById('expression').value;
if (!expression) {
alert("Please enter an expression!");
return;
}
var result = eval(expression);
alert("Result of '" + expression + "': " + result);
} catch (error) {
alert("Invalid expression!");
}
}
</script></body></html>

28. Write a program to ask user whether he wants to change


background colour. If user says yes ask for the colour and change or
else display alert box with message “You decided not to change colour

<!DOCTYPE html><html><head>
<title>Change Background Color</title></head><body>
<button onclick="askToChangeColor()">Change Background Color</button>

<script>
function askToChangeColor() {
var userResponse = confirm("Do you want to change the background color?");
if (userResponse) {
var color = prompt("Enter the color you want:");
if (color) {
document.body.style.backgroundColor = color;
} else {
alert("No color entered. Background color not changed.");
}
} else {
alert("You decided not to change the color.");
}
}
</script></body></html>

29. Write a program to perform all the array operations.

<!DOCTYPE html><html><head>
<title>Array Operations</title></head><body>
<button onclick="performArrayOperations()">Perform Array Operations</button>

<script>
function performArrayOperations() {
var arr = [1, 2, 3, 4, 5];
alert("Original Array: " + arr);

// Add an element at the end


arr.push(6);
alert("After push(6): " + arr);

// Remove an element from the beginning


var removedElement = arr.shift();
alert("After shift(): " + arr + "\nRemoved Element: " + removedElement);

// Add an element at the beginning


arr.unshift(0);
alert("After unshift(0): " + arr);

// Remove an element from the end


var poppedElement = arr.pop();
alert("After pop(): " + arr + "\nPopped Element: " + poppedElement);

// Splice: Remove two elements starting at index 1 and add new elements
arr.splice(1, 2, 9, 10);
alert("After splice(1, 2, 9, 10): " + arr);

// Slice: Extract elements from index 1 to 3 (excluding 3)


var slicedArray = arr.slice(1, 3);
alert("Sliced Array (1, 3): " + slicedArray);
}
</script></body></html>

30. Write a program to calculate percentage of given marks.


<!DOCTYPE html><html><head>
<title>Calculate Percentage</title></head><body>
<input type="number" id="marksObtained" placeholder="Enter marks obtained">
<input type="number" id="totalMarks" placeholder="Enter total marks">
<button onclick="calculatePercentage()">Calculate Percentage</button>

<script>
function calculatePercentage() {
var marksObtained = parseFloat(document.getElementById('marksObtained').value);
var totalMarks = parseFloat(document.getElementById('totalMarks').value);

if (!marksObtained || !totalMarks || marksObtained > totalMarks) {


alert("Please enter valid marks!");
return;
}

var percentage = (marksObtained / totalMarks) * 100;


alert("Percentage: " + percentage.toFixed(2) + "%");
}
</script></body></html>

31. Write a program that checks whether a passed string is palindrome


or not
<!DOCTYPE html><html><head>
<title>Check Palindrome</title></head><body>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="checkPalindrome()">Check Palindrome</button>

<script>
function checkPalindrome() {
var str = document.getElementById('inputString').value;
var reversedStr = str.split('').reverse().join('');
if (str === reversedStr) {
alert("The string is a palindrome.");
} else {
alert("The string is not a palindrome.");
}
}
</script></body></html>

32.Write a program to design Registration form for College

<!DOCTYPE html><html><head>
<title>College Registration Form</title></head><body>
<h2>College Registration Form</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="course">Course:</label>
<select id="course" name="course">
<option value="engineering">Engineering</option>
<option value="science">Science</option>
<option value="arts">Arts</option>
</select><br><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required><br><br>

<button type="submit">Submit</button>
</form></body></html>

33.Write a program to design a form and handle onblur Event

<!DOCTYPE html><html><head>
<title>Handle onblur Event</title></head><body>
<h2>Form with onblur Event</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" onblur="validateName()" placeholder="Enter your name">
<span id="error"></span><br><br>

<button type="submit">Submit</button>
</form>
<script>
function validateName() {
var nameInput = document.getElementById('name').value;
var errorSpan = document.getElementById('error');
if (nameInput === "") {
errorSpan.innerText = "Name cannot be empty!";
errorSpan.style.color = "red";
} else {
errorSpan.innerText = "";
}
}
</script></body></html>

34. Write a program to design a form and handle onload Event.

<!DOCTYPE html><html><head>
<title>Handle onload Event</title></head><body onload="welcomeMessage()">
<h2>Form with onload Event</h2>
<form>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email"><br><br>

<button type="submit">Submit</button>
</form>

<script>
function welcomeMessage() {
alert("Welcome! Please fill out the form.");
}
</script></body></html>

35. Write a program to design a form and handle onclick Event.

<!DOCTYPE html><html><head>
<title>Handle onclick Event</title></head><body>
<h2>Form with onclick Event</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username"><br><br>

<button type="button" onclick="handleClick()">Submit</button>


</form>

<script>
function handleClick() {
var username = document.getElementById('username').value;
if (username === "") {
alert("Please enter your username.");
} else {
alert("Hello, " + username + "! Form submitted successfully.");
}
}
</script></body></html>

36. Write a program to use intrinsic functions in JavaScript


<!DOCTYPE html><html><head>
<title>Intrinsic Functions in JavaScript</title></head><body>
<button onclick="useIntrinsicFunctions()">Run Intrinsic Functions</button>

<script>
function useIntrinsicFunctions() {
// Math intrinsic function
var randomNum = Math.random();
alert("Random Number: " + randomNum);

// String intrinsic function


var upper = "hello".toUpperCase();
alert("String to Uppercase: " + upper);

// Date intrinsic function


var currentDate = new Date();
alert("Current Date: " + currentDate);

// Parse intrinsic function


var num = parseInt("123");
alert("Parsed Number: " + num);
}

</script></body></html>

37.Write a program to create a session cookie and display content of


Cookie.

<!DOCTYPE html><html><head>
<title>Session Cookie</title></head><body>
<button onclick="createSessionCookie()">Create Session Cookie</button>
<button onclick="showCookie()">Show Cookie</button>

<script>
function createSessionCookie() {
document.cookie = "username=Mayur; path=/";
alert("Session cookie created.");
}

function showCookie() {
alert("Cookies: " + document.cookie);
}
</script></body></html>

38. Write a JavaScript that creates persistent cookie.


<!DOCTYPE html><html><head>
<title>Persistent Cookie</title></head><body>
<button onclick="createPersistentCookie()">Create Persistent Cookie</button>
<button onclick="showCookie()">Show Cookie</button>

<script>
function createPersistentCookie() {
var expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 7); // Expires in 7 days
document.cookie = "location=Nashik; expires=" + expiryDate.toUTCString() + "; path=/";
alert("Persistent cookie created.");
}

function showCookie() {
alert("Cookies: " + document.cookie);
}

</script></body></html>

39.Write a JavaScript to check whether the first letter if the string is


capitalized or not

<!DOCTYPE html><html><head>
<title>Check Capitalized First Letter</title></head><body>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="checkCapitalized()">Check</button>

<script>
function checkCapitalized() {
var str = document.getElementById('inputString').value;
if (str && str[0] === str[0].toUpperCase()) {
alert("The first letter is capitalized.");
} else {
alert("The first letter is not capitalized.");
}
}
</script></body></html>

40. Write a program to demonstrate the example of image and text


rollover.

<!DOCTYPE html><html><head>
<title>Image and Text Rollover</title></head><body>
<h2 id="text">Hover over the image</h2>
<img id="image" src="image1.jpg" alt="Image 1"
onmouseover="rolloverImage()"
onmouseout="resetImage()"
style="width:200px; height:200px;">
<script>
function rolloverImage() {
document.getElementById("image").src = "image2.jpg";
document.getElementById("text").innerText = "Mouse is over the image";
}

function resetImage() {
document.getElementById("image").src = "image1.jpg";
document.getElementById("text").innerText = "Hover over the image";
}
</script></body></html>

<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="50%,50%">
<frameset cols="33%,33%,34%">
<frame src="frame1.html" name="frame1">
<frame src="frame3.html" name="frame3">
<frame src="frame4.html" name="frame4">
</frameset>
<frame src="frame2.html" name="frame2">
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="50%,50%">
<frameset cols="33%,33%,34%">
<frame src="frame1.html" name="frame1">
<frame src="frame3.html" name="frame3">
<frame src="frame4.html" name="frame4">
</frameset>
<frame src="frame2.html" name="frame2">
</frameset>
</html>

You might also like