Build Instructions

Collapse

• 1

  CodePen

  CodePen is development environment. It allows you to write your code in the browser and see the results of it as you go. We have code in HTML, CSS, and JavaScript to create a web form with drop-downs, text boxes, and geolocation. You can sign up for free with the only stipulation being you can’t make your code private, which we will address later.

  First, sign up for CodePen. Once you do that you can Fork my project with all the code already created or check out the files attached to this project. If you fork it then it will create a copy of the code in your own dashboard. You will see HTML on the left, CSS in the center, and JavaScript on the right. If you are an expert in all these, forget reading the rest and make changes as you like! If you are newer to these languages, I have some suggestions below on changes you can easily make.

  HTML

  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.

  CSS

  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.

  JavaScript

  This piece of code works the geolocation button and submit button. There isn't much here I'd recommend changing.

  Export

  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.

• 2

  Initial State

  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).

• 3

  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.

View all 6 instructions