peteplays · June 7, 2019 18:23
diff --git a/the-todo-list.html b/the-todo-list.html
 <html>
 <head>
  <title>The To Do List</title>
  <style>
    #container {
      margin: 20px auto;
      width: 213px;
    }

    h1 {
      text-align: center;
    }

    ul {
      border: 2px solid #333;
      border-radius: 4px;
      padding: 10px;
    }

    li {
      list-style: none;
    }

    li:hover {
      cursor: pointer;
    }

    li::before {
      content: '\2610';
      padding-right: 5px;
    }

    li.completed {
      text-decoration: line-through;
    }

    li.completed::before {
      content: '\2611';
      padding-right: 5px;
    }

    .completed-message {
      width: 200px;
      background-color: #16648b;
      border: 2px solid #6bb5e2;
      color: #eee;
      font-weight: 500;
      border-radius: 4px;
      padding: 10px 5px;
      text-align: center;
      opacity: 0;
      animation-duration: 1.5s;
      animation-name: slideDownUp;
      cursor: default;
    }

    @keyframes slideDownUp {
      0% {
        opacity: 0;
        transform: translateY(-30px);
      }
      25%,
      75% {
        opacity: 1;
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        transform: translateY(-10px);
      }
    }
  </style>
 </head>

 <body>
  <div id="container">
    <h1>The To Do List</h1>
    <ul>
      <li>Walk the dog</li>
      <li>Learn Piano</li>
      <li>Practice Yoga</li>
      <li>Code for one hour</li>
    </ul>
  </div>

  <script>
    const elementIdArr = [];

    function removeCompletedMessage() {
      if (elementIdArr.length > 1) {
        const id = elementIdArr[0];
        const elementIndex = elementIdArr.indexOf(id);
        const elementToRemove = document.getElementById(id);

        if (elementIndex !== -1 && elementToRemove) {
          elementToRemove.remove();
          elementIdArr.splice(elementIndex, 1);
        }
      }
    }

    (function () {
      const container = document.getElementById('container');
      const todoItems = container.getElementsByTagName('li');

      [...todoItems].forEach((item) => {
        item.addEventListener('click', (event) => {
          event.target.classList.toggle('completed');

          if (event.target.classList.contains('completed')) {
            const p = document.createElement('p');
            p.classList.add('completed-message');
            p.innerText = event.target.innerText;
            p.id = `p-${Date.now()}`;
            container.appendChild(p);

            elementIdArr.push(p.id);
            removeCompletedMessage();
          }
        });
      });
    }())
  </script>
 </body>
 </html>
	<html>
	<head>
	<title>The To Do List</title>
	<style>
	#container {
	margin: 20px auto;
	width: 213px;
	}

	h1 {
	text-align: center;
	}

	ul {
	border: 2px solid #333;
	border-radius: 4px;
	padding: 10px;
	}

	li {
	list-style: none;
	}

	li:hover {
	cursor: pointer;
	}

	li::before {
	content: '\2610';
	padding-right: 5px;
	}

	li.completed {
	text-decoration: line-through;
	}

	li.completed::before {
	content: '\2611';
	padding-right: 5px;
	}

	.completed-message {
	width: 200px;
	background-color: #16648b;
	border: 2px solid #6bb5e2;
	color: #eee;
	font-weight: 500;
	border-radius: 4px;
	padding: 10px 5px;
	text-align: center;
	opacity: 0;
	animation-duration: 1.5s;
	animation-name: slideDownUp;
	cursor: default;
	}

	@keyframes slideDownUp {
	0% {
	opacity: 0;
	transform: translateY(-30px);
	}
	25%,
	75% {
	opacity: 1;
	transform: translateY(0);
	}
	100% {
	opacity: 0;
	transform: translateY(-10px);
	}
	}
	</style>
	</head>

	<body>
	<div id="container">
	<h1>The To Do List</h1>
	<ul>
	<li>Walk the dog</li>
	<li>Learn Piano</li>
	<li>Practice Yoga</li>
	<li>Code for one hour</li>
	</ul>
	</div>

	<script>
	const elementIdArr = [];

	function removeCompletedMessage() {
	if (elementIdArr.length > 1) {
	const id = elementIdArr[0];
	const elementIndex = elementIdArr.indexOf(id);
	const elementToRemove = document.getElementById(id);

	if (elementIndex !== -1 && elementToRemove) {
	elementToRemove.remove();
	elementIdArr.splice(elementIndex, 1);
	}
	}
	}

	(function () {
	const container = document.getElementById('container');
	const todoItems = container.getElementsByTagName('li');

	[...todoItems].forEach((item) => {
	item.addEventListener('click', (event) => {
	event.target.classList.toggle('completed');

	if (event.target.classList.contains('completed')) {
	const p = document.createElement('p');
	p.classList.add('completed-message');
	p.innerText = event.target.innerText;
	p.id = `p-${Date.now()}`;
	container.appendChild(p);

	elementIdArr.push(p.id);
	removeCompletedMessage();
	}
	});
	});
	}())
	</script>
	</body>
	</html>