zimejin/simpleNotetaker.html

## simpleNotetaker.html
<!DOCTYPE html>
<html lang="en">

<body>
  <html>

  <head>
    <title>Note Taker</title>
  </head>

  <body>
    <div class="content">
      <p>
        <label>Add New Note</label>
        <input id="new-notes" type="text">
        <button id="add-Button">Add</button>
      </p>

      <h3>Your Notes</h3>
      <ul id="list-of-notes">

      </ul>
    </div>
  </body>

  </html>
  <script>
    const note = document.getElementById("new-notes");
    const addBtn = document.getElementById("add-Button");
    const list_of_notes = document.getElementById("list-of-notes");

    const createNoteElement = (_note) => {
      let li = document.createElement("li");
      let e_Input = document.createElement("input");
      let e_Btn = document.createElement("button");
      let delBtn = document.createElement("button");
      let label = document.createElement("label")

      return initialize_and_Append({ _note: _note, list: li, editInput: e_Input, editBtn: e_Btn, delBtn: delBtn, label: label });
    }

    const initialize_and_Append = ({ _note, list, editInput, editBtn, delBtn, label } = {}) => {
      editInput.value = _note;
      editInput.type = "text";
      editBtn.innerText = "Edit";
      delBtn.innerText = "Delete";
      editBtn.className = "edit";
      delBtn.className = "delete";

      list.appendChild(label);
      list.appendChild(editInput);
      list.appendChild(editBtn);
      list.appendChild(delBtn);

      return list;
    }

    const bindEvents = (list) => {
      const editButton = list.querySelector("button.edit");
      const deleteButton = list.querySelector("button.delete");

      // Add event listeners
      (editButton.onclick = editNote);
      (deleteButton.onclick = deleteNote);
    }

    const addNote = () => {
      var li = createNoteElement(note.value);
      list_of_notes.appendChild(li);
      bindEvents(li);
    }

    (addBtn.onclick = addNote);

    const editNote = (source) => {

      let li = source.target.parentNode;

      let input = li.querySelector('input[type=text]');

      let status = li.classList.contains("edit");

      if (status) {
        input.value = input.value
        return;
      }

      li.classList.toggle("editInput");
    };

    const deleteNote = (source) => {
      let li = source.target.parentNode;
      let ul = li.parentNode;
      ul.removeChild(li);
    };

  </script>
  <style>
    ul li input[type=text] {
      pointer-events: none;
    }

    ul li.editInput input[type=text] {
      pointer-events: all;
    }
  </style>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<body>
	<html>

	<head>
	<title>Note Taker</title>
	</head>

	<body>
	<div class="content">
	<p>
	<label>Add New Note</label>
	<input id="new-notes" type="text">
	<button id="add-Button">Add</button>
	</p>

	<h3>Your Notes</h3>
	<ul id="list-of-notes">

	</ul>
	</div>
	</body>

	</html>
	<script>
	const note = document.getElementById("new-notes");
	const addBtn = document.getElementById("add-Button");
	const list_of_notes = document.getElementById("list-of-notes");

	const createNoteElement = (_note) => {
	let li = document.createElement("li");
	let e_Input = document.createElement("input");
	let e_Btn = document.createElement("button");
	let delBtn = document.createElement("button");
	let label = document.createElement("label")

	return initialize_and_Append({ _note: _note, list: li, editInput: e_Input, editBtn: e_Btn, delBtn: delBtn, label: label });
	}

	const initialize_and_Append = ({ _note, list, editInput, editBtn, delBtn, label } = {}) => {
	editInput.value = _note;
	editInput.type = "text";
	editBtn.innerText = "Edit";
	delBtn.innerText = "Delete";
	editBtn.className = "edit";
	delBtn.className = "delete";

	list.appendChild(label);
	list.appendChild(editInput);
	list.appendChild(editBtn);
	list.appendChild(delBtn);

	return list;
	}

	const bindEvents = (list) => {
	const editButton = list.querySelector("button.edit");
	const deleteButton = list.querySelector("button.delete");

	// Add event listeners
	(editButton.onclick = editNote);
	(deleteButton.onclick = deleteNote);
	}

	const addNote = () => {
	var li = createNoteElement(note.value);
	list_of_notes.appendChild(li);
	bindEvents(li);
	}

	(addBtn.onclick = addNote);

	const editNote = (source) => {

	let li = source.target.parentNode;

	let input = li.querySelector('input[type=text]');

	let status = li.classList.contains("edit");

	if (status) {
	input.value = input.value
	return;
	}

	li.classList.toggle("editInput");
	};

	const deleteNote = (source) => {
	let li = source.target.parentNode;
	let ul = li.parentNode;
	ul.removeChild(li);
	};

	</script>
	<style>
	ul li input[type=text] {
	pointer-events: none;
	}

	ul li.editInput input[type=text] {
	pointer-events: all;
	}
	</style>
	</body>

	</html>