-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrecentPosts.html
81 lines (73 loc) · 2.72 KB
/
recentPosts.html
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
<head>
<link rel="stylesheet" type="text/css" href="navBarcss.css">
<link rel="stylesheet" type="text/css" href="post.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var posts="";
var count=0;
var root = 'https://jsonplaceholder.typicode.com';
var a={
url: root + '/posts',
method: 'GET'
};
var b={
url: root + '/users',
method: 'GET'
};
$.ajax(a).then(function post(data) {
$.ajax(b).then(function (data2) {
console.log(data2);
count = data.length;
var i;
for(i=count-1;i>count-11;i--)
{
linkTo = 'profPage.html?index='+parseInt(data[i].userId-1);
posts = posts + '<li><div class="postDiv"><div class = "userDetails"><img src = "DP.jpg"><a href="'+linkTo+'" class = "userName">'+ data2[parseInt(data[i].userId-1)].username +'</a></div><div align="left "class="postDetDiv"><div class="postTitDiv"><h3>'+ data[i].title +'</h3></div><div class="postMainDiv"><p>'+data[i].body+'</p></div></div></div></li>';
}
$('.posts').html(posts);
count = i;
posts="";
$('#see_more').click(function(){
var i;
if(count <= data.length)
{
for(i=count;i>count-10;i--)
{
linkTo = 'profPage.html?index='+parseInt(data[i].userId-1);
posts = posts + '<li><div class="postDiv"><div class = "userDetails"><img src = "DP.jpg"><a href="'+linkTo+'" class = "userName">'+ data2[parseInt(data[i].userId-1)].username +'</a></div><div align="left "class="postDetDiv"><div class="postTitDiv"><h3>'+ data[i].title +'</h3></div><div class="postMainDiv"><p>'+data[i].body+'</p></div></div></div></li>';
}
$('.posts').append(posts);
count = i;
posts="";
}
});
});
});
</script>
</head>
<body>
<div align="center" class="navbar">
<a class="post" align="center" href="recentPosts.html" >
All Post
</a>
<a class="post" align="center" href="photoList.html">
All Photots
</a>
<a id="user" class="post" align="center" href="userList.html" >
All Users
</a>
<a id="album" class="post" align="center" href="AlbumAllList.html" >
All Albums
</a>
</div>
<div style="width:100%;height:60px;"></div>
<div class="main">
<div align = "center" class="loadDiv"> <!--Your code start-->
<ul class = "posts">
</ul>
<a id = "see_more">See more...</a>
</div>
</div>
</body>
</html>