Scribd
Upload
13 views

CSS Practicals 1 To 8

Uploaded by

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

CSS Practicals 1 To 8

Uploaded by

abhishekgajare912
Copyright
© © All Rights Reserved
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