-
Notifications
You must be signed in to change notification settings - Fork 0
/
instagram.js
52 lines (42 loc) · 1.78 KB
/
instagram.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
(function() {
'use strict';
console.log('===============================================');
console.log('Author: Sho Carter-Daniel <shosilva@icloud.com>');
console.log('Demo: Instagram');
console.log('===============================================');
// create variables that contain elements on the page =======================================
var elements = {
feeds: document.querySelectorAll('.feeds__one img'),
likeHearts: document.querySelectorAll('i.fa-heart-o'),
likesList: document.querySelectorAll('[data-likes]'),
timeAgoList: document.querySelectorAll('[data-time-ago]'),
};
// events ===================================================================================
var events = {
onLikeClick: function(e) {
var content = e.target.closest('content');
var likes = content.querySelector('[data-likes]');
e.target.classList.toggle('fa-heart-o');
e.target.classList.toggle('fa-heart');
e.target.classList.toggle('liked');
if (e.target.classList.contains('liked')) {
likes.textContent = `${Number(likes.dataset.likes)+1} likes`;
} else {
likes.textContent = `${Number(likes.dataset.likes)} likes`;
}
}
};
// application object is here ===============================================================
var app = {
start: function () {
app.instigateData();
},
instigateData: function () {
elements.likeHearts.forEach(function (likeHeart) { likeHeart.addEventListener('click', events.onLikeClick); });
elements.likesList.forEach(function (like) { like.textContent = `${like.dataset.likes} likes`; });
elements.timeAgoList.forEach(function (timeAgo) { timeAgo.textContent = timeAgo.dataset.timeAgo; });
}
};
// initialize the application ===============================================================
app.start();
})();