Problem
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.
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;
}
Solution
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>Title</title>tag in the<head> - 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/