Question 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question 1 </title>
</head>
<body>
<!-- Q1.Draw the Time Table of college/school using colspan and rowspan. -->
<table border="2px solid black" width="800px" height="30px" align="center">
<tr>
<th>s.no</th>
<th>Papercode</th>
<th>name of paper</th>
<th>batch</th>
<th>time</th>
<th>Day & Date</th>
</tr>
<tr>
<td rowspan="2">1.</td>
<td rowspan="2">bca</td>
<td rowspan="2">datamining</td>
<td >a1,b1,c1</td>
<td>9:30 -10.30</td>
<td>Monday </td>
<tr>
<td>a2,b2,c2</td>
<td>9:30 -10.30</td>
<td>Monday </td>
</tr>
</tr>
</table>
</body>
</html>
question 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>question 2</title>
</head>
<body>
<!-- Write code to create the registration form and validate it’s fields -->
<form onsubmit="validateForm()">
Name : <input type="text" id="name"><br><br>
Password: <input type="password" id="pass"><br><br>
email: <input type="email" id="email"/><br><br>
<button type="submit">Login</button><br><br>
<button type="reset">clear</button>
</form>
</body>
<script>
//Write a javascript program to validate LOGIN page of online book store.?
function validateForm() {
var name = document.getElementById('name').value;
var password = document.getElementById('pass').value;
var email = document.getElementById('email').value;
if (name == "" || password == "" || email == "") {
alert("All fields are required!");
return false;
}
if (password.length < 6) {
alert("Password must be at least 6 characters long!");
return false;
}
if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))) {
alert("Invalid email address!");
return false;
}
return true;
}
</script>
</html>
question 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>question 3</title>
</head>
<body>
<!-- Implement button that changes the background color of a
specific element when clicked? -->
<button id="changeColorButton">Change Background Color</button>
<div id="colorChangeDiv">
This is the div whose background color will change.
</div>
</body>
<script>
const changeColorButton = document.getElementById("changeColorButton");
const colorChangeDiv = document.getElementById("colorChangeDiv");
changeColorButton.addEventListener("click", () => {
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
colorChangeDiv.style.backgroundColor = "#" + randomColor;
});
</script>
</html>
que 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>question 4</title>
<style>
/* Define different font styles */
body {
font-family: Arial, sans-serif;
}
h1 {
font-family: "Times New Roman", Times, serif;
}
p {
font-family: Verdana, Geneva, sans-serif;
}
/* Use border style, border radius */
.box {
border: 2px solid #333;
border-radius: 10px;
padding: 20px;
}
/* Use background-image, background-repeat, background-position */
.background {
background-image: url("logo.png");
background-repeat: no-repeat;
background-position: center;
height: 400px;
}
/* Define style for links */
a {
text-decoration: none;
color: #1e0667;
cursor: pointer;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:visited {
color: #e8ec0f;
}
a:active {
color: #48c21c;
}
/* Add customized cursors for links */
a.custom-cursor {
cursor: url("custom-cursor.png"), pointer;
}
</style>
</head>
<body>
<!-- Design a web page using CSS which includes the following:
1) Use different font styles
2) Use border style, border radius, background-image, background-repeat,
background- position.
3) Define style for links as active, hover, visited
4) Add customized cursors for links.
-->
<h1>Stylish Web Page</h1>
<div class="box">
<p>This is a paragraph with different font styles.</p>
<a href="q1.html">Link</a>
</div>
<div class="background">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
perspiciatis animi itaque consectetur atque aut quo voluptatem distinctio
est exercitationem possimus ex minus impedit sunt in, quia reiciendis. Quo
assumenda in ex dicta, quaerat nulla error nobis sequi eius ipsa. Quas
expedita placeat nobis adipisci quis ex quaerat veniam molestiae, non
mollitia neque ullam quasi quo labore omnis dolorum ratione repellendus
magni iste ab numquam accusamus dolor! Ipsam repudiandae, iusto debitis
repellendus asperiores quo fugit optio, aliquid laudantium illum amet vero
placeat reiciendis dolorum! Laudantium enim ea aliquam sapiente provident
ab suscipit voluptate pariatur libero animi aspernatur eius dolore,
reprehenderit possimus repellat voluptatibus perspiciatis quo perferendis.
Nulla necessitatibus, commodi labore corporis vel repellat nam nesciunt
temporibus animi id amet illo molestias saepe, laboriosam perferendis.
Optio quaerat debitis delectus quis nihil quod, deleniti facere
accusantium! Sequi quas ipsam nostrum reprehenderit, repudiandae,
veritatis error recusandae voluptas quidem suscipit quasi deserunt
dignissimos adipisci! Dolores voluptatum iusto molestiae alias rerum minus
fuga! Ut cumque autem nihil tenetur, voluptatem tempora nam molestiae
saepe earum molestias, odit dolor mollitia laboriosam a et hic esse. Magni
voluptatem itaque deleniti blanditiis nihil ratione molestiae cupiditate
quae, et unde libero modi consequatur, excepturi ad iure sapiente rerum
tempora dolor ducimus porro. Perspiciatis, culpa eaque? Suscipit tenetur
laborum, praesentium modi mollitia iste sunt deserunt quas vero dolores
sequi hic commodi earum? Excepturi labore est minus neque illum aperiam
iusto repellendus dolorem, earum ullam aliquam, fugit possimus eaque ad
accusamus perspiciatis vel ut quae in tenetur cum adipisci dolores. Ab,
error!
</div>
<a href="q3.html" class="custom-cursor">Link with Custom Cursor</a>
</body>
</html>
que 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>question 5</title>
</head>
<body>
<!-- Write a javascript program to find whether a number entered by user is negative,
positive or zero. Also convert the negative number to positive and vice versa.
Generate proper alert message whenever require. -->
</body>
<script>
// Function to check and convert the number
function checkAndConvertNumber() {
// Prompt user to enter a number
let number = prompt("Enter a number:");
// Convert the input to a number
number = parseFloat(number);
// Check if the input is a number
if (isNaN(number)) {
alert("Please enter a valid number.");
} else {
// Check if the number is negative, positive, or zero
if (number < 0) {
alert(number + " is a negative number.");
// Convert negative number to positive
let positiveNumber = -number;
alert("The positive of " + number + " is " + positiveNumber);
} else if (number > 0) {
alert(number + " is a positive number.");
// Convert positive number to negative
let negativeNumber = -number;
alert("The negative of " + number + " is " + negativeNumber);
} else {
alert("The number is zero.");
}
}
}
// Call the function to execute
checkAndConvertNumber();
</script>
</html>
que 6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>question 6</title>
</head>
<body>
<h1>Array Manipulation</h1>
<p>Click the buttons to manipulate the array:</p>
<button onclick="getFirstAndLast()">Get First and Last Element</button>
<button onclick="removeElement()">Remove Element</button>
<button onclick="addElement()">Add Element</button>
<p id="output"></p>
<script>
let array = [1, 2, 3, 4, 5]; // Sample array
// Function to get first and last element of the array
function getFirstAndLast() {
let firstElement = array[0];
let lastElement = array[array.length - 1];
document.getElementById("output").innerText =
"First Element: " + firstElement + ", Last Element: " + lastElement;
}
// Function to remove an element from the array
function removeElement() {
let indexToRemove = prompt("Enter the index of the element to remove:");
indexToRemove = parseInt(indexToRemove);
if( isNaN(indexToRemove) || indexToRemove < 0 ||indexToRemove >= array.length)
{
alert("Invalid index.");
} else {
let removedElement = array.splice(indexToRemove, 1);
document.getElementById("output").innerText =
"Removed Element: " + removedElement;
}
}
// Function to add an element to the array
function addElement() {
let elementToAdd = prompt("Enter the element to add:");
array.push(elementToAdd);
document.getElementById("output").innerText =
"Element Added: " + elementToAdd;
}
</script>
</body>
</html>
que7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>question 7</title>
<style>
/* Center the div horizontally */
.centered {
margin: 0 auto;
width: 200px; /* Specific width */
height: 200px; /* Specific height */
border: 2px solid black; /* Solid border */
}
</style>
</head>
<body>
<!-- Style a <div> element to have a solid border, specific width and
height, and centered horizontally on the page. -->
<div class="centered">hello div</div>
</body>
</html>
que 8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>question 8</title>
<style>
/* CSS overflow */
.container {
width: 300px;
height: 200px;
border: 1px solid #ccc;
overflow: auto; /* overflow*/
}
/* CSS text shadow */
h1 {
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* Multiple pseudo-elements */
.card {
width: 300px;
height: 200px;
background-color: #f9f3f3;
border: 1px solid #ccc;
/*position: relative;*/
}
.card::before,
.card::after {
content: "*";
color: red;
width: 20px;
height: 20px;
/*position: absolute; */
/*background-color: red;*/
}
.card::before {
top: 0;
left: 0;
}
.card::after {
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<!-- Create a web page using :
(a) CSS overflow
(b) CSS text shadow
(c) Multiple pseudo element -->
<!-- CSS overflow -->
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer sit amet est orci. Nulla facilisi.
</p>
</div>
<!-- CSS text shadow -->
<h1>Text Shadow Example</h1>
<!-- Multiple pseudo-elements -->
<div class="card">
car Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto
voluptas quos atque amet quia accusantium deserunt, dolorem nam. Dolore
assumenda aspernatur explicabo id provident veniam excepturi numquam
temporibus quidem hic.
</div>
</body>
</html>
que 9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>question 9</title>
</head>
<body>
<!-- Write a JavaScript function that takes user input (such as a number)
and displays a message based on whether the number is prime or not. -->
<h1>Prime Number Checker</h1>
<p>Enter a number to check if it's prime:</p>
<input type="number" id="numberInput">
<button onclick="checkPrime()">Check Prime</button>
<script>
function checkPrime() {
let number = parseInt(document.getElementById('numberInput').value);
let isPrime = true;
if (number <= 1) {
isPrime = false;
} else {
for (let i = 2; i < number; i++) {
if (number % i === 0) {
isPrime = false;
break;
}
}
}
if (isPrime) {
alert(number + " is a prime number.");
} else {
alert(number + " is not a prime number.");
}
}
</script>
</body>
</html>
que 10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>question 10</title>
</head>
<body>
<!-- Create a button in HTML that, when clicked, changes the text of
a paragraph to a predefined message using JavaScript. -->
<h1>Change Text on Button Click</h1>
<button onclick="changeText()">Click Me</button>
<p id="message">Original Message</p>
<script>
function changeText() {
document.getElementById('message').innerText = "New Message";
}
</script>
</body>
</html>
que 11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>question 11</title>
</head>
<body>
<!-- write a program to make use of lists. -->
<h1>List Manipulation</h1>
<script>
// Define a list (array) of numbers
let numbers = [1, 2, 3, 4, 5];
// Print the list to the console
console.log("Original list:", numbers);
// Add an element to the end of the list
numbers.push(6);
console.log("List after adding element:", numbers);
// Remove an element from the end of the list
let removedElement = numbers.pop();
console.log("List after removing element:", numbers);
console.log("Removed element:", removedElement);
// Add an element to the beginning of the list
numbers.unshift(0);
console.log("List after adding element to the beginning:", numbers);
// Remove an element from the beginning of the list
let removedFirstElement = numbers.shift();
console.log("List after removing element from the beginning:", numbers);
console.log("Removed first element:", removedFirstElement);
// Access elements by index
console.log("Element at index 2:", numbers[2]);
// Modify elements by index
numbers[2] = 10;
console.log("List after modifying element at index 2:", numbers);
// Get the length of the list
console.log("Length of the list:", numbers.length);
</script>
</body>
</html>
que 12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>question 12</title>
</head>
<body>
<!-- Explain the difference between let, const, and var for variable
declaration in JavaScript. -->
<!-- var
var was the original way to declare variables in JavaScript.
Variables declared with var have function-level scope or global scope
if declared outside of any function.
They can be redeclared and reassigned.
They are hoisted to the top of their function or global scope.
This means you can use the variable before it's declared,
but its value will be undefined.
-->
<!-- const:
Also introduced in ES6, const allows you to declare variables whose
values are constant and cannot be reassigned.
Variables declared with const must be initialized with a value and
cannot be left uninitialized.
They are block-scoped like variables declared with let.
They cannot be redeclared or reassigned.
-->
<!-- let
Introduced in ECMAScript 6 (ES6), let allows for block-scoped vars.
Variables declared with let are limited to the block, statement,
or expression in which they're defined.
They can be reassigned, but not redeclared in the same scope.
They are not hoisted to the top of their block. This means you can't
use the variable before it's declared.
-->
</body>
<script>
var x = 10;
console.log(x); // Outputs: 10
{
var x = 20;
}
console.log(x); // Outputs: 20
//let
let y = 10;
console.log(y); // Outputs: 10
{
let y = 20;
console.log(y); // Outputs: 20
}
console.log(y); // Outputs: 10
//const
const z = 10;
console.log(z); // Outputs: 10
{
const z = 20;
console.log(z); // Outputs: 20
}
console.log(z); // Outputs: 10
</script>
</html>
thanks
0 Comments
"Thank you for your message! I appreciate your prompt response and the information you've provided. If you have any further details or if there's anything else I should know, please feel free to let me know. Looking forward to our continued communication!" -- Peaknotes.in