JSFiddle - React, Tailwind, and code Playground

by Tuukka Uosukainen

HTML

<h1>What Todo?</h1>

<p>A productivity tool by Tuukka Uosukainen</p>
<input id="inputTodo" type="text" placeholder="" />
<button id="addBtn">Add todo</button>
<ul id="listTodo"></ul>
<footer>
    <p>no-&copy; Raaaapress 2015</p>
</footer>

CSS

body {
    max-width: 400px;
    width: 100%;
    margin: auto;
    font-family: lato, arial, helvetica, sans-serif;
}
h1 {
    font-size: 1.6em;
    text-transform: uppercase;
    font-weight: 200;
    color: red;
}
span {
    font-family: georgia;
    font-style: italic;
    font-weight: 100;
    font-variant: smallcaps;
}
p {
    font-family: georgia, serif;
    font-size: .9em;
    font-style: italic;
    font-weight: 100;
}
button {
    margin: 10px;
    border: 1px solid black;
    background-color: white;
}
.delete:hover {
    background-color: green;
    color: white;
}
ul {
    list-style-type: square;
}
li {
    font-family: georgia, serif;
    font-size: .9em;
    font-style: italic;
}
footer {
    font-size: .7em;
}

JavaScript

function addTodoItem() {
    var todo = "Todo";
    var todoItem = $("#inputTodo").val();
    $("#inputTodo").val("");
    // Add todo list item to ul
    $("#listTodo").append('<li>' + todoItem + '<button class="delete">Done</button></li>');
}

function deleteTodoItem() {
    $(this).parent().remove();
}
$(function () {
    $("#addBtn").on('click', addTodoItem);
    $("body").on('click', '.delete', deleteTodoItem);
});