Goal Make a simple website to start and stop a Handy using the Handy API v2 (https://sweettech.notion.site/Handy-API-v2-ebe029f8999c48ad93423663a0974cd4)
Completion time 10min
Skills needed Minimal HTML+Javascript skills

https://youtu.be/dtFhX9hX_tY

Intro

The Handy API v2 is a straightforward REST API. You can also use this tutorial to get a pointer on how to use the API in non-javascript applications.

<aside> 💡 We are not focusing on edge cases and error handling in this tutorial.

</aside>

Initialize the project

Create the project

Create a folder and navigate into the folder (and open vscode):

mkdir demo-api
cd demo-api
code .

Create a file index.html in the folder

Make the website

<aside> 💡 Tips for vscode users: Type doc to get a boilerplate website.

</aside>

Screenshot of how the app is going to look

Screenshot of how the app is going to look

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo API</title>
</head>

<body>
    <h1>Demo API</h1>
    <button id="start-button">Start</button>
    <button id="stop-button">Stop</button>
</body>
</html>

Add click listeners

Add the event listeners to capture the clicks on the buttons.