JSFiddle - React, Tailwind, and code Playground

by HoffZ

HTML

<div id="todo-app">
  <h1>TODO List</h1>
  <input type="text" id="new-todo" placeholder="Add new todo...">
  <ul id="todo-list"></ul>
</div>

JavaScript

$(function() {


// Define variables to store todo list and input field.
var todoList = [];
var newTodoInput = $('#new-todo');

// Function to add new todo item to the list.
function addTodo() {
  // Get the value of the input field.
  var newTodo = newTodoInput.val();
  // Add the new todo item to the list.
  todoList.push(newTodo);
  // Clear the input field.
  newTodoInput.val('');
  // Render the updated todo list.
  renderTodoList();
}

// Function to render the todo list.
function renderTodoList() {
  // Clear the existing list items.
  $('#todo-list').empty();
  // Loop through each todo item and add it to the list.
  for (var i = 0; i < todoList.length; i++) {
    var todoItem = $('<li>').text(todoList[i]);
    $('#todo-list').append(todoItem);
  }
}

// Attach event listener to add button.
$('#new-todo').on('keydown', function(event) {
  if (event.keyCode === 13) { // keyCode 13 is Enter key
    addTodo();
  }
});

// Render the initial todo list.
renderTodoList();
});