JSFiddle - React, Tailwind, and code Playground

by anand potta

HTML

<h2>Note-taking App</h2>
   <h3>Add Notes Here</h3>
    <div id="div-add">
        <form role="form">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name"></input>
            </div>
            <div class="form-group">
                <label for="content">Content</label>
                <textarea rows="4" cols="50" class="form-control" id="content"></textarea>
            </div>
            <button id="add" class="btn btn-primary" type="button">Add</button>
            <p>
        </form>
    </div>
    <div id="div-list">
        <h3>View/Edit</h3>
        <ul id="list">
        </ul>
    </div>
    <div id="div-edit" class="hide">
        <form role="form">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="edit-name"></input>
            </div>
            <div class="form-group">
                <label for="content">Content</label>
                <textarea rows="4" cols="50" class="form-control" id="edit-content"></textarea>
            </div>
            <button id="save" class="btn btn-primary" type="button">Save</button>
            <button id="remove" class="btn btn-danger" type="button">Remove</button>
            <button id="cancel" class="btn btn-default" type="button">Cancel</button>
        </form>
    </div>

CSS

body {
	padding: 20px;
}
#list {
	overflow: auto;
	border: solid 1px;
	width: 400px;
	height: 400px;
	list-style: none;
	-webkit-padding-start: 0px;
	margin-right: 0;
	margin-left: 0;
	background-color: #fff;
	border-color: #ddd;
	border-width: 1px;
	border-radius: 4px;
	-webkit-box-shadow: none;
	box-shadow: none;
}
#list li {
	padding: 20px;
	border: solid 1px;
	border-color: #ddd;
	border-width: 1px;
}
#list li.selected{
	background-color: #B8D0E6;
}
#list li:hover {
	cursor: pointer;
}
.div-name {
	display: inline-block;
	width: 260px;
}
.div-date{
	display: inline-block;
	width: 90px;
}
.edit-content {
	width: 500px;
}
#div-list {
	padding: 20px;
	display: inline-block;
}
#div-add {
	padding: 20px;
	width: 500px;
}
#div-edit {
	padding: 20px;
	padding-top: 50px;
	display: inline-block;
	vertical-align: top;
}
#div-edit.hide {
	display: none;
}

JavaScript

$(document).ready(function() {

    var notesArray = [],
        count = 0;

    function listRefresh() {
        $('#list').empty();

        for (var i = 0; i < notesArray.length; i++) {
            var name = notesArray[i].name,
                date = notesArray[i].date,
                dateString,
                month,
                element;

            month = date.getMonth() + 1;
            dateString = date.getDate() + "/" + month + "/" + date.getFullYear();

						var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
            
            element = $('<li data-id="' + notesArray[i].id + '" style="background:'+hue+'" data-name="' + notesArray[i].name + '">');

            element.append($('<div class="div-name">').text(name));
            element.append($('<div class="div-date">').text(dateString));

            $('#list').append(element);
            
        }
    }

    $('#list').on('click', 'li', function() {
        var id = $(this).data('id'),
            content = '',
            name = $(this).data('name');


        console.log("name: ", name)
        $('#list li.selected').removeClass('selected');
        $(this).addClass('selected');

        for (var i = 0; i < notesArray.length; i++) {
            if (notesArray[i].id === id) {
                content = notesArray[i].content;
            }
        }

        $('#edit-name').val(name);
        $('#edit-content').val(content);

        //$('#div-edit').css('display', 'inline-block');
        $('#div-edit').removeClass('hide');
    })

    $('#add').on('click', function() {
        var name = $('#name').val(),
            content = $('#content').val(),
            date = new Date();

        if (name === "") {
            alert("Please enter a name for the note");
        } else {
            notesArray.push({
                id: count,
                name: name,
     ...