CS50-Web-Programming-with-Python-and-JavaScript/lecture6/posts0/templates/index.html at master · python-test-code/CS50-Web-Programming-with-Python-and-JavaScript · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <title>My Webpage</title>
        <style>
            .post {
                background-color: #77dd11;
                padding: 20px;
                margin: 10px;
            }

            body {
                padding-bottom: 50px;
            }
        </style>
        <script>

            // Start with first post.
            let counter = 1;

            // Load posts 20 at a time.
            const quantity = 20;

            // When DOM loads, render the first 20 posts.
            document.addEventListener('DOMContentLoaded', load);

            // If scrolled to bottom, load the next 20 posts.
            window.onscroll = () => {
                if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
                    load();
                }
            };

            // Load next set of posts.
            function load() {

                // Set start and end post numbers, and update counter.
                const start = counter;
                const end = start + quantity - 1;
                counter = end + 1;

                // Open new request to get new posts.
                const request = new XMLHttpRequest();
                request.open('POST', '/posts');
                request.onload = () => {
                    const data = JSON.parse(request.responseText);
                    data.forEach(add_post);
                };

                // Add start and end points to request data.
                const data = new FormData();
                data.append('start', start);
                data.append('end', end);

                // Send request.
                request.send(data);
            };

            // Add a new post with given contents to DOM.
            function add_post(contents) {

                // Create new post.
                const post = document.createElement('div');
                post.className = 'post';
                post.innerHTML = contents;

                // Add post to DOM.
                document.querySelector('#posts').append(post);
            };
        </script>
    </head>
    <body>
        <div id="posts">
        </div>
    </body>
</html>