Skip to content
This repository was archived by the owner on Apr 8, 2025. It is now read-only.

Commit 937ed8f

Browse files
vilterpvilterp
committed
now you can instantly like posts on jankyblog with ajax
1 parent abac28c commit 937ed8f

File tree

10 files changed

+207
-81
lines changed

10 files changed

+207
-81
lines changed

‎basic.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<html>
22
<head>
33
<title>My First JS</title>
4-
</head>
5-
<body>
6-
<button id="mybutton">Click Me</button>
74
<script type="text/javascript">
85
function sayHello() {
96
alert('Hello from JavaScript!');
107
console.log('hello in the console');
118
}
12-
document.getElementById('mybutton').addEventListener('click', sayHello);
9+
document.addEventListener('DOMContentLoaded', function() {
10+
document.getElementById('mybutton').addEventListener('click', sayHello);
11+
});
1312
</script>
13+
</head>
14+
<body>
15+
<button id="mybutton">Click Me</button>
1416
</body>
1517
</html>

‎dom1.html

+17-12
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
11
<html>
22
<head>
33
<title>My First JS</title>
4+
<script type="text/javascript">
5+
document.addEventListener('DOMContentLoaded', function() {
6+
7+
// click list
8+
var clicks = 0;
9+
var click_list = document.getElementById('clicklist');
10+
function addClick() {
11+
clicks += 1;
12+
var li = document.createElement('li');
13+
li.innerText = 'click #' + clicks.toString();
14+
click_list.appendChild(li);
15+
}
16+
17+
document.getElementById('mybutton').addEventListener('click', addClick);
18+
19+
});
20+
</script>
421
</head>
522
<body>
623
<p>
724
<button id="mybutton">Click Me</button>
825
</p>
926
<ul id="clicklist"></ul>
10-
<script type="text/javascript">
11-
// click list
12-
var clicks = 0;
13-
var click_list = document.getElementById('clicklist');
14-
function addClick() {
15-
clicks += 1;
16-
var li = document.createElement('li');
17-
li.innerText = 'click #' + clicks.toString();
18-
click_list.appendChild(li);
19-
}
20-
document.getElementById('mybutton').addEventListener('click', addClick);
21-
</script>
2227
</body>
2328
</html>

‎dom2.html

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
<html>
22
<head>
33
<title>My First JS</title>
4+
<script type="text/javascript">
5+
document.addEventListener('DOMContentLoaded', function() {
6+
// chars in text box
7+
var text_box = document.getElementById('text_box');
8+
var chars_display = document.getElementById('chars_display');
9+
function updateDisplay() {
10+
chars_display.innerText = text_box.value.length;
11+
}
12+
text_box.addEventListener('keyup', updateDisplay);
13+
});
14+
</script>
415
</head>
516
<body>
617
<p>
718
<input type="text" id="text_box"/> Chars: <span id="chars_display"></span>
819
</p>
9-
<script type="text/javascript">
10-
// chars in text box
11-
var text_box = document.getElementById('text_box');
12-
var chars_display = document.getElementById('chars_display');
13-
function updateDisplay() {
14-
chars_display.innerText = text_box.value.length;
15-
}
16-
text_box.addEventListener('keyup', updateDisplay);
17-
</script>
1820
</body>
1921
</html>

‎janky-blog/jankydb.js

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
var fs = require('fs');
2+
3+
function JankyDB(path) {
4+
this.path = path;
5+
if(!this.exists()) {
6+
this.initialize();
7+
console.log('initialized db');
8+
}
9+
}
10+
11+
JankyDB.prototype.exists = function() {
12+
return fs.existsSync(this.path);
13+
}
14+
15+
JankyDB.prototype.initialize = function() {
16+
var initial = {
17+
next_post_id: 0,
18+
posts: []
19+
};
20+
fs.writeFileSync(this.path, JSON.stringify(initial, undefined, 2));
21+
}
22+
23+
JankyDB.prototype.getPosts = function(callback) {
24+
fs.readFile(this.path, function(err, res) {
25+
if(err) throw err;
26+
callback(JSON.parse(res).posts);
27+
});
28+
}
29+
30+
JankyDB.prototype.addPost = function(post, callback) {
31+
var _this = this;
32+
fs.readFile(this.path, function(err, res) {
33+
if(err) throw err;
34+
var db = JSON.parse(res);
35+
post.id = db.next_post_id++;
36+
db.posts.push(post);
37+
fs.writeFile(_this.path, JSON.stringify(db, undefined, 2), function(err, res) {
38+
if(err) throw err;
39+
if(callback) callback(post.id);
40+
});
41+
});
42+
}
43+
44+
JankyDB.prototype.changePostLikes = function(post_id, delta, callback) {
45+
var _this = this;
46+
fs.readFile(this.path, function(err, res) {
47+
if(err) throw err;
48+
var db = JSON.parse(res);
49+
for(var i=0; i < db.posts.length; i++) {
50+
var post = db.posts[i];
51+
if(post.id == post_id) {
52+
post.likes += delta;
53+
fs.writeFile(_this.path, JSON.stringify(db, undefined, 2), function(err, res) {
54+
if(err) throw err;
55+
if(callback) callback();
56+
});
57+
}
58+
}
59+
});
60+
}
61+
62+
exports.JankyDB = JankyDB;

‎janky-blog/mv-posts.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"latest_post_id": 2,
3+
"posts": [
4+
{
5+
"id": 0,
6+
"title": "Initial Post",
7+
"body": "Hello world",
8+
"likes": 10
9+
},
10+
{
11+
"id": 2,
12+
"title": "test",
13+
"body": "foo",
14+
"likes": 0
15+
},
16+
{
17+
"id": 3,
18+
"title": "Another post",
19+
"body": "fun timez",
20+
"likes": 0
21+
}
22+
]
23+
}

‎janky-blog/posts.json

+11-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
[
2-
{
3-
"title": "Initial Post",
4-
"body": "Hello world"
5-
},
6-
{
7-
"title": "test",
8-
"body": "foo"
9-
},
10-
{
11-
"title": "Another post",
12-
"body": "fun timez"
13-
}
14-
]
1+
{
2+
"next_post_id": 1,
3+
"posts": [
4+
{
5+
"title": "Foo",
6+
"body": "bar",
7+
"likes": 1,
8+
"id": 0
9+
}
10+
]
11+
}

‎janky-blog/public/jankyblog.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
var like_buttons = document.querySelectorAll('a.like-button');
3+
for(var i=0; i < like_buttons.length; i++) {
4+
var like_button = like_buttons[i];
5+
install_like_handler(like_button);
6+
}
7+
});
8+
9+
function install_like_handler(like_button) {
10+
var post_id = like_button.dataset.postId;
11+
like_button.addEventListener('click', function() {
12+
var command;
13+
if(like_button.innerText == 'Like') {
14+
command = 'like';
15+
} else {
16+
command = 'unlike';
17+
}
18+
// AJAX magic!
19+
var req = new XMLHttpRequest();
20+
req.open('get', '/' + command + '/' + post_id, true); // e.g. /like/2
21+
req.addEventListener('load', function() {
22+
update_like_number(like_button)
23+
});
24+
req.send();
25+
});
26+
}
27+
28+
function update_like_number(like_button) {
29+
var liking = like_button.innerText == 'Like';
30+
if(liking) {
31+
like_button.innerText = 'Unlike';
32+
} else {
33+
like_button.innerText = 'Like';
34+
}
35+
var parent = like_button.parentElement;
36+
var counter_element = parent.querySelector('.likes-counter');
37+
var num_people = parseInt(counter_element.innerText);
38+
if(liking) {
39+
counter_element.innerText = (num_people + 1).toString();
40+
} else {
41+
counter_element.innerText = (num_people - 1).toString();
42+
}
43+
}

‎janky-blog/views/index.handlebars

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<html>
22
<head>
33
<title>JankyBlog | View Posts</title>
4+
<script src="jankyblog.js"></script>
45
</head>
56
<body>
67
<h1>Awsum Blog</h1>
@@ -9,6 +10,10 @@
910
<div class="post">
1011
<h2>{{title}}</h2>
1112
<div class="post-body">{{body}}</div>
13+
<div class="likes">
14+
<span id="num-likes-{{id}}" class="likes-counter">{{likes}}</span> people like this.&nbsp;
15+
<a data-post-id="{{id}}" class="like-button" href="#">Like</a>
16+
</div>
1217
</div>
1318
{{/each}}
1419
</body>

‎janky-blog/web.js

+29-25
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
// import needed libraries (installed with npm)
22
var express = require('express');
3-
var fs = require('fs');
43
var exphbs = require('express3-handlebars');
4+
var db = require('./jankydb');
55

66
var app = express();
7-
8-
var POSTS_FILE = 'posts.json';
7+
var db = new db.JankyDB('posts.json');
98

109
// detail, not sure why express does't do this automatically
1110
app.use(express.urlencoded());
@@ -15,11 +14,12 @@ app.use(express.logger());
1514
app.engine('handlebars', exphbs());
1615
app.set('view engine', 'handlebars');
1716

17+
// serve static files (jankyblog.js)
18+
app.use(express.static(__dirname + '/public'));
19+
1820
// tell express how to handle requests
1921
app.get('/', function(req, res) {
20-
fs.readFile(POSTS_FILE, function(err, contents) {
21-
if(err) throw err;
22-
var posts = JSON.parse(contents);
22+
db.getPosts(function(posts) {
2323
res.render('index', {posts: posts});
2424
});
2525
});
@@ -29,28 +29,32 @@ app.get('/write', function(req, res) {
2929
});
3030

3131
app.post('/save', function(req, res) {
32-
// load posts
33-
fs.readFile(POSTS_FILE, function(err, contents) {
34-
if(err) throw err;
35-
var posts = JSON.parse(contents);
36-
// construct our new post from data received in request
37-
var post = {
38-
title: req.body.title,
39-
body: req.body.body
40-
};
41-
// insert our new post
42-
posts.push(post);
43-
// serialize posts back to a string
44-
var serialized = JSON.stringify(posts, null, 2);
45-
// save posts with new one added
46-
fs.writeFile(POSTS_FILE, serialized, function(err) {
47-
if(err) throw err;
48-
console.log('posts saved');
49-
res.redirect('/'); // send user back to index
50-
});
32+
var post = {
33+
title: req.body.title,
34+
body: req.body.body,
35+
likes: 0
36+
};
37+
db.addPost(post, function() {
38+
console.log('posts saved');
39+
res.redirect('/'); // send user back to front page
40+
});
41+
});
42+
43+
app.get('/like/:post_id', function(req, res) {
44+
var post_id = req.params.post_id;
45+
db.changePostLikes(post_id, 1, function() {
46+
res.send(201);
47+
});
48+
});
49+
50+
app.get('/unlike/:post_id', function(req, res) {
51+
var post_id = req.params.post_id;
52+
db.changePostLikes(post_id, -1, function() {
53+
res.send(201);
5154
});
5255
});
5356

57+
// start it up
5458
app.listen(3000, function() {
5559
console.log('listening on http://localhost:3000/');
5660
});

‎timer.html

-17
This file was deleted.

0 commit comments

Comments
 (0)