From 57149fecdbff668f9176ed3bf3ae4a3358dac60e Mon Sep 17 00:00:00 2001
From: Yatrik Patel <35569392+ytrkptl@users.noreply.github.com>
Date: Tue, 16 Jan 2024 02:50:06 -0500
Subject: [PATCH] fix(curriculum): updating directions and code example for
 step 49 calorie counter (#53199)

Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
 .../63c218c028c56a411b2a379a.md               | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
index c581ea2931e..95d71b68743 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
@@ -9,22 +9,29 @@ dashedName: step-49
 
 To see your new HTML content for the `targetInputContainer`, you will need to use the <dfn>innerHTML</dfn> property.
 
-The `innerHTML` property sets or returns the HTML content inside an element. Here is an example of how to use it:
+The `innerHTML` property sets or returns the HTML content inside an element.
+
+Here is a `form` element with a `label` and `input` element nested inside.
 
 ```html
-<div id="container">
-  <p>Example paragraph</p>
-</div>
+<form id="form">
+  <label for="first-name">First name</label>
+  <input id="first-name" type="text">
+</form>
 ```
 
+If you want to add another `label` and `input` element inside the form, then you can use the `innerHTML` property as shown below:
+
 ```js
-const container = document.getElementById("container");
-container.innerHTML += `
-  <p>adding new content</p>
+const formElement = document.getElementById("form");
+const formContent = `
+  <label for="last-name">Last name</label>
+  <input id="last-name" type="text">
 `;
+formElement.innerHTML += formContent;
 ```
 
-Add your new `HTMLString` to the `targetInputContainer` by using the `innerHTML` property. Remember to use the `+=` operator to add to the existing HTML instead of replacing it.
+Use the addition assignment operator `+=` to append your `HTMLString` variable to `targetInputContainer.innerHTML`.
 
 # --hints--