My friend from London, Paul, wanted to find a way to track his food, activity, and location in a single dashboard. That's when he came up with the idea to create a simple web form that would send data to a dashboard. He would put both the web form and dashboard in a webpage and log his activities on the go. From there the activity logger was created! The code in this tutorial is all Paul, except for some slight changes in color, dashboard customization, and slang (British to American translation done by me).
This piece of code is the format for all the drop-downs and boxes. It is here that you can change the type of things you track and lists in the drop-downs. In the Exercise drop-down, you can change the types of activity (currently Weights, Running, Yoga, & Cardio). You can add something to the list following the format or add more options. The same things goes for Meat type, Coffee size & type, and Beer size. In the Junk text box you can change the placeholder words (currently chips, chocolate, etc.). Same can be done for Weight (lbs), Exercise (minutes), and Beer (abv %).
You can also use this outline and completely change the titles, drop-down options, and placeholders to make this web form any kind of tracker you want.
This piece of code sets the background color, text alignment, and column alignment. If you want to change the background from nauseating pink to something more pleasant just use an online color picker to find the right color value. You can align the text or columns right, left, or center.
This piece of code works the geolocation button and submit button. There isn't much here I'd recommend changing.
Once you have everything set to your liking, click the export button on the bottom right and select export as.zip. This will download the code into a zip file and you'll see it in your downloads folder.
Initial State will allow us to create a customized dashboard of the activity we track. You can sign up for a 14 day free trial. After that it is free for Students with an edu email address or $9.99 per month for the Individual plan.
Once you have signed in or signed up go to your bucket shelf and create a new data stream bucket by clicking the create stream bucket button (+cloud). You can edit the name to whatever you like or change it later, I chose Personal Activity Tracker. If you check the Light Theme box you will give the dashboard a white background. Click done and your stream bucket will be created.
We will need information from the bucket settings later to put into the HTML code (API Endpoint & iframe embed).
Visual Studio Code
Since I'm using the free version of CodePen all my code is public. For this reason, I don't want to put my API endpoints and iframe embed into the code since you need to keep your Initial State access keys private. Visual Studio Code will allow me to edit my code locally from the zip file I downloaded from CodePen. You can download the latest version for free from their website.
Unzip your code files and open that folder in Visual Studio Code. From here you can then edit the HTML code. Towards the top of the file you will see “ENTER API ENDPOINTS HERE”. You can find the API Endpoint by going to the bucket you created on Initial State, click settings and under the Data tab you will see API Endpoint. Copy and paste this into the HTML code. At the bottom the HTML code you will see "ENTER EMBED SHARE HERE". Again go to your bucket in Initial State, go to the settings and the Sharing tab. Click the Share Publicly box and you will see Share by Embed. Copy only the URL in the embed share box (it will look something like "https://iot.app.initialstate.com/embed/#/tiles/xxxxxx"). Paste that into the quotation marks. Save the file and we are ready to create our webpage.