JSFiddle - React, Tailwind, and code Playground

by glebcha

HTML

<link rel="stylesheet" href="https://rawgithub.com/glebcha/reminder-mithril/master/assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
		<section id="reminderapp"></section>
		<footer class="footer">
			<p>You can create notification with ENTER key</p>
			<p>Clear input field with ESCAPE</p>
			<p>Double-click on notification will turn on editing</p>
			<p>You can press ESCAPE while editing or change focus to revert changes made for chosen notification</p>
		</footer>

JavaScript

'use strict';
var reminder = reminder || {};

// Define properties of Remind class
reminder.Remind = function(data) {
    this.description = m.prop(data.description);
    this.date = m.prop(data.date);
    this.edited = m.prop(data.edited);
    this.error = m.prop(data.error);
};


(function(){
    // Constant with name of notifications list stored in localStorage
    var STORAGE_ID = 'task-list';

    // Getter/Setter to operate notifications list stored in localStorage
    reminder.storage = {
        get: function () {
            return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
        },
        set: function (todos) {
            localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
        }
    };
})();

reminder.controller = function() {

    // Get notifications object from localStorage 
    this.list = reminder.storage.get();

    // Create collection
    this.list = this.list.map(function(item) {
        return new reminder.Remind(item);
    });

    // Temporary value storage (until we create notification)
    this.description = m.prop("");

    // Add notification in list and update collection
    this.MAX_STRING_LENGTH = 100; // Caonstant define max chars value to input 
    this.add = function() {
        // Remove whitespaces and count chars with a help of regex
        if (this.description()  && this.description().replace(/\s/g, '').length <= this.MAX_STRING_LENGTH) {
            this.list.push(new reminder.Remind({
                description: this.description(this.description().trim()),
                date: moment.utc().format(), // Write UTC-formatted date, so we can take into account timezone
                edited: false,
                error: false
            }));
            reminder.storage.set(this.list);
            this.description("");
        } 
    };

    this.edit = function(index, ctrl) {
        if (this.description() && this.description().replace(/\s/g, '').length <= ctrl.MAX_STRING_LENGTH) {
           ...