From b462fbce17ad57920b6d1ae3eb1a47a31bbea2f9 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Wed, 24 Sep 2025 13:08:33 +0200 Subject: [PATCH 1/7] Add a form wrapper for better UX --- .../core/scripting/dom_scripting/index.md | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md index 4cd35babb3991d1..e439faae4f0e515 100644 --- a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md @@ -278,11 +278,11 @@ The finished demo will look something like the following — try it out before y ```html hidden live-sample___dynamic-shopping-list

My shopping list

-
+
-
+ ``` @@ -303,7 +303,9 @@ const list = document.querySelector("ul"); const input = document.querySelector("input"); const button = document.querySelector("button"); -button.addEventListener("click", () => { +button.addEventListener("click", (event) => { + event.preventDefault(); + const myItem = input.value; input.value = ""; @@ -329,17 +331,18 @@ button.addEventListener("click", () => { To complete the exercise, follow the steps below, and make sure that the list behaves as described above. -1. To start with, download a copy of our [shopping-list.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html) starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a div with a label, input, and button, and an empty list and {{htmlelement("script")}} element. You'll be making all your additions inside the script. +1. To start with, download a copy of our [shopping-list.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html) starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a form with a label, input, and button, and an empty list and {{htmlelement("script")}} element. You'll be making all your additions inside the script. 2. Create three variables that hold references to the list ({{htmlelement("ul")}}), {{htmlelement("input")}}, and {{htmlelement("button")}} elements. 3. Create a [function](/en-US/docs/Learn_web_development/Core/Scripting/Functions) that will run in response to the button being clicked. -4. Inside the function body, start off by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input element in a variable. -5. Next, empty the input element by setting its value to an empty string — `""`. -6. Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables. -7. Append the span and the button as children of the list item. -8. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'. -9. Append the list item as a child of the list. -10. Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (`
  • ...
    • `). -11. Finally, use the [`focus()`](/en-US/docs/Web/API/HTMLElement/focus) method to focus the input element ready for entering the next shopping list item. +4. Inside the function body, start off by calling [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault). When wrapped in the form element, the input will trigger the form to submit when the user presses the Enter key. This will keep the form from refreshing the page and will add a new item to the list. +5. Continue by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input element in a variable. +6. Next, empty the input element by setting its value to an empty string — `""`. +7. Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables. +8. Append the span and the button as children of the list item. +9. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'. +10. Append the list item as a child of the list. +11. Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (`
  • ...
    • `). +12. Finally, use the [`focus()`](/en-US/docs/Web/API/HTMLElement/focus) method to focus the input element, ready for entering the next shopping list item. ## Summary From 2aa8f9827db362908c32fa7b97082e94a2ab8373 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Mon, 6 Oct 2025 17:38:08 +0200 Subject: [PATCH 2/7] Update index.md Co-authored-by: Dipika Bhattacharya --- .../learn_web_development/core/scripting/dom_scripting/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md index e439faae4f0e515..137c995c6a390b3 100644 --- a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md @@ -267,7 +267,7 @@ In the next section we will look at a more practical use of DOM APIs. ## Creating a dynamic shopping list -In this exercise we want you to build a dynamic shopping list that allows you to add items using a form input and button. When you add enter an item and press the button: +In this exercise, we want you to build a dynamic shopping list that allows you to add items using a form input and a button. After you type an item in the input field and click the button or press the Enter key, the following should happen: - The item should appear in the list. - Each item should be given a button that can be pressed to delete that item off the list. From aab956dcf3da1c6d18370bf269dd136b1f9ec264 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Mon, 6 Oct 2025 17:38:21 +0200 Subject: [PATCH 3/7] Update index.md Co-authored-by: Dipika Bhattacharya --- .../core/scripting/dom_scripting/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md index 137c995c6a390b3..9d443f4bc5a7d4b 100644 --- a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md @@ -271,7 +271,8 @@ In this exercise, we want you to build a dynamic shopping list that allows you t - The item should appear in the list. - Each item should be given a button that can be pressed to delete that item off the list. -- The input should be emptied and focused, ready for you to enter another item. +- Each item should have a button next to it that removes the item from the list when clicked. +- The input fields should be cleared and focused, ready for the next item entry. The finished demo will look something like the following — try it out before you build it! From 75f8bfaf27a867932929a41fffd1fda2a5f06fcb Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Mon, 6 Oct 2025 17:39:29 +0200 Subject: [PATCH 4/7] Update index.md Co-authored-by: Dipika Bhattacharya --- .../learn_web_development/core/scripting/dom_scripting/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md index 9d443f4bc5a7d4b..a4b90b12e40c961 100644 --- a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md @@ -332,7 +332,7 @@ button.addEventListener("click", (event) => { To complete the exercise, follow the steps below, and make sure that the list behaves as described above. -1. To start with, download a copy of our [shopping-list.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html) starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a form with a label, input, and button, and an empty list and {{htmlelement("script")}} element. You'll be making all your additions inside the script. +1. To begin, download a copy of our [shopping-list.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html) starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a form with a label, input, and button, an empty list, and a {{htmlelement("script")}} element. You'll be making all your additions inside the script. 2. Create three variables that hold references to the list ({{htmlelement("ul")}}), {{htmlelement("input")}}, and {{htmlelement("button")}} elements. 3. Create a [function](/en-US/docs/Learn_web_development/Core/Scripting/Functions) that will run in response to the button being clicked. 4. Inside the function body, start off by calling [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault). When wrapped in the form element, the input will trigger the form to submit when the user presses the Enter key. This will keep the form from refreshing the page and will add a new item to the list. From 8d1e69895bf5f10f64e4455b58a4c482dcbfa06c Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Mon, 6 Oct 2025 17:40:00 +0200 Subject: [PATCH 5/7] Update index.md Co-authored-by: Dipika Bhattacharya --- .../core/scripting/dom_scripting/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md index a4b90b12e40c961..52b0c73ade06be4 100644 --- a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md @@ -335,8 +335,8 @@ To complete the exercise, follow the steps below, and make sure that the list be 1. To begin, download a copy of our [shopping-list.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html) starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a form with a label, input, and button, an empty list, and a {{htmlelement("script")}} element. You'll be making all your additions inside the script. 2. Create three variables that hold references to the list ({{htmlelement("ul")}}), {{htmlelement("input")}}, and {{htmlelement("button")}} elements. 3. Create a [function](/en-US/docs/Learn_web_development/Core/Scripting/Functions) that will run in response to the button being clicked. -4. Inside the function body, start off by calling [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault). When wrapped in the form element, the input will trigger the form to submit when the user presses the Enter key. This will keep the form from refreshing the page and will add a new item to the list. -5. Continue by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input element in a variable. +4. Inside the function body, start by calling [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault). Since the input is wrapped in a form element, pressing the Enter key will trigger the form to submit. The call to `preventDefault()` will prevent the form from refreshing the page so a new item can be added to the list instead. +5. Continue by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input in a variable. 6. Next, empty the input element by setting its value to an empty string — `""`. 7. Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables. 8. Append the span and the button as children of the list item. From b1d3f7d3c0b757ced4a46f702c2a31d66b27c020 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Mon, 6 Oct 2025 17:40:57 +0200 Subject: [PATCH 6/7] Update index.md Co-authored-by: Dipika Bhattacharya --- .../core/scripting/dom_scripting/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md index 52b0c73ade06be4..dc069b9b0a0ae27 100644 --- a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md @@ -337,10 +337,10 @@ To complete the exercise, follow the steps below, and make sure that the list be 3. Create a [function](/en-US/docs/Learn_web_development/Core/Scripting/Functions) that will run in response to the button being clicked. 4. Inside the function body, start by calling [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault). Since the input is wrapped in a form element, pressing the Enter key will trigger the form to submit. The call to `preventDefault()` will prevent the form from refreshing the page so a new item can be added to the list instead. 5. Continue by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input in a variable. -6. Next, empty the input element by setting its value to an empty string — `""`. -7. Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables. -8. Append the span and the button as children of the list item. -9. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'. +6. Next, clear the input element by setting its value to an empty string (`""`). +7. Create three new elements — a list item ({{htmlelement('li')}}), a {{htmlelement('span')}}, and a {{htmlelement('button')}} — and store them in variables. +8. Append the span and button as children of the list item. +9. Set the text content of the span to the input value you saved earlier, and set the text content of the button to `Delete`. 10. Append the list item as a child of the list. 11. Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (`
  • ...
    • `). 12. Finally, use the [`focus()`](/en-US/docs/Web/API/HTMLElement/focus) method to focus the input element, ready for entering the next shopping list item. From de33f3329af7374dc385c9eaa49a22be08572998 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Mon, 6 Oct 2025 17:41:23 +0200 Subject: [PATCH 7/7] Update index.md Co-authored-by: Dipika Bhattacharya --- .../core/scripting/dom_scripting/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md index dc069b9b0a0ae27..f416ad9b7e53d6a 100644 --- a/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md +++ b/files/en-us/learn_web_development/core/scripting/dom_scripting/index.md @@ -341,9 +341,9 @@ To complete the exercise, follow the steps below, and make sure that the list be 7. Create three new elements — a list item ({{htmlelement('li')}}), a {{htmlelement('span')}}, and a {{htmlelement('button')}} — and store them in variables. 8. Append the span and button as children of the list item. 9. Set the text content of the span to the input value you saved earlier, and set the text content of the button to `Delete`. -10. Append the list item as a child of the list. -11. Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (`
  • ...
    • `). -12. Finally, use the [`focus()`](/en-US/docs/Web/API/HTMLElement/focus) method to focus the input element, ready for entering the next shopping list item. +10. Append the list item to the list. +11. Attach an event handler to the **Delete** button so that, when clicked, it removes the entire list item (`
  • ...
    • `). +12. Finally, use the [`focus()`](/en-US/docs/Web/API/HTMLElement/focus) method to focus the input element, so it's ready for entering the next shopping list item. ## Summary