JSFiddle - React, Tailwind, and code Playground

by garethrwilliams

HTML

<body>


</body>

CSS

body {
                display: flex;
                margin-top: 30px;
            }
            .container {
                display: inline-block;
                width: 25%;
                margin-left: 30px;
            }
            .container:last-of-type {
                margin-right: 30px;
            }
            .header {
                background-color: red;
                text-align: center;
                color: white;
                padding: 10px;
            }
            .todoContainer {
                display: flex;
                justify-content: stretch;
                width: 100%;
                background-color: #eee;
                margin-bottom: 5px;
            }
            .textContainer {
                display: flex;
            }
            .submit {
                background-color: grey;
                padding: 5px;
            }
            textarea {
                height: 100px;
                width: 100%;
                display: inline-block;
            }
            .todoContainer .left, .todoContainer .right {
                display: inline-block;
                height: 100%;
                background-color: #eee;
                cursor: pointer;
                margin: 10px;
                align-self: center;
                
            }
            .todoContainer .centre {
                width: 100%;
                margin: 10px 0;
            }

JavaScript

let undoStack = [] 
            let data = null
            const kanbanTemplate = [
                {color: "#35235D", header: "To-do", todos: [] },
                {color: "#CB2402", header: "Doing", todos: [] },
                {color: "#4C49A2", header: "Done", todos: [] },
                {color: "#A31A48", header: "Approved", todos: [] },
            ]


            function UndoItem (perform, data) {
                this.perform = perform,
                this.data = data
            }

            function ActionItem (perform, data) {
                this.perform = perform,
                this.data = data
            }

            function makeContainer () {
                for (i = 0; i <= (data ? data.length : kanbanTemplate.length) ; i++) {
                    const container = document.createElement('div')
                    container.classList.add("container")
                    document.querySelector('body').appendChild(container)
                }
            } ; makeContainer()


            const render = (idx) => {
                const task = data[idx]
                const container = document.querySelectorAll('.container')[idx]
                

                const left = idx == 0 ? '' : '&#60;'
                const right = idx == data.length - 1 ? '' : '&#62;'

                const todos = data[idx].todos.reduce( (acc, e, i) => {
                    return acc += `
                    <div class="todoContainer">
                    <div class="left arrow" data-column="${idx}" data-index="${i}">${left}</div>
                    <div class="centre" data-column="${idx}" data-index="${i}">${e}</div>
                    <div class="right arrow" data-column="${idx}" data-index="${i}">${right}</div>
                    </div>
                    `
                }, '') // column, i = todo index

                container.innerHTML = `
                    <div class="header" style="background: ${task.color}">${task.header}</div>
           ...