<body>
  

<div class="container">
<h1>
Add fake names  to the List and see how it works.</h1>
<div class="form-group">
  <input type="email" id="user-input"class="form-control" placeholder="First Name">
  <button type="submit" onClick="addPerson()" class="form-control btn">Add Your Name</button>
</div>
<div class="list-container">



<h3>List Total: <span id="list-total"> 0 </span> </h3>
  <h4 id="update"></h4>
  <hr>
<ol id="slide-list">

</ol>

</div>
</div>
  
  </body>
*, ::before, ::after {
  margin: 0;
  box-sizing: border-box;
}


ol, li{
  margin-top: 1rem;
  margin-left: 0;
}
li{ padding:0; margin-left: -1.5rem;}
.container{
   width: 90%;
   margin: 3rem auto;
}

.form-group{
  
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding: 2rem;
  border: .01rem solid #222;
}
input{
font-size: 1rem;
}

.form-control{
   display: block;
  width: 100%;
  height: 2.375rem;
  padding: 0.375rem 0.75rem;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 1rem;
}

.btn{
  
 background-color: #222;
  border: 1px solid #222;
  color: white;
 
  
}
.list-container{
  padding: 2rem;
  border: 1px solid #222;
  border-top: none;
}

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

// 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 = 3; i <= array.length; i++){
  array.length = 2;
   document.getElementById('update').textContent = "The list is full.";
} 

};
 


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.