4

Realicé el siguiente código el cual me funciona perfecto... pero me exigen el uso de jQuery. Aún estoy aprendiendot, así que me es difícil cambiarlo.

He logrado cambiar solo el alert inicial pero no logro hacer que funcione guiándome con lo encontrado en la api.

const inputBox = document.getElementById("input-box");
const Container = document.getElementById("listContainer");

function addTask() {
  if (inputBox.value == '') {
    alert("Debes escribir una tarea");
  } else {
    let li = document.createElement("li");
    li.innerHTML = inputBox.value;
    Container.appendChild(li);
    let span = document.createElement("span");
    span.innerHTML = "\u00d7";
    li.appendChild(span);
  }
  inputBox.value = '';
  saveData();
}
// estan son las clases y funciones que estoy ejecutando


<div class="taskContainer">
  <div class="taskApp">
    <h2>Lista de Tareas <img src="images/icon.png"></h2>
    <div class="newTask">
      <input type="text" id="input-box" placeholder="agregar Tarea">
      <button onclick="addTask()">Agregar</button>
    </div>
    <ul id="listContainer">
    </ul>

3
  • Supongo que puedes reemplazar todos los selectores "getElement..." y los "createElements", por sus corresponientes funciones $("#id") ... .append... etc Commented el 2 jun. 2023 a las 20:29
  • 2
    Esto me recuerda a "no es suficiente jQuery" :)
    – padaleiana
    Commented el 2 jun. 2023 a las 20:47
  • Si es tema de trabajo y te "exigen" el uso de JQuery, yo iría viendo otras ofertas de trabajo y preparando el CV. Ojo, esto es una opinión totalmente personal. Commented el 3 jun. 2023 a las 11:56

2 respuestas 2

2

Te dejo el ejemplo comentado con la sintaxis de jQuery. Si tienes algua duda puntual sobre alguna de las funciones, deja un comentario y con gusto intentaré resolverla.

function addTask() {
  //Capturar el value de input-box
  let inputBox = $("#input-box").val();
  //Validar si llega vacío
  if (inputBox == '') {
    alert("Debes escribir una tarea");
  } else {
    //Maquetar el li con el span incluido
    let elemento = "<li>" + inputBox + " <span>\u00d7</span></li>";
    //Agregar el elemento a la lista
    $("#listContainer").append(elemento);
  }
  //Vaciar el value de input-box
  $("#input-box").val('');
  //saveData();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="taskContainer">
  <div class="taskApp">
    <h2>Lista de Tareas <img src="images/icon.png"></h2>
    <div class="newTask">
      <input type="text" id="input-box" placeholder="agregar Tarea">
      <button onclick="addTask()">Agregar</button>
    </div>
    <ul id="listContainer">
    </ul>
  </div>
</div>

1

Puedes utilizar un identificador en tu botón para capturarlo desde jQuery y especificar que si se hizo clic en el botón, ejecute la función addTask():

<button id="add-button">Agregar</button>

Y en jQuery:

$('#add-button').click(function() {
  addTask();
});

Respecto con lo demás, te adjunto un ejemplo que hace exactamente lo mismo que el código JavaScript que tenías hecho (explicación en comentarios):

$('#add-button').click(function() {
  addTask();
});

function addTask() {
  // vamos a capturar a tus elementos
  const inputBox = $('#input-box');
  const container = $('#listContainer');
  // si el valor de tu input es vacío, muestro el alert
  if (inputBox.val() === '') {
    alert("Debes escribir una tarea");
  } else {
    // de lo contrario, creamos una nueva etiqueta <li>, que contendrá como texto el valor de tu input.
    let li = $('<li>').text(inputBox.val());
    // e insertamos ese elemento al contenedor "container".
    container.append(li);
    // ahora creamos un span, que tendrá como texto el simbolo "X".
    let span = $('<span>').html('\u00d7');
    // e insertamos ese elemento al nuevo "li" creado.
    li.append(span);
  }
  // y por último borramos el valor del input.
  inputBox.val('');
  // saveData();
}
<div class="taskContainer">
  <div class="taskApp">
    <h2>Lista de Tareas <img src="images/icon.png"></h2>
    <div class="newTask">
      <input type="text" id="input-box" placeholder="agregar Tarea">
      <button id="add-button">Agregar</button>
    </div>
    <ul id="listContainer"></ul>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.