Assessment requested for Loop 2 & 3

MDN Learn
#1

Hi there, would anyone be able to help with the assignments Test Your Skills: Loops
Loop Practice : 2?

This one was a bit confusing to me, and I actually think I solved it while fixing it up in codepen. Please let me know if its working efficiently!

Also if anyone would like to assess Loop Practice: 3 to see how I did, it would also be appreciated!

#2

Hello @yourfriendra

you doing great well done

  1. for loop 2 i notice you add some extra part like input and button and handled the letter case well done
    if you want to push it forward you would set

you code remove the else part from your loop

else {para.textContent = "Name not Found"}

and put para.textContent = "Name not Found"; it before the loop so it be like the default value and if the loop finished without finding the name it be already set

but you doing really great

  1. for loop 3 you should stop at 2 not 0 also try to remove the extra , that will show up at the end

hope that help and have a nice day :slight_smile:

2 Likes
#3

Hi there @yourfriendra and welcome to the community :tada:

I really like that you have pushed yourself here and made the assessment your own. A couple of notes on the code. Let’s start with the HTML.

<section class="preview">
  <label for="searchName">Search Name for Phone Number: </label><br>
  <input type="text" id="searchName"><br>
  <button id="search">Search</button>
  <br>
  <p id="result"></p>

</section>

I would update this to the following:

<section class="preview">
  <form name="search" id="search-form" action="/" method="get">
    <fieldset>
      <legend>Search for a phone number</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" required />
     <button type="submit" id="search">Search</button>
    </fieldset>
  </form>

  <p id="result"></p>
</section>

I start by wrapping your form controls in a form element which is generally how you would markup this kind of functionality. I then use a fieldset element to group the related input elements. Here we only have one input element but, if you for example also had a surname input element, you would group it together with the name element using the same fieldset.

I then add a legend to the fieldset. The legend describes what our form is about, essentially providing a heading for the form. I then add the label and input. I am glad to see you associated the two with each other using the for attribute and id. This is great for accessibility and a best practice. :tada:

I also added the required attribute to the input element. This will stop the form from being submitted if the input field is empty.

I then add the button element but, I add a type attribute and set it to submit. We want the button to submit the form when it is clicked. Outside the form we then have the container element for your result.

Also, update the CSS to the following.

* {
  box-sizing: border-box;
}

fieldset {
  border: 0;
}

p {
  color: purple;
  margin: 0.5em 0;
}

Now onto the JavaScript! You no longer use the name variable and so we can safely remove it.

const form = document.getElementById("search-form");
form.addEventListener("submit", search);

We now get the form element instead of the search input. We attach the event listener to the form and listen for the submit event. This means that the search function will be called if you press enter inside the input element and also when you click the button.

function search(event) {
      event.preventDefault();

We update the search function to take the event as an argument and then call preventDefault on the event. This stops the browser from taking the default action when submitting the form and hands control to us.

Next we get the value from the input next:

const searchTerm = document.getElementById("name").value;

Next we update our loop a little bit:

for (const element of phonebook) {
    if (element.name.toLowerCase() === searchTerm.toLowerCase()) {
      para.textContent = `${element.name} : ${element.number}`;
      break;
    } else {
      para.textContent = "Name not found";
    }
  }

Instead of using slice and string concatenation we lower case both values when we compare them to each other. Lastly, we output our search result:

const section = document.querySelector("section");
section.appendChild(para);

Again, great work! I hope the above will add to what you have already learned.

–
Schalk
Staff Community Manager - MDN Web Docs

1 Like