<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Array Operations on Fruits</h1>
<p>Current fruits in the array:</p>
<p id="arrayOutput">Array: Apple, Banana, Mango</p>
<button onclick="addFruit()">Add Orange</button>
<button onclick="removeFruit()">Remove Last Fruit</button>
<button onclick="showArrayLength()">Show Array Length</button>
<h1>Display Specific Element</h1>
<p>Enter an index to view the element:</p>
<input type="number" id="indexInput" min="0" placeholder="Enter index (0, 1, 2, ...)">
<button onclick="displaySpecificElement()">Display Element</button>
<div class="output" id="arrayLengthOutput"></div>
<div class="output" id="specificElementOutput"></div>
<script>
// Define an array
var fruits = ["Apple", "Banana", "Mango"];
// Add an element to the array
function addFruit() {
fruits.push("Orange");
document.getElementById('arrayOutput').innerText = 'Array after adding Orange: ' + fruits.join(", ");
}
// Remove the last element
function removeFruit() {
fruits.pop();
document.getElementById('arrayOutput').innerText = 'Array after removing: ' + fruits.join(", ");
}
// Display the array length
function showArrayLength() {
document.getElementById('arrayLengthOutput').innerText = 'Array length: ' + fruits.length;
}
// Display a specific array element
function displaySpecificElement() {
var index = document.getElementById('indexInput').value;
if (index >= 0 && index < fruits.length) {
document.getElementById('specificElementOutput').innerText = 'Element at index ' + index + ': ' + fruits[index];
} else {
document.getElementById('specificElementOutput').innerText = 'Index out of bounds';
}
}
</Script>
</body>
</html>
Initial Array: Apple, Banana, Mango
Array length: 3
Enter an index to see the element.
Array Methods: Shift and Unshift
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="addVegetable()">Add Vegetable (Broccoli)</button>
<button onclick="removeVegetable()">Remove First Vegetable</button>
<div id="shiftUnshiftOutput" class="output-box">Initial Array: Carrot, Tomato, Potato</div>
<script>
// Define an array
var vegetables = ["Carrot", "Tomato", "Potato"];
// Add element at the beginning
function addVegetable() {
vegetables.unshift("Broccoli");
document.getElementById('shiftUnshiftOutput').innerText = 'Array after adding at the beginning: ' + vegetables.join(", ");
}
// Remove first element
function removeVegetable() {
vegetables.shift();
document.getElementById('shiftUnshiftOutput').innerText = 'Array after removing the first element: ' + vegetables.join(", ");
}
</Script>
</body>
</html>
Initial Array: Carrot, Tomato, Potato
Array Methods: Sort and Reverse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button class="btn btn-primary mb-2" onclick="sortNumbers()">Sort Numbers</button>
<button class="btn btn-secondary mb-2" onclick="reverseNumbers()">Reverse Numbers</button>
<div id="sortOutput" class="output-box">Initial Array: 5, 8, 1, 3, 7</div>
<div id="reverseOutput" class="output-box">Click to reverse the array.</div>
<script>
// Define an array
var numbers = [5, 8, 1, 3, 7];
// Sort the array
function sortNumbers() {
numbers.sort(function(a, b) { return a - b; });
document.getElementById('sortOutput').innerText = 'Array after sorting: ' + numbers.join(", ");
}
// Reverse the array
function reverseNumbers() {
numbers.reverse();
document.getElementById('reverseOutput').innerText = 'Array after reversing: ' + numbers.join(", ");
}
</Script>
</body>
</html>
Initial Array: 5, 8, 1, 3, 7
Click to reverse the array.
Array Methods: Splice and Slice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button class="btn btn-warning mb-2" onclick="spliceArray()">Splice Array (Remove)</button>
<button class="btn btn-info mb-2" onclick="sliceArray()">Slice Array (Extract)</button>
<div id="spliceOutput" class="output-box">Initial Array: Red, Green, Blue, Yellow, Purple</div>
<div id="sliceOutput" class="output-box">Click to slice the array.</div>
<script>
// Define an array
var colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
// Splice the array (remove 2 elements from index 1)
function spliceArray() {
colors.splice(1, 2);
document.getElementById('spliceOutput').innerText = 'Array after splicing: ' + colors.join(", ");
}
// Slice the array (create a new array from index 1 to 3)
function sliceArray() {
var slicedColors = colors.slice(1, 3);
document.getElementById('sliceOutput').innerText = 'New sliced array: ' + slicedColors.join(", ");
}
</Script>
</body>
</html>