Adding names to a list

1

In this exercise, I get users to add their names to a petition list.

First Option We update user with the total number of people on the list by accessing the array length and displaying the number in a sentence(preferred method).

Second Option The list is an order list so user can know the total number of people on the list that way. Also it good for a members of an org who members would like to know who’s on the list too.

What I need help with? Please as the code that allows only 10 name on the list. And info user the list is full using the id = update one the it reaches 10.

2

Please show the code you have tried so far. We are not here just to write code for you, but to help you write it.

You can check the array length and update the DOM with the message, then return out of the function before it updates the array again.

3

I included the codepen link in the post. I was abled to get the list to freeze at the 10th entries using Object.freeze() method and updating user that “the list is full”.

List Total increases using array.length as user add their names. but I need it to show a decreasing number of spots as well. Ex : List Total: 2, Spot ramaining: 8. since the max is 10.



//-----------------------------
var array = [];
// var 
function addPerson(){
  
 array.push(document.getElementById('user-input').value);
  
  
  document.getElementById('list-total').innerHTML = array.length;
  console.log(array.length);
  updateList();
  }

// open an order list 

function updateList() {
 const list = document.getElementById('slide-list');
  list.innerHTML = ""; // clear the list
  
// create loop
  for (const item of array){
    const listItem = document.createElement('li');
     listItem.textContent = item;
  list.appendChild(listItem);   
 }
  
 for (i = 10; i <= array.length; i++){
  array.length = 9;
    Object.freeze(list);
   document.getElementById('update').textContent = "The list is full.";
} 

};


<div class="form-group">
  <input type="email" id="user-input" >
  <button type="submit" onClick="addPerson()">Add Your Name</button>
</div>
<p id="update"></p>
<p>List Total: <span id="list-total"> </span></p>
<ol id="slide-list"> 
  
</ol>
4

I just realized that the object.freeze(list) wasn’t what causes the list to stop at 10. I was the loop that specified the list max.

for (i = 10; i <= array.length; i++){
  array.length = 9;
    //Object.freeze(list);
   document.getElementById('update').textContent = "The list is full.";
} 

};
5

You do not need a loop.

In addPerson check the length of the array, if it is 10 set the update message content and return out of the function. Add this logic before you push to the array.