I need help on coding for stairs Please

[Warp9.9]

Hi Fitbit Commumity

I'm having a hard time on writing code for stairs(floors).

The number of stairs is not showing up on the Fitbit Simulator.

When I run my simulator, it just shows the time and no numbers for stairs.

Can someone please help me.

Here is my code so far...

-App 

--index

import clock from "clock";
import document from "document";
import userActivity from "user-activity";
import { locale } from "user-settings";
import { preferences } from "user-settings";
import * as util from "../common/utils";

// Update the clock every minute
clock.granularity = "minutes";

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");
let dailystairs = document.getElementById("myStairs");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
let today = evt.date;
let hours = today.getHours();
if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}
let mins = util.zeroPad(today.getMinutes());
myLabel.text = `${hours}:${mins}`;
}

-Comm

// Add zero in front of numbers < 10
export function zeroPad(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}

-Res

--Index

<svg class="background">
<text id="myLabel" />
<text id="myStairs" />
</svg>

--Style

.background {
viewport-fill: red;
}

#myLabel {
font-size: 80;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 50%;
y: 50%+40;
fill: white;
}

#myStairs {
font-size: 80;
font-family: System-Bold;
text-length: 30;
text-anchor: middle;
x: 50%;
y: 55%;
fill: white;
}

--Widget

<svg>
<defs>
<link rel="stylesheet" href="styles.css" />
<link rel="import" href="/mnt/sysassets/widgets_common.gui" />
</defs>
</svg>

Package Json

I've selected all the permissions 

[JonFitbit]

Try this:

import clock from "clock";
import document from "document";
import { today } from "user-activity";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { me as appbit } from "appbit";

// Update the clock every minute
clock.granularity = "minutes";

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");
const myStairs = document.getElementById("myStairs");

// Update the <text> element every tick with the current time
clock.ontick = evt => {
  let today = evt.date;
  let hours = today.getHours();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = hours % 12 || 12;
  } else {
    // 24h format
    hours = util.zeroPad(hours);
  }
  let mins = util.zeroPad(today.getMinutes());
  myLabel.text = `${hours}:${mins}`;

  if appbit.permissions.granted("access_activity") {
    if (today.local.elevationGain !== undefined) {
      myStairs.text = `${today.adjusted.elevationGain}`;
    }
  }
};

// Add zero in front of numbers < 10
export function zeroPad(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

[Warp9.9]

Thank you for responding very quickly.

I tried your suggestion, unfortunately it didn't work.

Build failed

Here is the fail report

• Building app for Fitbit Ionic
• app/index.js:29,6TS1005: '(' expected.
• app/index.js:29,52TS1005: ')' expected.
• Error: Failed to compile /project/app/index.js
  • Details: id: /project/app/index.js hook: transform code: PLUGIN_ERROR
• Build failed.

[JonFitbit]

Oh, sorry, try this:

import clock from "clock";
import document from "document";
import { today } from "user-activity";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { me as appbit } from "appbit";

// Update the clock every minute
clock.granularity = "minutes";

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");
const myStairs = document.getElementById("myStairs");

// Update the <text> element every tick with the current time
clock.ontick = evt => {
  let today = evt.date;
  let hours = today.getHours();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = hours % 12 || 12;
  } else {
    // 24h format
    hours = util.zeroPad(hours);
  }
  let mins = util.zeroPad(today.getMinutes());
  myLabel.text = `${hours}:${mins}`;

  if (appbit.permissions.granted("access_activity")) {
    if (today.local.elevationGain !== undefined) {
      myStairs.text = `${today.adjusted.elevationGain}`;
    }
  }
};

// Add zero in front of numbers < 10
export function zeroPad(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

[Warp9.9]

I tried your code, the build was successful but the screen is black. It doesn't show anything on the fitbit simulator watch screen just a black screen.

I just copy and pasted your code in the APP, Index.js