Clock face Creation

[SunsetRunner]

I am new to using Fitbit studio and have got no experience in coding. I have used a basic watch face code as a base and edited very slight. I am having two problems. The first one is that I would like to have the time display over two lines so I can make the text size bigger. How would I do this within the style sheet or would I need to make changes within index.gui or widgets.gui?

#timeLabel {
font-size: 110;
font-family: Colfax-Black;
text-length: 5;
text-anchor: middle;
x: 50%;
y: 60%;
fill: white;

}

Also, I have created a style sheet for the heart rate but it does not seem to be displaying anything when I click to run.

This is what I have in index.js

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import { zeroPad, } from "../common/utils";
import { HeartRateSensor } from "heart-rate";
import userActivity from "user-activity";

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

// Get a handle on the <text> elements specified in the index.gui file
const timeHandle = document.getElementById("timeLabel");
const stepsHandle = document.getElementById("stepsLabel");
const heartrateHandle = document.getElementById("heartrateLabel");

// The following block read the heart rate from your watch
const hrm = new HeartRateSensor();

hrm.onreading = function() {
heartrateHandle.text = `${hrm.heartRate}`;
}

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

// Activity Values: adjusted type
let stepsValue = (userActivity.today.adjusted["steps"] || 0);
let stepsString = stepsValue + ' steps';
stepsHandle.text = stepsString;

}

[FlyFrosty · Accepted solution]

I have not done anything for heart-rate, so I will leave that for someone else.  The simplest way to get a 2 line time would be to have 2 elements within your styles.css.  One would be for the hours and the second line would be for the minutes.

#hourLabel {
font-size: 110;
font-family: Colfax-Black;
text-length: 5;
text-anchor: middle;
x: 50%;
y: 30%;
fill: white;

}

#minLabel {
font-size: 110;
font-family: Colfax-Black;
text-length: 5;
text-anchor: middle;
x: 50%;
y: 70%;
fill: white;

}

Then in your code, it would split to something like...

hourHandle.text = `${hours}:`;

minHandle.text = `${minsZeroed}`;

Hope this helps.