json api test jsonplaceholder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RESTful API</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            <h1 class="display-4">RESTful API</h1>
            <p class="lead">A simple RESTful API with Fake JSON API</p>
        </div>
        <div class="row" id="posts"></div>
    </div>

    <script>
        const getposts = () => {
            fetch('https://jsonplaceholder.typicode.com/posts')
                .then( (response) => response.json() )
                .then( (json) => {
                    json.forEach( post => {
                        let card = `
                            <div class='col-sm-4 mb-4'>
                                <div class='card'>
                                    <div class='card-body'>
                                        <h5 class='card-title'>
                                            ${post.title.substring(0,20)}
                                        </h5>
                                        <p class='card-text'>
                                            ${post.body.substring(0,100)}
                                        </p>
                                        <a href='#' onclick='viewMore(${post.id})'>more</a>
                                        <a href='#' onclick='viewCmts(${post.id})'>comments</a>
                                    </div>
                                </div>
                            </div>
                            `;
                        document.getElementById('posts').innerHTML += card;
                    } );
                } );
        }

        const viewMore = (id) => {
            fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
                .then( (response) => response.json() )
                .then( (json) => {
                    console.log(json);
                });
        }

        const viewCmts = (id) => {
            fetch(`https://jsonplaceholder.typicode.com/posts/${id}/comments`)
                .then( (response) => response.json() )
                .then( (json) => {
                    console.log(json);
                });
        }

        getposts();
    </script>
</body>
</html>