Feeling Incompentent

[emtphto]

Working on making my own watch faces since so few have seconds and I need it for work.

Would love to have the Month & Day on my watch face as well ... no matter how many other boards I've looked at, I can't make it show up.
Trying to get this to work for Versa 2 with the Month & Date in the upper right corner.

I haven't done coding since HTML was "the Thing" to do 😳

Index.js coding:

const timeHandle = document.getElementById("timeLabel");
const batteryHandle = document.getElementById("batteryLabel");
const stepsHandle = document.getElementById("stepsLabel");
const heartrateHandle = document.getElementById("heartrateLabel");
const myMonth = document.getElementById("myMonth");
const myDay = document.getElementById("myDay");

Heart rate coding here

clock.ontick = (evt) => {
const now = evt.date; // get the actual instant
let hours = now.getHours(); // separate the actual hours from the instant "now"
let mins = now.getMinutes(); // separate the actual minute from the instant "now"
let secs = now.getSeconds(); // separate the actual second from the instant "now"
if (preferences.clockDisplay === "12h") { // check from your wach settings if you use 12h or 24h visualization
// 12h format
hours = hours % 12 || 24;
} else {
// 24h format
hours = zeroPad(hours); // when you use 24h in case hours are in one digit then I put a zero in front. i.e. 3 am -> 03
}
let minsZeroed = zeroPad(mins); // one digit mins get a zero in front
let secsZeroes = zeroPad(secs); // one digit secs get a zero in front
timeHandle.text = `${hours}:${minsZeroed}:${secsZeroes}`;

Steps & Battery coding here

let monthnum = today.getMonth();
let day = today.getDate();

var month = new Array();
month[0] = "Jan";
month[1] = "Feb";
month[2] = "Mar";
month[3] = "Apr";
month[4] = "May";
month[5] = "Jun";
month[6] = "Jul";
month[7] = "Aug";
month[8] = "Sep";
month[9] = "Oct";
month[10] = "Nov";
month[11] = "Dec";
let monthname = month[monthnum];
myMonth.text = `${monthname}`;
myDay.text = `${day}`;
}

Index.view/index.gui coding:

<svg class="background">
<image href="autumn.jpg"/>
<text id="timeLabel"/>
<text id="dateLabel" />
<text id="heartrateLabel" />
<text id="batteryLabel" />
<text id="stepsLabel" />
<text id="myMonth"/>
<text id="myDay"/>
</svg>

Style.css Coding:

#timeLabel {
font-size: 100;
font-family: Tungsten-Medium;
text-length: 8;
text-anchor: start;
x: 53;
y: 140;
fill: white;
}
#myMonth {
font-size: 20;
font-family: Tungsten-Medium;
text-length: 4;
text-anchor: start;
x: 172;
y: 10;
fill: blue;
}
#myDay {
font-size: 20;
font-family: Tungsten-Medium;
text-length: 4;
text-anchor: start;
x: 172;
y: 10;
fill: blue;
}

[emtphto · Accepted solution]

disregard! slowing down and drinking more coffee made it work

[Guy_]

A technique to simply things and save space is

myMonth.text = today.toString().substr(0,3);