Scribd
Upload
10 views

CSS Imp Programs

Uploaded by

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

CSS Imp Programs

Uploaded by

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

CSS - Imp programs

1. Write a simple calculator program using switch case in java script.


<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<script>
function calculator() {
var operand1 = parseFloat(prompt("Enter the first number:"));
var operand2 = parseFloat(prompt("Enter the second number:"));
var operator = prompt("Enter the operation (+, -, *, /):");

var result;

switch (operator) {
case "+":
result = operand1 + operand2;
break;
case "-":
result = operand1 - operand2;
break;
case "*":
result = operand1 * operand2;
break;
case "/":
if (operand2 !== 0) {
result = operand1 / operand2;
} else {
result = "Cannot divide by zero!";
}
break;
default:
result = "Invalid operator";
}

alert("Result: " + result);


}

// Call the calculator function


calculator();
</script>
</body>
</html>

2. Write a java script program that will remove the duplicate element from
an array.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<script>
function removeDuplicatesFromArray(inputArray) {
// Use Set to automatically remove duplicates
const uniqueArray = [...new Set(inputArray)];
return uniqueArray;
}

// Example usage:
const inputArray = [1, 2, 3, 4, 2, 5, 6, 1, 7, 8, 8];
const resultArray = removeDuplicatesFromArray(inputArray);

document.write("Original Array:", inputArray);


document.write("Array with Duplicates Removed:", resultArray);
</script>
</body>
</html>

3. Write a java script program that will display list of students in ascending
order according to the marks and calculate the average performance of
the class.
Student name Marks
Amit 34
Sumit 45
Rakesh 27

<html>
<head>
<script>
var students = [
{ name: "Amit", marks: 70 },
{ name: "Sumit", marks: 78 },
{ name: "Abhishek", marks: 71 },
];

function sortStudentsBymarks(students) {
return students.sort(function (a, b) {
return a.marks - b.marks;
});
}
function displaySortStudents(sortedStudents) {
document.write("Sorted list");
for (i = 0; i < sortedStudents.length; i++) {
document.write(
sortedStudents[i].name + " : " + sortedStudents[i].marks
);
document.write("<br>");
}
}
var sortedStudents = sortStudentsBymarks(students);
displaySortStudents(sortedStudents);
</script>
<title>Css</title>
</head>
<body></body>
</html>
4. Write a java script function to merge two arrays and remove all duplicate
values.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<script>
function mergeAndRemoveDuplicates(array1, array2) {
// Merge the arrays
const mergedArray = array1.concat(array2);

// Remove duplicates using Set


const uniqueArray = [...new Set(mergedArray)];

return uniqueArray;
}

// Example usage:
const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const resultArray = mergeAndRemoveDuplicates(array1, array2);

document.write("Array 1:", array1);


document.write("<br>Array 2:", array2);
document.write("<br>Merged and Unique Array:", resultArray);
</script>
</body>
</html>

5. Write a simple java script code to print all prime numbers between 0 to n
Take input from user.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prime Number Finder</title>
</head>
<body>
<h2>Prime Number Finder</h2>

<label for="inputNumber">Enter a number:</label>


<input type="number" id="inputNumber" placeholder="Enter a number" />
<button onclick="findPrimes()">Find Primes</button>

<p id="result"></p>

<script>
function isPrime(num) {
if (num <= 1) return false;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
}
return true;
}

function findPrimes() {
const inputNumber = document.getElementById("inputNumber").value;
const resultElement = document.getElementById("result");
resultElement.innerHTML = "";

if (inputNumber === "" || isNaN(inputNumber) || inputNumber < 0) {


resultElement.innerHTML = "Please enter a valid non-negative number.";
return;
}
const n = parseInt(inputNumber);

for (let i = 0; i <= n; i++) {


if (isPrime(i)) {
resultElement.innerHTML += i + " ";
}
}
}
</script>
</body>
</html>

6. Simple cookie program to create / read / delete.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Example</title>
<script>
function createCookie() {
var userName = document.getElementById("userName").value;

// Check if the input is not empty


if (userName.trim() !== "") {
// Set the cookie with the user's name
document.cookie =
"userName=" +
encodeURIComponent(userName) +
"; expires=Thu, 01 Jan 2025 00:00:00 UTC; path=/";

alert("Cookie created successfully!");


} else {
alert("Please enter a valid name!");
}
}

function readCookie() {
var cookies = document.cookie.split(";");
var userName;

// Loop through all cookies to find the 'userName' cookie


cookies.forEach(function (cookie) {
var parts = cookie.split("=");
var name = parts[0].trim();
var value = parts[1];

if (name === "userName") {


userName = decodeURIComponent(value);
}
});

if (userName) {
alert("User's Name: " + userName);
} else {
alert("Cookie not found or expired!");
}
}

function deleteCookie() {
// Set the 'userName' cookie to expire in the past
document.cookie =
"userName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

alert("Cookie deleted successfully!");


}
</script>
</head>
<body>
<h2>Cookie Example</h2>
<label for="userName">Enter Your Name:</label>
<input type="text" id="userName" placeholder="Your Name" />

<button onclick="createCookie()">Create Cookie</button>


<button onclick="readCookie()">Read Cookie</button>
<button onclick="deleteCookie()">Delete Cookie</button>
</body>
</html>

7. Regular expression program to validate email


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email Validation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<h2>Email Validation</h2>
<form onsubmit="return validateEmail()">
<label for="email">Enter Email:</label>
<input type="text" id="email" name="email" required />
<input type="submit" value="Validate" />
</form>

<script>
function validateEmail() {
// Get the email input value
var email = document.getElementById("email").value;

// Regular expression for a simple email validation


var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// Test the email against the regular expression


if (emailRegex.test(email)) {
alert("Email is valid!");
return true; // Form submission allowed
} else {
alert("Invalid email. Please enter a valid email address.");
return false; // Form submission prevented
}
}
</script>
</body>
</html>

8. Program to validate phone number using regular expression


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phone Number Validation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<h2>Phone Number Validation</h2>
<form onsubmit="return validatePhoneNumber()">
<label for="phoneNumber">Enter Phone Number:</label>
<input
type="text"
id="phoneNumber"
name="phoneNumber"
placeholder="Enter phone number"
required
/>
<button type="submit">Validate</button>
</form>
<p id="result"></p>

<script>
function validatePhoneNumber() {
// Get the input value
var phoneNumber = document.getElementById("phoneNumber").value;

// Define the regular expression for a valid phone number


var phoneRegex = /^\d{10}$/;

// Test the phone number against the regular expression


if (phoneRegex.test(phoneNumber)) {
document.getElementById("result").innerHTML =
"Phone number is valid!";
return true;
} else {
document.getElementById("result").innerHTML =
"Invalid phone number. Please enter a 10-digit number.";
return false;
}
}
</script>
</body>
</html>

9. Text rollover
<html>
<head>
<script></script>
<title>Frame Program</title>
</head>
<body>
<table>
<tr>
<td>
<img src="img1.jpg" height="400px" width="400px" name="myimg" />
</td>
<td>
<a onmouseover="document.myimg.src='img1.jpg'">Image 1</a><br />
<a onmouseover="document.myimg.src='img2.jpg'">Image 2</a><br />
<a onmouseover="document.myimg.src='img1.jpg'">Image 3</a><br />
</td>
</tr>
</table>
</body>
</html>
10. Right click disable
<html>
<head>
<script>
function RightClickDisable() {
alert("Not allowed");
return false;
}
function InternetExp() {
if (event.button == 2) {
// main logic
RightClickDisable();
return false;
}
}
document.oncontextmenu = new Function("RightClickDisable();return false");
</script>
<title>Frame Program</title>
</head>
<body></body>
</html>

11. Banner with url


<html>
<head>
<script>
MyBanners = new Array("img1.jpg", "img2.jpg");
MyBannerLinks = new Array("www.google.com", "www.urengineeringfriend.in");
banner_count = 0;

function displayLinks() {
document.location.href = "http://" + MyBannerLinks[banner_count];
}
function displayBanner() {
if (document.images) {
banner_count++;
if (banner_count == MyBanners.length) {
banner_count = 0;
}
document.bannerchange.src = MyBanners[banner_count];
setTimeout("displayBanner()", 2000);
}
}
</script>
<title>Frame Program</title>
</head>
<body onload="displayBanner()">
<a href="javascript: displayLinks()">
<img src="img1.jpg" name="bannerchange" />
</a>
</body>
</html>

12. Slide Show


<html>
<head>
<script>
Myslides = new Array("img1.jpg", "img2.jpg");
i = 0;
function displaySlides(slideNumber) {
i = i + slideNumber;
if (i > Myslides.length - 1) {
i = 0;
}
if (i < 0) {
i = Myslides.length - 1;
}
document.slideID.src = Myslides[i];
}
</script>
<title>Frame Program</title>
</head>
<body onload="displayBanner()">
<img src="img1.jpg" name="slideID" />
<input type="button" value="Back" onclick="displaySlides(-1)" />
<input type="button" value="Forward" onclick="displaySlides(1)" />
</body>
</html>

13. Palindrome

<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Palindrome Checker</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<h2>Palindrome Checker</h2>
<label for="inputString">Enter a string: </label>
<input type="text" id="inputString" />
<button onclick="checkPalindrome()">Check</button>
<p id="result"></p>

<script>
function checkPalindrome() {
// Get the input string from the user
var inputString = document.getElementById("inputString").value;

// Remove non-alphanumeric characters and convert to lowercase


var cleanString = inputString
.replace(/[^a-zA-Z0-9]/g, "")
.toLowerCase();

// Check if the cleaned string is equal to its reverse


if (cleanString === cleanString.split("").reverse().join("")) {
document.getElementById("result").innerHTML =
"Yes, it's a palindrome!";
} else {
document.getElementById("result").innerHTML =
"No, it's not a palindrome.";
}
}
</script>
</body>
</html>

You might also like