<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.";
}
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.