TODO without React

Tutorials of (Todo without react) by Robin ricard

<!DOCTYPE html>
<html >
<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/ */
/* Downloaded from https://www.codeseek.co/ */
'use strict';

function Todo(_ref) {
  var todo = _ref.todo;
  var key = _ref.key;
  var 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();

This awesome code ( TODO without React ) is write by Robin Ricard, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Robin Ricard