JSFiddle - React, Tailwind, and code Playground

by Velichko Golev

HTML

<head lang="en">
    <title></title>
</head>
<body>
    <div id="wrapper">

    </div>

    <script src="module.js"></script>
</body>

CSS

h4 {
    text-align: right;
    margin: 10px 50px;
}

ul {
    list-style: none;
}

ul li {
    border-bottom: 1px solid black;
    padding: 2px;
}

.item-form-class {
    text-align: right;
    margin: 10px 50px;
}

section {
    margin-bottom: 30px;
    border: 2px solid gray;
}

span {
}

.item-status {
    background-color: white;
}

JavaScript

'use strict';
var sectionIndex = 0;
var sectionsArray = [];

var createMainContainer = (function() {
    var container = document.createElement('div');
    container.id = 'container';
    container.style.border = '3px solid black';
    container.style.width = '80%';
    container.style.padding = '5px';

    var newSectionForm = document.createElement('form');
    newSectionForm.id = 'create-section';
    newSectionForm.style.marginTop = '30px';

    var newSectionNameInput = document.createElement('input');
    newSectionNameInput.id = 'new-section-name';
    newSectionNameInput.type = 'text';

    var newSectionNameButton = document.createElement('input');
    newSectionNameButton.id = 'new-section-submit-button';
    newSectionNameButton.type = 'button';
    newSectionNameButton.value = 'New Section';

    newSectionForm.appendChild(newSectionNameInput);
    newSectionForm.appendChild(newSectionNameButton);

    container.appendChild(newSectionForm);

    return {
        addToDOM: function() {
           document.body.appendChild(container);
        }
    }
})();

var createNewSection = function(title) {
    var sectionNode = document.createElement('section');
    var sectionTitle = document.createElement('h4');
    sectionTitle.innerHTML = title;
    var todoList = document.createElement('ul');
    todoList.id = title;
    //todoList.style.borderBottom = '1px solid black';

    var newItemForm = document.createElement('form');
    newItemForm.className = 'item-form-class';
    var newItemNameInput = document.createElement('input');
    newItemNameInput.id = 'new-item-description-' + sectionIndex;
    newItemNameInput.type = 'text';

    var newItemNameButton = document.createElement('input');
    newItemNameButton.id = 'new-item-submit-button-' + sectionIndex;
    newItemNameButton.type = 'button';
    newItemNameButton.value = '+';
    newItemNameButton.onclick = function() {
        try {
            var itemDescription =...