5
\$\begingroup\$

I created the following app (only saves the notes in an array so no a proper note taking app). I would like to know how I would make this code more object orientated.

JSFiddle

script.js:

$(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();

            element = $('<li data-id="' + notesArray[i].id + '" 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,
                content: content,
                date: date
            })
        }

        count++;

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

        listRefresh();
    })

    $('#save').on('click', function() {
        var id = $('#list li.selected').data('id'),
            name = $('#edit-name').val(),
            content = $('#edit-content').val();

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

        listRefresh();

        $('#list li[data-id="' + id + '"]').addClass('selected');

    })

    $('#cancel').on('click', function() {
        //$('#div-edit').css('display', 'none');
        $('#div-edit').addClass('hide');
        $('#list li.selected').removeClass('selected');
    })

    $('#remove').on('click', function() {
        var id = $('#list li.selected').data('id');

        var r = confirm('Are you sure you want to remove this note?');
        if (r) {
            for (var i = 0; i < notesArray.length; i++) {
                if (notesArray[i].id === id) {
                    notesArray.splice(i, 1);
                    break;
                }
            }

            listRefresh();

            //$('#div-edit').css('display', 'none');
            $('#div-edit').addClass('hide');
        }

    })

});

For completion, here is the .html and .css files:

notes.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.js">
    </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <h3>
        Add Notes
    </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>
</body>

</html>

styles.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;
}
\$\endgroup\$
  • \$\begingroup\$ "more" object oriented? How is this object oriented? \$\endgroup\$ – Pinoniq Dec 19 '14 at 14:09
  • \$\begingroup\$ Have you made an attempt to implement "object-oriented" type of behavior that you can share? This is leaning more towards a "tell me how to do it" type of question as opposed to a "this is my attempt at doing it, please give me feedback" type of question. There are any number of resources on the internet about how to implem ent object-oriented behaviors in javascript. I don't see where this has been attempted here, so not sure how valuable you will find a code review at this stage. \$\endgroup\$ – Mike Brant Aug 31 '16 at 17:37
5
\$\begingroup\$

To start with, I do not know JavaScript. I do know HTML and CSS, though.

Your CSS file has no problems at all according to the W3C validator (http://jigsaw.w3.org/css-validator/). However, I do not think you need this line:

background-color: #fff;

This is just setting your background-color property to white.

Your HTML has three problems, according to the W3C validator (http://validator.w3.org/check).

  1. You don't have a <title>Title</title> tag in the <head>
  2. You close both your <input ...> tags like this: </input>, and the validator wants you to just close them like this: <input ... />

Your JavaScript text looks like it has an error here (according to this validator: http://www.javascriptlint.com/online_lint.php):

console.log("name: ", name)

I think that should be:

console.log("name: ", name);

As for object orientation, I cannot help there as I do not know JS. It appears to work very well as it is without needing to be more object orientated, though.

This is a JSFiddle of your code with my changes that you can work with: http://jsfiddle.net/g66q0hto/

\$\endgroup\$
  • \$\begingroup\$ Objection! I know this is old, however, input, meta and similar tags actually don't need to be closed at all. <input ...> is just fine. \$\endgroup\$ – Zefir Zdravkov Jan 28 at 8:11

protected by Mathieu Guindon Sep 2 '16 at 14:45

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.