Instructions:
Open Visual Studio Code (or any code editor of your choice).
Create two files:
index.html (This file will define the structure and layout of the webpage.)
crud.js (This file will contain the JavaScript code for handling the CRUD operations.)
In your index.html file, follow the structure provided below:
You will create a basic HTML document.
Add an input field where users can enter new items.
Add a button labeled "Add" that will call a JavaScript function to add the item to the list.
Include an empty <ul> element where the items will be displayed.
Link the external JavaScript file (crud.js).
In your crud.js file, follow the provided code:
Write a function to add an item to an array when the "Add" button is clicked.
Write another function to display the items by dynamically updating the HTML list.
Implement functions to edit and delete items from the array and update the display accordingly.
Research Task:
Once you have followed and implemented the code from the activity, your task is to research and
understand the use of each block or line of code in the JavaScript file. Specifically, you should look into:
getElementById(): How does this method allow JavaScript to interact with specific elements on the
webpage?
innerHTML: Why is this property used to insert or replace HTML content inside an element?
Event Handling: What happens when you use onclick to trigger a JavaScript function?
Array Methods: Research how the push() method adds new elements to an array, and how splice()
works to remove elements from an array.
Loops: Look into how .forEach() is used to iterate over an array and update the display.
Code Review:
1. After following the provided code and implementing it in your files:
2. Paste the code provided for both index.html and crud.js into your files.
3. Run the project by opening the index.html file in a browser.
4. Test the functionality:
5. Add new items to the list.
6. Edit existing items.
7. Delete items from the list.
8. Research and Write a brief description for each JavaScript block and line to understand how
they work. You’ll need to explain:
9. How the "Add", "Edit", and "Delete" buttons interact with the JavaScript functions.
10. The role of arrays in storing the list items.
11. The use of DOM manipulation to display and update the list dynamically.
Outcome:
By the end of this activity, you will understand how JavaScript
can manage and manipulate data on a webpage. You will also
gain insights into DOM interaction, event handling, and the
use of arrays for CRUD functionality.
