Scribd
Upload
21 views2 pages

Lab Task7

Uploaded by

k240533
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
21 views2 pages

Lab Task7

Uploaded by

k240533
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/ 2

National University of Computer & Emerging Sciences, Karachi

Computer Science Department


Fall 2024, Lab Tasks - 07
Course Code: CL-1000 Course: Introduction to Information and Communication
Technology (IICT)

Instructor(s): Khadija Tul Kubra

Instructions:

Task: Create a Simple Shopping List App

Objective: Build a simple shopping list application using JavaScript that allows users to manage
their shopping items.

Instructions:

Instructions:

1. Set Up Your Project:


o Create a new folder on your computer named ShoppingList.
o Inside this folder, create two files:
1. index.html
2. script.js
2. HTML Structure:
o Open index.html in your code editor and write the following basic HTML
structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Shopping List</title>
</head>
<body>
<h1>Shopping List</h1>
<script src="script.js"></script>
</body>
</html>

3. Step 1: Initialize the Shopping List Array


o In your script.js, create an empty array named shoppingList to hold your items:

var shoppingList = [ ];
4. Step 2: Create the addItem Function
o Define a function named addItem that takes one parameter (the item to be added).
o Inside the function, push the item into the shoppingList array.
o Log a message confirming the addition of the item.
o
5. Step 3: Create the removeItem Function
o Define a function named removeItem that takes an index as a parameter.
o Inside the function, check if the index is valid (between 0 and the length of the
shoppingList array).
o If valid, remove the item using splice and log a confirmation message. If invalid,
log an error message.
6. Step 4: Create the displayItems Function
o Define a function named displayItems that does not take any parameters.
o Use a loop to iterate through the shoppingList array and log each item along with
its index.
7. Step 5: Create the clearList Function
o Define a function named clearList that resets the shoppingList array to an empty
array.
o Log a message confirming that the list has been cleared.
8. Step 6: Test Your App
o Add some items to your shopping list using the addItem function.
o Display the current items in your shopping list using the displayItems function.
o Remove an item using the removeItem function and display the list again.
o Clear the shopping list using the clearList function and confirm that the list is
empty.
9. Example Usage:
o Include the following example calls in your shoppingList.js file to test your
functions:

javascript
Copy code
addItem("Apples");
addItem("Bread");
addItem("Milk");
displayItems();
removeItem(1); // Remove Bread
displayItems();
clearList();

You might also like