JSFiddle - React, Tailwind, and code Playground

by rvaldez

HTML

<body>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <nav>
        <p id="title">BLTD</p>
         <h1 class="navButtonTBD">to be done</h1>

         <h1 class="navButtonD">done</h1>

    </nav>
    <main>
         <h1 class="content">BLTD, a to-do list redefined.</h1>

        <p>To get started, click on either one of the buttons of the left</p>
    </main>
</body>

CSS

html {
    font-family:'Open Sans', san-serif;
    font-size: 15px;
}
nav {
    text-align:center;
    font-weight:bold;
    left:0px;
    top:0px;
    width:150px;
    height:100%;
    position:fixed;
    border-right:1px solid #8D8D8D;
}
main {
    margin-left:175px;
    padding-right:10px;
}
#title {
    font-size:40px;
}
.navButtonTBD {
    background-color:#D5D5D2;
    border-radius:4px;
}
.navButtonD {
    background-color:#D5D5D2;
    border-radius:4px;
}
.inputBar {
    font-size:20px;
    height:30px;
    width:200px;
}
.toDoIt {
    font-size:15px;
    height:30px;
    width:60px;
    background-color:#CCCCCC;
    border:none;
}

JavaScript

$(document).ready(function () {
    $(".navButtonTBD, .navButtonD").click(function () {
        $("main").html('<input class="inputBar" type="text" placeholder="what to do?" /> <input class="toDoIt" type="submit" value="To-Do it!" />');
        
    });
    
   $(document).on("click", ".toDoIt" , function () {
            $("main").append("<p>" + $(".inputBar").val() + "</p>");
        });
    
});