codeup-web-exercises/ajax-blog.html at main · robles-jonathan/codeup-web-exercises · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <style>
        .post{
            background-color: blanchedalmond;
            border: 1px solid black;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4 text-center" >My Blog Spot</h1>
    </div>
</div>
<div id="posts"></div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        "use strict";
        function titleCase(str) {
            str = str.toLowerCase().split(' ');
            for(let i = 0; i < str.length; i++){
                str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
            }
            return str.join(' ');
        }

        function loadPosts() {
            $.get('/data/blog.json').done(function(posts){
                console.log(posts);
                $('#posts').html("");
                posts.forEach(function(post){
                    var load =
                        "<div class='post'>" +
                        "<h5>" + titleCase(post.categories.join(", ")) + "</h5>" +
                        "<h1>" + post.title + "</h1>" +
                        "<small><strong>" + post.date + "</strong></small>" +
                        "<p>" + post.content + "</p>" +
                        "</div>";
                    $('#posts').append(load);
                })
            })
        }

        // On Load
        loadPosts();
    })
</script>
</body>
</html>