Vetores em JS

Boa tarde, estou com esta atividade para resolver, mas não consigo, alguem pode me ajudar, tem que ser resolvido com vetores, da forma mais simples para entendimento. Agradeço desde ja !!!

Vou deixar em anexo os templates.

Fila:

Para execução desta atividade será fornecido o template html e js para adaptação:

	 filaADesenvolver.html (renomear para fila.html);

	 filaADesenvolver.js (renomear para fila.js).

	Necessário desenvolver para Fila:

	1 – Insere:

	 Inserir pessoa na fila e avisar que a pessoa foi inserida;

	 Checar se foi digitado um nome de pessoa. Caso não seja indicado um nome, não permitir inserir na fila e avisar o usuário que é

	necessário digitar um nome;

	 Ao inserir, atualizar a fila dos nomes (pré-implementado).

	2 – Remove:

	 Remover a pessoa da fila (Conceitualmente sai da fila a primeira pessoa);

	 Checar se a fila possui pessoas para remover. Caso não tenha mais pessoas na fila, avisar o usuário que a fila está vazia;

	 A cada remoção, atualizar a fila dos nomes (pré-implementado).

	3 – Apaga:

	 Limpa toda a fila.

	4 – A cada ação de inserir, remover ou apagar, deve-se setar o foco do cursor no campo para indicar um novo nome de pessoas.

	5 – Observar outros detalhes do enunciado.

	Faça um ambiente web para controlar Fila de Banco. Deve permitir inserir o nome de pessoas. Deve permitir sair pessoas da

	fila. Quando uma pessoa sair, o algoritmo deve realocar as pessoas na fila. Ao inserir uma pessoa na fila, deve checar se há

	vaga nessa fila, se não houver vaga, alertar a pessoa que deve voltar outra hora. Considerar uma Fila de 5 pessoas no

	máximo. Criar a possibilidade de listar as pessoas da fila.

	Primeiro que entra, Primeiro que sai.

	 

	 

	 

	Pilha:

	Para execução desta atividade será fornecido o template html e js para adaptação:

	 filaADesenvolver.html (renomear para pilha.html);

	 filaADesenvolver.js (renomear para pilha.js).

	Necessário desenvolver para Pilha:

	1 – Insere:

	 Inserir caixa na pilha e avisar que a caixa foi inserida;

	 Checar se foi digitado um número de caixa. Caso não seja indicado um numero, não permitir inserir na pilha e avisar o usuário que

	é necessário digitar um numero;

	 Ao inserir, atualizar a pilha dos números das caixas (pré-implementado).

	2 – Remove:

	 Remover a caixa da pilha (Conceitualmente sai da pilha a última caixa inserida);

	 Checar se a pilha possui caixas para remover. Caso não tenha mais caixas na pilha, avisar o usuário que a pilha está vazia;

	 A cada remoção, atualizar a pilha das caixas (pré-implementado).

	3 – Apaga:

	 Limpa toda a pilha.

	4 – A cada ação de inserir, remover ou apagar, deve-se setar o foco do cursor no campo para indicar um novo número de caixa.

	5 – Observar outros detalhes do enunciado.

	Faça um ambiente web para controlar Pilha de Caixas. Deve permitir inserir caixa na pilha. Deve permitir remover caixa da

	pilha. Ao inserir uma caixa na pilha, deve checar se há vaga nessa pilha (o teto é o limite), se não houver vaga, alertar a

	pessoa que deve guardar a caixa em outro lugar. Considerar uma Pilha de 5 caixas no máximo. Criar possibilidade de listar as

	caixas da pilha.

	 

	 

	 

	template JS :

	 

	var filaPessoas = [];

	function listaPessoas(){

	  //Entrada

	  var divListaRepeticao = document.getElementById("listaRepeticao");

	    

	  //Processamento 

	  var nroPessoas = filaPessoas.length;

	  var resultado = "";  

	  if  (nroPessoas == 0) {

	      document.getElementById('informacao').value = "A fila de pessoas está vazia!!!";

	  };      

	      

	  for (var contaPessoa = 0; contaPessoa < nroPessoas; contaPessoa++) {

	      resultado += "<tr><td>"+filaPessoas[contaPessoa]+"</td></tr>";

	  };  

	  //Saída  

	  divListaRepeticao.innerHTML = resultado;

	  return true;

	};

	function inserePessoa() {

	  //Entrada

	  var nomePessoa = document.getElementById('nomePessoa').value;

	     

	  //Processamento

	  

	  //Saída

	  return true;

	};

	function removePessoa() {

	  //Entrada

	  

	  //Processamento

	  

	  //Saída

	  return true;  

	};

	function limpaPessoas() {

	  //Entrada

	  

	  //Processamento

	  

	  //Saída

	  

	  return true;

	}; 

	 

	TEMPLATE HTML :

	 

	<!doctype html>

	<html lang="pt-br"> 

	  <head>

	    <title>Fila de Pessoas</title>

	    <meta charset="utf-8">

	    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">    

	    <script language=javascript type="text/javascript" src="filaADesenvolver.js"></script>    

	  </head>

	  <body onLoad="listaPessoas()">

	      <div class="container" style="padding-top: 20px">

	        <div class="row"> 

	          <div class="col-12"> 

	              <form class="form-control bg-faded">

	                <div class="col-12"> 

	                    <h1>Fila de Pessoas</h1>

	                </div>

	                <div class="col-12">               

	                    <div class="form-group row" id="idAdicionaBloco">

	                        <label for="nomePessoa" class="col-1 col-form-label">Nome</label>

	                        <input class="col-4 form-control" type="text" id="nomePessoa" placeholder="Nome da Pessoa a inserir">

	                    </div>

	                </div>

	                <div class="col-12">                    

	                    <div class="form-group">

	                        <button type="button" class="btn btn-success" id="insere" onclick="inserePessoa()">Insere</button>

	                        <button type="button" class="btn btn-danger" id="apaga" onclick="removePessoa()">Remove</button>

	                        <button type="button" class="btn btn-warning" id="limpa" onclick="limpaPessoas()">Limpa</button>

	                    </div>

	                </div>

	                <div class="row">

	                    <div class="col-12">

	                        <div class="alert alert-info">

	                            <strong>Informação!</strong>

	                            <input class="form-control" type="text" id="informacao" placeholder="Bem Vindo!" readonly>

	                        </div>

	                    </div>

	                </div>    

	                <div class="col-12">

	                    <div class="table-responsive">

	                        <table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-hover table-striped">

	                            <thead>

	                                <tr>

	                                    <th>Pessoas</th>                                       

	                                </tr>

	                            </thead>

	                            <tbody id=listaRepeticao>

	                             <!-- Aqui vamos criar linhas dinamicamente!  

	                                <tr>

	                                    <td>Elementos...</td>

	                                </tr>

	                             -->

	                            </tbody>

	                        </table>

	                    </div>

	                </div>

	            </form>          

	          </div>

	        </div>

	      </div>

	  </body>

	</html>