Question

Convert your "To Do List" application to use Hibernate in order to save its data. Then add a web UI, so that it runs on the Tomcat web server. You will have to add JSP code for each of the web pages (show to-do list, add a to-do item, delete a to-do item). Your to-do-list application should already be well structured, separating the back-end from the front-end, so that adding a web UI is just a matter of adding a new front-end which would call the existing back-end.

Here's my code so far:

package assignment1;
import java.util.ArrayList;
import java.util.Hashtable;
import java.util.LinkedList;
import java.util.Random;
public class assignment4 {

  
public static void main(String[] args) {
ArrayList_Op();
LinkedList_Op();
HashTable_Op();
}

private static void ArrayList_Op() {
ArrayList<Integer> arr_list = new ArrayList<>();
Random rand = new Random();
for(int i=0; i<200000; i++)
{
arr_list.add(rand.nextInt(200000));
}
  
  
for(int i=0; i<200000; i++)
{
arr_list.remove(0);
}
  
}

private static void LinkedList_Op() {

LinkedList<Integer> list = new LinkedList<Integer>();
Random rand = new Random();
for(int i=0; i<200000; i++)
{
list.add(rand.nextInt(200000));
}
  
  
for(int i=0; i<200000; i++)
{
list.remove(0);
}
}

private static void HashTable_Op() {

Hashtable<Integer, Integer> hash = new Hashtable<>();
Random rand = new Random();
  
for(int i=0; i<200000; i++)
{
hash.put(i, rand.nextInt(200000));
}
  
for(int i=0; i<200000; i++)
{
hash.remove(i);
}
}
  
}

We're using Apache Web server, its already been downloded on the computer.

Answer 1

// This is the array that will hold the todo list items
let todoItems = [];

// This function will create a new todo object based on the
// text that was entered in the text input, and push it into
// the `todoItems` array
function addTodo(text) {
const todo = {
text,
checked: false,
id: Date.now(),
};

todoItems.push(todo);
console.log(todoItems);
}

// Select the form element
const form = document.querySelector('.js-form');
// Add a submit event listener
form.addEventListener('submit', event => {
// prevent page refresh on form submission
event.preventDefault();
// select the text input
const input = document.querySelector('.js-todo-input');

// Get the value of the input and remove whitespace
const text = input.value.trim();
if (text !== '') {
addTodo(text);
input.value = '';
input.focus();
}
});

function renderTodo(todo) {
// Select the first element with a class of `js-todo-list`
const list = document.querySelector('.js-todo-list');

// Use the ternary operator to check if `todo.checked` is true
// if so, assign 'done' to `isChecked`. Otherwise, assign an empty string
const isChecked = todo.checked ? 'done': '';
// Create an `li` element and assign it to `node`
const node = document.createElement("li");
// Set the class attribute
node.setAttribute('class', `todo-item ${isChecked}`);
// Set the data-key attribute to the id of the todo
node.setAttribute('data-key', todo.id);
// Set the contents of the `li` element created above
node.innerHTML = `
<input id="${todo.id}" type="checkbox"/>
<label for="${todo.id}" class="tick js-tick"></label>
<span>${todo.text}</span>
<button class="delete-todo js-delete-todo">
<svg><use href="#delete-icon"></use></svg>
</button>
`;

// Append the element to the DOM as the last child of
// the element referenced by the `list` variable
list.append(node);
}