const btn = document.querySelector('.btn');
const inpEle = document.querySelector('input');
const output = document.querySelector('.output');
const container = document.querySelector('.container');
inpEle.style.display = 'none';
btn.textContent = 'Load GitHub JSON data';

const baseurl = 'https://my-json-server.typicode.com/discoveryvip2/testingdatabase/posts/';
btn.addEventListener('click', loadData);

function loadData(e) {
    console.log('ready');
    const url = baseurl;
    fetch(url)
        .then(rep => rep.json())
        .then(data => {
            createPage(data);
        })
}

function createPage(data){
    console.log(data);
    output.innerHTML = '';
    data.forEach(el => {
        const main = addEle(output, 'div', '');
        addEle(main, 'div', el.title);
        addEle(main, 'div', el.body);
        addEle(main, 'div', el.id);
        main.classList.add('box');
    });
}

function addEle(parent, t, html) {
    const ele = document.createElement(t);
    parent.append(ele);
    ele.innerHTML = html;
    return ele;
}


<!DOCTYPE html>
<html>

<head>
    <title>JavaScript API</title>
    <style>
        .box{
            width:80%;
            border: 1px solid #ddd;
            margin: 10px auto;
            padding:10px;
            font-size: 1.2em;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="text" class="val">
        <button class="btn">Click</button>
        <div class="output"></div>
    </div>
    <script src="code6.js"></script>
</body>

</html>