0% found this document useful (0 votes)
25 views19 pages

CSS Practicals 1 To 8

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
0% found this document useful (0 votes)
25 views19 pages

CSS Practicals 1 To 8

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/ 19

Practical No.

1. Write simple Js with HTML for Arithmetic expression evaluation

<html>
<head>
<title>Basic Arithmetic Operations</title>
</head>
<body>
<h2>Basic Arithmetic Operations</h2>
<button onclick="performOperations()">Calculate</button>
<script>
function performOperations() {
// Take input from the user using prompt
var num1 = parseFloat(prompt("Enter the first number:"));
var num2 = parseFloat(prompt("Enter the second number:"));
// Perform operations and display results
document.write("<h3>Results:</h3>");
document.write("Addition: " + (num1 + num2) + "<br>");
document.write("Subtraction: " + (num1 - num2) + "<br>");
document.write("Multiplication: " + (num1 * num2) + "<br>");
document.write("Division: " + (num1 / num2) + "<br>");
}
</script>
</body>
</html>

Output :
2. Write a Js for printing message

3. <html>
4. <head>
5. <title>Print Message</title>
6. </head>
7. <body>
8. <h2>JavaScript Message Printer</h2>
9. <script>
10. // Print the message on the page
11. document.write("Hello! This is your printed message.");
12. </script>
13. </body>
14. </html>
15.

Output :
Practical No. 2
1. Write a Js for printing Fibonacci Series using While Loop

2. <html>
3. <head>
4. <title>Fibonacci Series</title>
5. </head>
6. <body>
7. <h2>Fibonacci Series</h2>
8. <button onclick="printFibonacci()">Show Fibonacci Series</button>
9. <script>
10. function printFibonacci() {
11. // Initialize the first two numbers of the Fibonacci
sequence
12. let num1 = 0, num2 = 1;
13. let nextNum;
14. // Number of terms to be printed
15. const n = 10; // You can change this number as needed
16. // Print the first two terms
17. document.write("Fibonacci Series: " + num1 + ", " + num2);
18. let count = 2; // Starting count as we have already printed
first two numbers
19. // Use a while loop to generate the Fibonacci series
20. while (count < n) {
21. nextNum = num1 + num2;
22. document.write(", " + nextNum);
23. // Update num1 and num2
24. num1 = num2;
25. num2 = nextNum;
26. count++;
27. }
28. }
29. </script>
30. </body>
31. </html>
32.
Output :
2.Write Js to find the greatest no. among 3 no.’s

16. <html>
17. <head>
18. <title>Find Greatest Number</title>
19. </head>
20. <body>
21. <script>
22. // Take three numbers as input from the user
23. let num1 = parseFloat(prompt("Enter the first number:"));
24. let num2 = parseFloat(prompt("Enter the second number:"));
25. let = parseFloat(prompt("Enter the third number:"));
26. // Find the greatest number
27. let greatest = num1;
28. if (num2 > greatest) {
29. greatest = num2;
30. }
31. if (num3 > greatest) {
32. greatest = num3;
33. }
34. // Display the result
35. document.write("The greatest number among " + num1 + ", " +
num2 + ", and " + num3 + " is: " + greatest);
36. </script>
37. </body>
38. </html>
Practical No. 3
1. Write a script to display Array Element in sorting order and
reverse order
2. Write Js to remove duplicate elements from an array
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <title>Remove Duplicates</title>
7. <script>
8. // Define the array with duplicates
9. var array = [1, 2, 3, 4, 3, 2, 1, 5, 6, 5];
10.
11. // Remove duplicates using Set
12. var uniqueArray = [...new Set(array)];
13.
14. // Write the result to the document
15. document.write("Original array: " + array + "<br>");
16. document.write("Array with duplicates removed: " +
uniqueArray);
17. </script>
18. </head>
19. <body>
20. </body>
21. </html>

Output:
Practical No. 4
Write Js to display Factorial of given no. by using function calling with
argument
<!DOCTYPE html>
<html>
<head>
<title>Factorial Calculation</title>
</head>
<body>
<script>
// Function to calculate factorial
function factorial(n) {
// Base case: if n is 0, return 1
if (n === 0) {
return 1;
} else {
// Recursive case: n * factorial of (n-1)
return n * factorial(n - 1);
}
}

// Example usage
var number = 5;
var result = factorial(number);
document.write(`The factorial of ${number} is ${result}`);
</script>
</body>
</html>
Practical no. 5
1. Write a program to display given String is palindrome

<!DOCTYPE html>
<html>
<head>
<title>Simple Palindrome Checker</title>
</head>
<body>
<script>
// Function to check if a string is a palindrome
function isPalindrome(str) {
// Reverse the string
var reversedStr = str.split('').reverse().join('');
// Check if the original string is equal to its reverse
return str === reversedStr;
}

// Example usage
var testString = "radar";
var result = isPalindrome(testString);
document.write('The string "' + testString + '" is ' + (result ? '' :
'not ') + 'a palindrome.');
</script>
</body>
</html>
2. Write a Js program to perform functions on given string
3. <!DOCTYPE html>
4. <html>
5. <head>
6. <title>String Functions</title>
7. </head>
8. <body>
9. <script>
10. var length;
11. var upperCase;
12. var reversed;
13. var palindrome;
14.
15. // Function to find the length of the string
16. function getStringLength(str) {
17. length = str.length;
18. }
19.
20. // Function to convert the string to uppercase
21. function convertToUpperCase(str) {
22. upperCase = str.toUpperCase();
23. }
24.
25. // Function to reverse the string
26. function reverseString(str) {
27. reversed = str.split('').reverse().join('');
28. }
29.
30. // Function to check if a string is a palindrome
31. function checkPalindrome(str) {
32. var reversedStr = str.split('').reverse().join('');
33. palindrome = (str === reversedStr);
34. }
35.
36. // Example usage
37. var myString = "radar";
38. getStringLength(myString);
39. convertToUpperCase(myString);
40. reverseString(myString);
41. checkPalindrome(myString);
42.
43. // Displaying the results
44. document.write('Original String: ' + myString + '<br>');
45. document.write('Length of String: ' + length + '<br>');
46. document.write('Uppercase String: ' + upperCase + '<br>');
47. document.write('Reversed String: ' + reversed + '<br>');
48. document.write('Is Palindrome: ' + (palindrome ? 'Yes' : 'No')
+ '<br>');
49. </script>
50. </body>
51. </html>

Output :

Practical no. 6
1. Write js to display form that contains student information
student name, phone no., department, vehicles, date of birth
and submit button

<!DOCTYPE html>

<html>
<head>
<title>Student Information Form</title>
</head>
<body>
<h2>Student Information Form</h2>
<form id="studentForm">
<label for="studentName">Student Name:</label><br>
<input type="text" id="studentName" name="studentName"
required><br><br>
<label for="phoneNo">Phone Number:</label><br>
<input type="text" id="phoneNo" name="phoneNo" required><br><br>

<label>Department:</label><br>
<input type="radio" id="aiml" name="department" value="AI and ML"
required>
<label for="aiml">AI and ML</label><br>
<input type="radio" id="cs" name="department" value="Computer Science"
required>
<label for="cs">Computer Science</label><br>
<input type="radio" id="arch" name="department" value="Architecture"
required>
<label for="arch">Architecture</label><br><br>

<label>Vehicles:</label><br>
<input type="checkbox" id="car" name="vehicles" value="Car">
<label for="car">Car</label><br>
<input type="checkbox" id="bus" name="vehicles" value="Bus">
<label for="bus">Bus</label><br>
<input type="checkbox" id="bike" name="vehicles" value="Bike">
<label for="bike">Bike</label><br>
<input type="checkbox" id="scooty" name="vehicles" value="Scooty">
<label for="scooty">Scooty</label><br><br>

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


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

<input type="submit" value="Submit">


</form>

<script>
document.getElementById("studentForm").addEventListener("submit",
function(event) {
event.preventDefault(); // Prevent the form from submitting the
default way

// Getting form values


var studentName = document.getElementById("studentName").value;
var phoneNo = document.getElementById("phoneNo").value;
var department =
document.querySelector('input[name="department"]:checked').value;
var vehicles =
Array.from(document.querySelectorAll('input[name="vehicles"]:checked')).map(el
=> el.value).join(', ');
var dob = document.getElementById("dob").value;

// Displaying form values


document.write("<h2>Submitted Student Information</h2>");
document.write("Student Name: " + studentName + "<br>");
document.write("Phone Number: " + phoneNo + "<br>");
document.write("Department: " + department + "<br>");
document.write("Vehicles: " + vehicles + "<br>");
document.write("Date of Birth: " + dob + "<br>");
});
</script>
</body>
</html>
Practical NO. 7
Write a Js to calculate addition and subtraction of 2 no.’s (the form
should contain 2 text box for input and 2 buttons one for add and
other for sub)

<!DOCTYPE html>
<html>
<head>
<title>Addition and Subtraction</title>
</head>
<body>
<h2>Addition and Subtraction Calculator</h2>
<form>
<label for="num1">Number 1:</label><br>
<input type="text" id="num1" name="num1" required><br><br>

<label for="num2">Number 2:</label><br>


<input type="text" id="num2" name="num2" required><br><br>

<button type="button" onclick="addNumbers()">Add</button>


<button type="button" onclick="subtractNumbers()">Subtract</button>
</form>

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

<script>
function addNumbers() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").innerHTML = "Result: " + result;
}

function subtractNumbers() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 - num2;
document.getElementById("result").innerHTML = "Result: " + result;
}
</script>
</body>
</html>
Practical No. 8
Write JS to display 2 radio buttons for Fruits and Vegetables . when
user click on fruit radio button it should display option list of fruits and
when vegetables it should display option list of vegetables .

<!DOCTYPE html>

<html>
<head>
<title>Fruits and Vegetables Selector</title>
</head>
<body>

<h3>Select Category:</h3>

<!-- Radio Buttons -->


<input type="radio" id="fruit" name="category"
onclick="showOptions('fruits')">
<label for="fruit">Fruits</label>

<input type="radio" id="vegetable" name="category"


onclick="showOptions('vegetables')">
<label for="vegetable">Vegetables</label>

<!-- Dropdown for options -->


<div id="optionsContainer" style="margin-top: 10px;">
<select id="optionsList">
<option>Select an option</option>
</select>
</div>

<script>
// List of fruits and vegetables
const fruits = ["Apple", "Banana", "Orange", "Grapes"];
const vegetables = ["Carrot", "Broccoli", "Spinach", "Potato"];

// Function to display options based on the selected category


function showOptions(category) {
const optionsList = document.getElementById("optionsList");
optionsList.innerHTML = ""; // Clear existing options

const options = category === 'fruits' ? fruits : vegetables;

// Add options to the select dropdown


options.forEach(item => {
const option = document.createElement("option");
option.value = item;
option.text = item;
optionsList.appendChild(option);
});
}
</script>

</body>
</html>

You might also like