From bcd2740fc89278fd8caf8b4fd6f0c522a0c63c80 Mon Sep 17 00:00:00 2001
From: Clarence Bakosi <clarencepenz@users.noreply.github.com>
Date: Thu, 30 Oct 2025 12:17:13 +0100
Subject: [PATCH] feat(curriculum): Add interactive examples  to How Do You Add
 and Remove Elements from the Beginning and End of an Array (#63284)

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
---
 .../6732aec982904608b637716b.md                | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/lecture-working-with-arrays/6732aec982904608b637716b.md b/curriculum/challenges/english/blocks/lecture-working-with-arrays/6732aec982904608b637716b.md
index 74d5fdfe839..0859e25d717 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-arrays/6732aec982904608b637716b.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-arrays/6732aec982904608b637716b.md
@@ -5,12 +5,14 @@ challengeType: 19
 dashedName: how-do-you-add-and-remove-elements-from-the-beginning-and-end-of-an-array
 ---
 
-# --description--
+# --interactive--
 
 Arrays in JavaScript are dynamic, which means you can easily add or remove elements from them. There are four main methods for adding and removing elements from the beginning and end of an array: `push()`, `pop()`, `shift()`, and `unshift()`. Let's explore each of these methods in detail.
 
 The `push()` method is used to add one or more elements to the end of an array. The return value for the `push()` method is the new length of the array. Here's an example of adding a new fruit to the existing `fruits` array:
 
+:::interactive_editor
+
 ```js
 const fruits = ["apple", "banana"];
 const newLength = fruits.push("orange");
@@ -18,6 +20,8 @@ console.log(newLength); // 3
 console.log(fruits); // ["apple", "banana", "orange"]
 ```
 
+:::
+
 In this example, we start with an array called `fruits` which contains two elements. We then use the `push()` method to add the string `orange` to the end of the array.
 
 You might have noticed that we are using `const` when declaring the `fruits` array. But why is it possible to add more elements to this `fruits` array when `fruits` is a constant? This is possible because declaring an array with the `const` keyword creates a reference to the array. While the array itself is mutable and can be modified, you cannot reassign a new value to the `fruits` constant, like this:
@@ -30,6 +34,8 @@ console.log(fruits); // Uncaught TypeError: Assignment to constant variable.
 
 The next method we will look at is the `pop()` method. The `pop()` method removes the last element from an array and returns that element. It also modifies the original array. Here's how it works:
 
+:::interactive_editor
+
 ```js
 let fruits = ["apple", "banana", "orange"];
 let lastFruit = fruits.pop();
@@ -37,10 +43,14 @@ console.log(fruits); // ["apple", "banana"]
 console.log(lastFruit); // "orange"
 ```
 
+:::
+
 In this example, we start with an array of three fruits. The `pop()` method removes the last element (`orange`) from the array and returns it. The original `fruits` array is modified and contains only two elements.
 
 The `unshift()` method adds one or more elements to the beginning of an array and returns its new length. It works similarly to `push()`, but modifies the start of the array instead of the end. Here's an example:
 
+:::interactive_editor
+
 ```js
 let numbers = [2, 3];
 let newLength = numbers.unshift(1);
@@ -48,10 +58,14 @@ console.log(numbers); // [1, 2, 3]
 console.log(newLength); // 3
 ```
 
+:::
+
 In this example, we use `unshift()` to add the number `1` to the beginning of the `numbers` array. The method returns the new length of the array, which is `3`.
 
 Finally, the `shift()` method removes the first element from an array and returns that element. It's similar to `pop()`, but it works at the beginning of the array instead of the end. Here's how it works:
 
+:::interactive_editor
+
 ```js
 let colors = ["red", "green", "blue"];
 let firstColor = colors.shift();
@@ -59,6 +73,8 @@ console.log(colors); // ["green", "blue"]
 console.log(firstColor); // "red"
 ```
 
+:::
+
 In this example, we start with an array of three colors. The `shift()` method removes the first element (`red`) from the array and returns it. The original `colors` array is modified to contain only two elements.
 
 Note that while `push()` and `unshift()` can add multiple elements at once, `pop()` and `shift()` remove only one element at a time.