thanapongp

export function isRangesOverlap(
    firstRange: [Date, Date],
    secondRange: [Date, Date]
): boolean {
    const firstRangeStart = firstRange[0].getTime();
    const secondRangeStart = secondRange[0].getTime();

    const firstRangeEnd = firstRange[1].getTime();
    const secondRangeEnd = secondRange[1].getTime();

thanapongp

tell application "System Events"
	repeat
		repeat until (exists window 1 of application process "Notification Center")
			delay 1
			log "Wait for notification center"
		end repeat
		if exists button "Accept" of window 1 of application process "Notification Center" then
			log "Answering"
			click button "Accept" of window 1 of application process "Notification Center"
			delay 3

thanapongp

performEdit(item, editInput) {
  const itemNameEl = item.getElementsByClassName('item-name')[0];
  const editButtonEl = item.getElementsByClassName('edit-button')[0];

  if (editInput.value.trim().length !== 0) {
    itemNameEl.innerHTML = editInput.value.trim();
  }

  editInput.remove();

thanapongp

addNewItem(itemName) {
  //...

  item.getElementsByClassName('edit-button')[0].addEventListener('click', () => this.editItem(item));
}

editItem(item) {
  const oldItemName = item.getElementsByClassName('item-name')[0].innerHTML.trim();

  const editInput = htmlToElement(`

thanapongp

editItem(item, oldItemName) {
  const editInput = htmlToElement(`
    <input type="text" value="${oldItemName}" placeholder="Enter new item name" class="bg-gray-800 px-4 py-2 rounded block w-full text-gray-200 font-light">
  `);

  editInput.addEventListener('keyup', e => {
    if (e.keyCode === 13) {
      this.performEdit(item, editInput)
    }
  });

thanapongp

editItem(item, oldItemName) {
  const editInput = htmlToElement(`
    <input type="text" value="${oldItemName}" placeholder="Enter new item name" class="bg-gray-800 px-4 py-2 rounded block w-full text-gray-200 font-light">
  `);

  const itemNameEl = item.getElementsByClassName('item-name')[0];
  const editButtonEl = item.getElementsByClassName('edit-button')[0];

  insertElementAfter(editInput, itemNameEl);

thanapongp

export function insertElementAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

thanapongp

addNewItem(itemName) {
  //...
  const item = htmlToElement(`
      ...
  
      <button class="edit-button">
        <svg class="stroke-current text-gray-600 h-4" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
        </svg>

thanapongp

export function htmlToElement(html) {
  const template = document.createElement('template');
  template.innerHTML = html.trim();
  return template.content.firstElementChild;
}

thanapongp

import { htmlToElement } from './utils';

export default class App {
  //...

  addNewItem(itemName) {
    //...

    const item = htmlToElement(`
    <li class="flex py-4 border-b border-gray-900 item"> <!-- add class 'item' -->