JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<!--
Form  Entry thing to add tasks.
A task.
-->
<form> 
    <label for="add_task">Add Task:</label>
    <input type="text" id="add_task"/>
    <button id="add-this-shit">Add this shit</button>
</form>


<div id="tasks"></div>

CSS

.task {
    border-top: 1px #555 solid;
    }

.task:first-child {
    border-top-width: 0px;
    }

.task input[type=checkbox] {
    float: left;
    }
.task p {}
.task p a {}

JavaScript

/**
 * 1. Receive Tasks
 * 2. Retrieve Tasks
 * 3. Delete Tasks
 *
 * 4. Create new ToDo Lists.
 */
/**
 *  .querySelector // 1 - element 
 *  .querySelectorAll // lots of elements
 *  .getElementById // The Quickest; Requires an ID.
 *  
 *
 */

var addThisShit = document.getElementById('add-this-shit')
var shitToAdd = document.getElementById('add_task')
var tasksWrapper = document.getElementById('tasks')

addThisShit.addEventListener('click', function (e) {
    e.preventDefault();
    var theShit = shitToAdd.value.trim()
    if ( !theShit.length ) {
        alert('Add some shit yo')
        return
    }
    // Gab the text template
    var holder= document.createElement('div')
    holder.innerHTML = '<div class="task">\
        <input type="checkbox"/><p><a href="#">'+ theShit +'</a></p>\
    </div>'
    ToDo.receiveTask(theShit)
    
    // Put the new element into `tasksWrapper`
    tasksWrapper.appendChild(holder.children[0])
    shitToAdd.value = ''
})

var ToDo = {
    tasks: [],
    
    receiveTask: function (task) {
        this.tasks.push(task)
    },
    
    retrieveTask: function (task) {
        return this.tasks[task]
    },
    
    deleteTask: function () {
        var i = 0;
        // While loop
        while ( arguments[i] !== undefined ) {
            delete this.tasks[arguments[i]]
            i=i+1;
        }
        
        var newArray = []
        // For loop
        for ( var thingToBeCountedUntilThereIsNoMoreTasksInOurArray = 0; thingToBeCountedUntilThereIsNoMoreTasksInOurArray < this.tasks.length; thingToBeCountedUntilThereIsNoMoreTasksInOurArray++ ) {
            if ( this.tasks[thingToBeCountedUntilThereIsNoMoreTasksInOurArray] !== undefined ) {
                newArray.push(this.tasks[thingToBeCountedUntilThereIsNoMoreTasksInOurArray])
            }
        }
        
        this.tasks = newArray
    }
}