index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Fetch API Sandbox</title>
</head>

<body>
    <div class="container">
        <h1 class="display-4 mb-4">Fetch API Sandbox</h1>
        <div class="d-flex">
            <button class="btn btn-primary mr-4" id="getText">Get Text</button>
            <button class="btn btn-success mr-4" id="getUsers">Get JSON</button>
            <button class="btn btn-warning mr-4" id="getPosts">Get API DATA</button>
        </div>
        <hr>
        <div id="output"></div>
        <form id="addPost">
            <div class="form-group">
                <input type="text" id="title" class="form-control" placeholder="Add title">
            </div>
            <div class="form-group">
                <textarea id="body" class="form-control" placeholder="Add body"></textarea>
            </div>

            <input type="submit" class="btn btn-secondary" value="Submit">
        </form>
    </div>
    <script src="main.js"></script>
</body>

</html>