Note taking app (saves notes to an array)

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 ');

element.append($('').text(name));
element.append($('').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

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).

• You don't have a Title tag in the `






• You close both your tags like this: , and the validator wants you to just close them like this: `

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/

StackExchange Code Review Q#74168, answer score: 5