cferdinandi/react-todos-with-reef.html

## react-todos-with-reef.html
<!DOCTYPE html>
<html>
<head>
	<title>React Todos in Vanilla JS</title>
	<style type="text/css">
		body {
			margin: 0 auto;
			max-width: 40em;
			width: 88%;
		}

		label,
		input {
			display: block;
		}

		input {
			margin-bottom: 1em;
		}
	</style>
</head>
<body>

	<h1>React Todos in Vanilla JS</h1>

	<ul id="todo-list"></ul>

	<form id="add-todos">
		<label for="new-todo">What needs to be done?</label>
		<input id="new-todo">
		<button>
			Add #<span id="add-count"></span>
		</button>
	</form>

	<script src="https://cdn.jsdelivr.net/npm/reefjs/dist/reef.min.js"></script>
	<script>
		//
		// Variables
		//

		var addTodos = document.querySelector('#add-todos');


		//
		// Methods
		//

		/**
		 * Save todos to localStorage
		 */
		var saveTodos = function () {
			localStorage.setItem('todos', JSON.stringify(store.data.todos));
		};

		/**
		 * Load todos from localStorage
		 */
		var loadTodos = function () {
			var saved = localStorage.getItem('todos');
			store.data.todos = saved ? JSON.parse(saved) : [];
		};

		/**
		 * Handle submit events
		 * @param  {Event} event The event object
		 */
		var submitHandler = function (event) {

			// Stop the form from reloading the page
			event.preventDefault();

			// Get the todo item field
			var text = addTodos.elements['new-todo'];

			// If there's no text in the field, do nothing
			if (!text || !text.value.length) return;

			// Inject the todo item into the UI
			store.data.todos.push({
				text: text.value,
				id: new Date().getTime()
			});

			// Clear the field
			text.value = '';

			// Save todos to localStorage
			saveTodos();

		};


		//
		// Components
		//

		var store = new Reef.Store({
			data: {}
		});

		var todoList = new Reef('#todo-list', {
			store: store,
			template: function (props) {
				return props.todos.map(function (todo) {
					return `<li id="${todo.date}">${todo.text}</li>`;
				}).join('');
			}
		});

		var count = new Reef('#add-count', {
			store: store,
			template: function (props) {
				return props.todos.length + 1;
			}
		});


		//
		// Event Listeners
		//

		// Render initial UI
		loadTodos();

		// Listen for form submissions
		addTodos.addEventListener('submit', submitHandler);
	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>React Todos in Vanilla JS</title>
	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
	}

	label,
	input {
	display: block;
	}

	input {
	margin-bottom: 1em;
	}
	</style>
	</head>
	<body>

	<h1>React Todos in Vanilla JS</h1>

	<ul id="todo-list"></ul>

	<form id="add-todos">
	<label for="new-todo">What needs to be done?</label>
	<input id="new-todo">
	<button>
	Add #<span id="add-count"></span>
	</button>
	</form>

	<script src="https://cdn.jsdelivr.net/npm/reefjs/dist/reef.min.js"></script>
	<script>
	//
	// Variables
	//

	var addTodos = document.querySelector('#add-todos');


	//
	// Methods
	//

	/**
	* Save todos to localStorage
	*/
	var saveTodos = function () {
	localStorage.setItem('todos', JSON.stringify(store.data.todos));
	};

	/**
	* Load todos from localStorage
	*/
	var loadTodos = function () {
	var saved = localStorage.getItem('todos');
	store.data.todos = saved ? JSON.parse(saved) : [];
	};

	/**
	* Handle submit events
	* @param {Event} event The event object
	*/
	var submitHandler = function (event) {

	// Stop the form from reloading the page
	event.preventDefault();

	// Get the todo item field
	var text = addTodos.elements['new-todo'];

	// If there's no text in the field, do nothing
	if (!text \|\| !text.value.length) return;

	// Inject the todo item into the UI
	store.data.todos.push({
	text: text.value,
	id: new Date().getTime()
	});

	// Clear the field
	text.value = '';

	// Save todos to localStorage
	saveTodos();

	};


	//
	// Components
	//

	var store = new Reef.Store({
	data: {}
	});

	var todoList = new Reef('#todo-list', {
	store: store,
	template: function (props) {
	return props.todos.map(function (todo) {
	return `<li id="${todo.date}">${todo.text}</li>`;
	}).join('');
	}
	});

	var count = new Reef('#add-count', {
	store: store,
	template: function (props) {
	return props.todos.length + 1;
	}
	});


	//
	// Event Listeners
	//

	// Render initial UI
	loadTodos();

	// Listen for form submissions
	addTodos.addEventListener('submit', submitHandler);
	</script>

	</body>
	</html>