TODO without React

In this example below you will see how to do a TODO without React with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rricard, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rricard ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>TODO without React</title>
  
  
  
  
  
</head>

<body>

  <div id="app"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rricard/todo-without-react-aBavxG */
function Todo(_ref) {
  var todo = _ref.todo,
      key = _ref.key,
      onToggle = _ref.onToggle;

  var onToggleEvent = '__Todo_' + key + '_onCheckEvent';
  window[onToggleEvent] = onToggle;
  return '\n    <li>\n      <input\n        type="checkbox"\n        onclick="' + onToggleEvent + '()"\n        ' + (todo.done ? 'checked' : '') + '\n      />\n      ' + (todo.done ? '<span style="text-decoration: line-through">' + todo.title + '</span>' : todo.title) + '\n    </li>\n  ';
}

function TodoApplication() {
  return '\n    <ul>\n      ' + todos.map(function (todo, key) {
    return Todo({
      todo: todo,
      key: key,
      onToggle: function onToggle() {
        todos[key].done = !todos[key].done;
        render();
      }
    });
  }).join('') + '\n    </ul>\n  ';
}

var todos = [{ title: 'Write a TODO app without React', done: true }, { title: 'Write the rest of the article', done: false }];

function render() {
  document.getElementById('app').innerHTML = TodoApplication();
}

render();

Comments