Untitled

app.js
import { get, post, put, del } from './requester.js'

const html = {
    'getAllBooks': () => document.getElementById('all-books')
}

const actions = {
    'load-books': async function() {
        try{
            const books = await get('appdata','books');
            const booksContainer = html.getAllBooks();
            const fragment = document.createDocumentFragment();
            books.forEach(b =>{

            })
        } catch(err){
            alert(err);
        }
    },
    'create-book': async function() {}
}

function handleEvent(e){
    if(typeof actions[e.target.id] === 'function'){
        actions[e.target.id]();
    }
}

(function attachEvenets(){
    document.addEventListener('click',handleEvent);
}())
==========================================================
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">
    <title>Books</title>
    <link rel="stylesheet" href="./styles.css">
    <script type="module" src="./requester.js"></script>
    <script type="module" src="./app.js"></script>

</head>
<body>
    <button id="load-books">LOAD ALL BOOKS</button>
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Author</th>
                <th>Isbn</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="all-books">
            <tr>
                <td>Harry Poter</td>
                <td>J. K. Rowling</td>
                <td>0-7475-3269-9</td>
                <td>
                    <button>Edit</button>
                    <button>Delete</button>
                </td>
            </tr>
            <tr>
                <td>Game of Thrones</td>
                <td>George R. R. Martin</td>
                <td>9780553386790</td>
                <td>
                    <button>Edit</button>
                    <button>Delete</button>
                </td>
            </tr>
        </tbody>
    </table>

    <form>
        <h3>CREATE FORM</h3>
        <label>TITLE</label>
        <input type="text" id="title" placeholder="Title...">
        <label>AUTHOR</label>
        <input type="text" id="author" placeholder="Author...">
        <label>ISBN</label>
        <input type="text" id="isbn" placeholder="Isnb...">
        <button id="create-book">Submit</button>
    </form>
    <form>
        <h3>EDIT FORM</h3>
        <input type="hidden" value="" />
        <label>TITLE</label>
        <input type="text" id="edit-title" placeholder="Title...">
        <label>AUTHOR</label>
        <input type="text" id="edit-author" placeholder="Author...">
        <label>ISBN</label>
        <input type="text" id="edit-isbn" placeholder="Isnb...">
        <button id="edit-book">Submit</button>
    </form>
</body>
</html>

<!--Feel free to change/update/modify the HTML Structure-->
===================================================================
request
const username = 'goran1';
const password = 'goran1';

const baseURL = 'https://baas.kinvey.com'
const appKey = 'kid_S124GhM3r';
const appSecret = '4e8beb4cafa045d9afef4bcabfb23797';


function makeHeaders(httpMethod, data){
    const headers = {
        method: httpMethod,
        headers: {
            'Authorization': `Basic ${btoa(`${username}:${password}`)}`,
            'Content-Type': 'application/json'
        }
    }

    if(httpMethod === 'POST' || httpMethod === 'PUT'){
        headers.body = JSON.stringify(data);
    }

    return headers;
}

function handleError(e){
    if(!e.ok){
        throw new Error(e.statusText);
    }

    return e;
}

function fetchData(kinveyModule,endPoint,headers){
    const url = `${baseURL}/${kinveyModule}/${appKey}/${endPoint}`

    return fetch(url, headers)
    .then(handleError)
    .then(serializeData);
}

function serializeData(x){
    return x.json();
}

export function get(kinveyModule, endPoint){
    const headers = makeHeaders('GET');

    return fetchData(kinveyModule,endPoint,headers);
}

export function post(kinveyModule, endPoint, data){
    const headers = makeHeaders('POST',data);

    return fetchData(kinveyModule,endPoint,headers);
}

export function put(kinveyModule, endPoint, data){
    const headers = makeHeaders('PUT',data);

    return fetchData(kinveyModule,endPoint,headers);
}

export function del(kinveyModule,endPoint){
    const headers = makeHeaders('DELETE');

    return fetchData(kinveyModule,endPoint,headers)
}

==============================================================
css
*{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
}

table{
    border:1px solid #234465;
    padding: 1%;
    margin: 0 auto;
    width: 70%;
    border-radius: 4px;
}
table th{
    text-decoration: underline;
    text-align: center;
}
table tbody td{
    text-align: center;
    border-bottom:1px solid black;
    padding: 0.5%;
}

table tbody tr:nth-child(even){
    background-color: #234465;
    color: white
}

table tbody tr:nth-child(odd){
    color: #234465;
    border-bottom: 1px solid black;
}

table tbody tr:nth-child(odd) button{
    background: #234465;
    color:white;
}

table tbody tr:nth-child(even) button{
    background: white;
    color:#234465;
}

table tr td:not(:last-child):hover{
    text-decoration: underline;
}

table button{
    border: none;
    padding: 5px;
    border-radius: 5px;
    margin-left: 8%;
}

table button:hover{
    text-decoration: underline;
}

button#load-books{
    margin: 0 auto;
    display:block;
    padding:1%;
    margin-top: 1%;
    margin-bottom: 1%;
    border-radius: 4px;
}


label, input{
    display:block;
    margin: 0 auto;
}

form input{
    margin-bottom: 1%;
    width: 25%;
}

form{
    display: block;
    margin: 0 auto;
    text-align: center;
}

form button{
    margin: 0 auto;
    display:block;
    margin-top: 1%;
    margin-bottom: 1%;
    border-radius: 4px;
    background-color: #234465;
    color:white;
    border: none;
    padding: 0.5%;
}