15.4 Programming Activity (20 mins)

Task:

Create an array of student names and write a script that allows users to:
- Add a student name to the array.
- Remove a student name from the array.
- Sort the names in alphabetical order.
Challenge: Use forEach() to iterate through the array and print each name with specific formatting (e.g., adding a serial number before each name).

Step-by-Step Activity:

Create an HTML file (e.g., student_names.html) and write JavaScript code that allows users to manipulate the student names array by adding, removing, and sorting names.

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Names Array</title>
</head>
<body>
  <h1>Check the Console for Array Outputs</h1>

  <script>
    // Create an initial array of student names
    let students = ["Alice", "Bob", "Charlie", "Akyl", "Adilet", "Asan"];

    // Function to add a student to the array
    function addStudent(name) {
      students.push(name);
      console.log("After adding " + name + ": " + students);
    }

    // Function to remove a student from the array
    function removeStudent(name) {
      let index = students.indexOf(name);
      if (index !== -1) {
        students.splice(index, 1);  // Remove student if found
        console.log("After removing " + name + ": " + students);
      } else {
        console.log(name + " not found in the array.");
      }
    }

    // Function to sort the array of students alphabetically
    function sortStudents() {
      students.sort();
      console.log("After sorting: " + students);
    }

    // Call functions to manipulate the array
    //---------------------------------------------
    //modify the code for challenge 1 & 2
    addStudent("Aisulu");  // Add a student
    removeStudent("Bob");  // Remove a student
    //---------------------------------------------
    sortStudents();  // Sort the students array

    // Challenge: Use forEach() to iterate through the array and print names with formatting
    console.log("List of students:");
    students.forEach(function(name, index) {
      console.log((index + 1) + ". " + name);  // Print with serial number
    });
  </script>
</body>
</html>

Explanation:

Adding a Student:
- The addStudent() function takes a name as a parameter and uses the push() method to add the name to the array.
Removing a Student:
- The removeStudent() function uses indexOf() to find the index of the student to be removed, and if found, uses splice() to remove the student from the array.
Sorting the Student Names:
- The sortStudents() function sorts the names in the array alphabetically using the sort() method.
Iterating with forEach():
- The script uses forEach() to print each student's name in a formatted list with a serial number.

Run the file in a browser:

Open the HTML file in a browser.
Use Developer Tools (F12 or right-click and select Inspect > Console) to view the outputs of the student array manipulations.

Challenge:

Modify the Code:

Modify the script to allow users to add multiple student names at once by passing an array of names to the addStudent() function.

Example:

function addMultipleStudents(namesArray) {
  students = students.concat(namesArray);  // Combine the arrays
  console.log("After adding students: " + students);
}

addMultipleStudents(["Eve", "Frank"]);  // Adds multiple students

Extra Challenge:
- Ask the user for input using prompt() to add or remove a student dynamically and display the updated array.
Example:
```
let newStudent = prompt("Enter a new student name to add:");
addStudent(newStudent);  // Adds the student from user input
```

Extra Challenge:

Modify the code to show all the results in <div id="Results" > in index.html s and add a "Next" button to carry out the step-by-step processing of the console.log output. Here's the modified code:

// Challenge code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Challenge: Student Names Array</title>
    <style>
      #Results {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h1>Student Names Array</h1>
    <div id="Results">Click "Next" to see the results.</div>
    <button id="nextButton">Next</button>

    <script>
      // Create an initial array of student names
      let students = ["Alice", "Bob", "Charlie", "Akyl", "Adilet", "Asan"];
      let results = [];

      // Function to add a student to the array
      function addStudent(name) {
        students.push(name);
        results.push("After adding " + name + ": " + students);
      }

      // Function to remove a student from the array
      function removeStudent(name) {
        let index = students.indexOf(name);
        if (index !== -1) {
          students.splice(index, 1); // Remove student if found
          results.push("After removing " + name + ": " + students);
        } else {
          results.push(name + " not found in the array.");
        }
      }

      // Function to sort the array of students alphabetically
      function sortStudents() {
        students.sort();
        results.push("After sorting: " + students);
      }

      // Call functions to manipulate the array
      let newStudent = prompt("Enter a new student name to add:");
      addStudent(newStudent); // Adds the student from user input

      newStudent = prompt("Enter a student name to remove:");
      removeStudent(newStudent); // Removes the student from user input

      sortStudents(); // Sort the students array

      // Challenge: Use forEach() to iterate through the array and print names with formatting
      results.push("List of students:");
      students.forEach(function (name, index) {
        results.push(index + 1 + ". " + name); // Print with serial number
      });

      let currentIndex = 0;
      const resultDiv = document.getElementById("Results");
      const nextButton = document.getElementById("nextButton");

      nextButton.addEventListener("click", function () {
        if (currentIndex < results.length) {
          resultDiv.innerHTML += "<br>" + results[currentIndex];
          currentIndex++;
        } else {
          resultDiv.innerHTML += "<br>All results displayed.";
          nextButton.disabled = true;
        }
      });
    </script>
  </body>
</html>

Activity Follow-up Questions:

How does push() work to add a new element to an array?
What does indexOf() do when searching for an element in the array?
How does forEach() differ from a for loop when iterating over an array?

Expected Outcome:

Students will:

Practice manipulating arrays by adding, removing, and sorting elements using JavaScript array methods.
Learn how to use forEach() to iterate through arrays and apply specific formatting to each element.
Understand how to dynamically modify arrays based on user input or program logic.

Previous15.3 Advanced Array Methods (15 mins)Next15.5 Array Best Practices (15 mins)

Last updated 1 year ago