ARRAYS 4

ACTIVIDADES A REALIZAR

Crea un documento HTML, con el codigo JavaScript asociado que permitan gestionar un listado de mascotas. Es obligatorio que el código sea documentado y seguir buenas prácticas de programación.

Puedes utilizar el codigo base para crear el documento.

El HTML debe incluir:

  • Un input para capturar el nombre de la mascota
  • Un conjunto de 4 botones: 'Añadir al inicio', 'Añadir al final', 'Retirar del inicio' y 'Retirar del final'
  • Un botón adicional para eliminar todas las mascotas
  • Un párrafo para mostrar el listado actual de mascotas

El JavaScript debe:

  • Utilizar un array global llamado 'listadoMascotas' para almacenar los nombres de las mascotas
  • Impedir la adición de nombres duplicados
  • Mostrar un alert cuando se intenten retirar elementos del listado vacío
  • Registrar un mensaje en la consola con el nombre de la función utilizada cada vez que se llama a una función utilizando console.log()
  • Utilizar los siguientes métodos de array:
    • include() para comprobar existencia.
    • unshift() para añadir elementos al inicio del array
    • push() para añadir elementos al final del array
    • shift() para retirar elementos del inicio del array
    • pop() para retirar elementos del final del array
  • Utilizar el controlador eventos onclick para asociar las funciones a los botones

Procura no copiar directamente la respuesta desde una IA

CODIGO BASE 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">      
</head>
  <body style="color:white;background-color:black">
  <h4>Codigo para pruebas</h4>
  <p id="campo_para_mostrar_datos"></p>
  <!-- "campo_para_mostrar_datos" es como se identifica el campo  -->    
  <!-- Puedes modificar el id para tus necesidades   -->


  <input 
    type="text" 
    id="campo_para_ingresar_datos" 
    placeholder="Ingrese informacion">
  <!-- "campo_para_ingresar_datos" es como se identifica el campo  -->    
  <!-- Puedes modificar el id para tus necesidades   -->

  <button onclick="fn_Presionar_Boton()">
    Mensaje en el boton
  </button>
  <!-- Cada vez que se presiona el boton se llama a la fn_Presionar_Boton  -->  
  <!-- Puedes modificar el nombre de la funcion "asignada" para tus necesidades   -->

  <script>
    // En esta sección se copia/escribe el codigo JavaScript

    // Codigo de ejemplo al presionar el boton
    function fn_Presionar_Boton()
    {
      console.log("Iniciando fn_Presionar_Boton");

      alert("Hago algo al presionar el boton");

      //Codigo para recuperar 
      let info_campo = document.getElementById("campo_para_ingresar_datos").value;
      info_campo = info_campo.trim(); // Elimina los espacios en blanco

      let longitud_campo = info_campo.length; // Determina la longitud del campo.
      if (longitud_campo==0)  // Verifica el campo tenga texto
      { alert("No ingresaste nada"); }
      else
      { 
        alert ("Ingresaste ["+info_campo+"] con longitud ["+longitud_campo+"]" ) 
        //Codigo para copiar el contenido dentro del campo de texto

        document.getElementById("campo_para_mostrar_datos").textContent = "Información ingresada : "+info_campo;
      }

    }//fin de function fn_Presionar_Boton()


  </script>
  </body>
</html>