nakov/kinvey-example.html

## kinvey-example.html
<!doctype html>

<html>
    <head>
        <meta charset="UTF-8">
        <script src="kinvey-example.js"></script>
    </head>

    <body>
        <a id='buttonLoad' href='#'>[Load]</a>
        <br />
        <br />
        <div>
            <select id='listBoxMazes' size="5">
                <option>Maze 1</option>
                <option>Maze 2</option>
                <option>Maze 3</option>
            </select>
        </div>
        <div>
            <div>
                Name: <input type='text' id='textBoxMazeName' />
            </div>
            <div>
                Data: <input type='text' id='textBoxMazeData' />
            </div>
            <a id='buttonAdd' href='#'>[Add]</a>
        </div>
    </body>
</html>

## kinvey-example.js
const kinveyUrl = "https://baas.kinvey.com/appdata/kid_B1LyKtqaB";
const kinveyHeaders = {
    'Content-Type': 'application/json',
    'Authorization': 'Basic PUT_YOUR_AUTH_KEY_HERE',
};

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById('buttonLoad').addEventListener('click', loadClick);
    document.getElementById('buttonAdd').addEventListener('click', addClick);
});

async function loadClick() {
    const url = kinveyUrl + "/mazes";
    const response = await fetch(url, {
        method: 'GET',
        headers: kinveyHeaders
    });
    let mazes = await response.json();
    console.log(mazes);

    document.getElementById('listBoxMazes').options.length = 0;
    mazes.forEach(maze => {
        document.getElementById('listBoxMazes').options.add(
            new Option(maze.name, maze.data)
        );
    });
}

async function addClick() {
    let newMaze = {
        name: document.getElementById('textBoxMazeName').value,
        data: document.getElementById('textBoxMazeData').value
    };

    const url = kinveyUrl + "/mazes";
    const response = await fetch(url, {
        method: 'POST',
        headers: kinveyHeaders,
        body: JSON.stringify(newMaze)
    });
    if (response.ok) {
        alert("added successfully");
    }
}
	<!doctype html>

	<html>
	<head>
	<meta charset="UTF-8">
	<script src="kinvey-example.js"></script>
	</head>

	<body>
	<a id='buttonLoad' href='#'>[Load]</a>
	<br />
	<br />
	<div>
	<select id='listBoxMazes' size="5">
	<option>Maze 1</option>
	<option>Maze 2</option>
	<option>Maze 3</option>
	</select>
	</div>
	<div>
	<div>
	Name: <input type='text' id='textBoxMazeName' />
	</div>
	<div>
	Data: <input type='text' id='textBoxMazeData' />
	</div>
	<a id='buttonAdd' href='#'>[Add]</a>
	</div>
	</body>
	</html>
	const kinveyUrl = "https://baas.kinvey.com/appdata/kid_B1LyKtqaB";
	const kinveyHeaders = {
	'Content-Type': 'application/json',
	'Authorization': 'Basic PUT_YOUR_AUTH_KEY_HERE',
	};

	document.addEventListener("DOMContentLoaded", function() {
	document.getElementById('buttonLoad').addEventListener('click', loadClick);
	document.getElementById('buttonAdd').addEventListener('click', addClick);
	});

	async function loadClick() {
	const url = kinveyUrl + "/mazes";
	const response = await fetch(url, {
	method: 'GET',
	headers: kinveyHeaders
	});
	let mazes = await response.json();
	console.log(mazes);

	document.getElementById('listBoxMazes').options.length = 0;
	mazes.forEach(maze => {
	document.getElementById('listBoxMazes').options.add(
	new Option(maze.name, maze.data)
	);
	});
	}

	async function addClick() {
	let newMaze = {
	name: document.getElementById('textBoxMazeName').value,
	data: document.getElementById('textBoxMazeData').value
	};

	const url = kinveyUrl + "/mazes";
	const response = await fetch(url, {
	method: 'POST',
	headers: kinveyHeaders,
	body: JSON.stringify(newMaze)
	});
	if (response.ok) {
	alert("added successfully");
	}
	}