Where am I going wrong?

[markk100]

Good day all,

I'm hoping, after two days worth of staring at this code, someone might tell me where I've gone astray.

I'm attempting to create a custom ClockFace, and full disclosure, I have basically no coding experience.  I've been picking my way through JavaScript, CSS, and SVG as I go.  

I'm currently stuck, very stuck...I'm attempting to display the current time and Month/Date 'NOV 13', just above it.  I can get it all to display correctly if I hard code in a value, but it all goes kaput when I try to incorporate the array into the utils.js.  I'm curious if someone can see the obvious error/s as to why I continue to get:

Unhandled ReferenceError: getDisplayMonth is not defined displayMonth at app/index.js:15,1

The above referenced error is on a line that has a const hours reference?  Doesn't make any sense to me...In any event, here's the code base as it sits, broken currently:

index.js

import clock from "clock";
import document from "document";
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 Time = document.getElementById("Time");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
const now = evt.date;
const hours = now.getHours();
const mins = util.zeroPad(now.getMinutes());
const Month = now.getMonth();
const Date = now.getDate();

const displayMonth = getDisplayMonth(Month);
const displayDate = getDisplayDate(Date);

if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}

Date.text = `${displayMonth} ${displayDate}`;
Time.text = `${hours}:${mins}`;
}

utils.js

export function getDisplayMonth(month) {
const strMonths = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "OCT", "NOV", "DEC"];
return strMonths[month];
}
// Add zero in front of numbers < 10
export function zeroPad(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}

index.gui

svg class="background">
<line x1="325" y1="25" x2="325" y2="225" fill="#F76833" stroke-width="16" />
<text id="Month" />
<text id="Date" />
<text id="Time" />
</svg>

styles.css

.background {
viewport-fill: #55A6C2;
}

#Month {
font-size: 25;
font-family: System-Bold;
text-length: 3;
x: 5%;
y: 22%;
fill: #F76833;
}

#Date {
font-size: 25;
font-family: System-Bold;
text-length: 2;
x: 5%+60;
y: 22%;
fill: #F76833;
}

#Time {
font-size: 80;
font-family: System-Bold;
text-length: 5;
x: 5%;
y: 50%;
fill: #F76833;
}

Any guidance you can share to fix the immediate issue, and/or any glaring issues with my strategy would be greatly appreciated.  I need to solve for this, prior to implementing some other things I'd like to do.

Many many thanks in advance for any help.

Cheers

Mark

[FlyFrosty]

Not an expert here, but I think you need to "get a handle on" more text elements.  You have:

const Time = document.getElementById("Time");

but not one for Date or Month.

[Gondwana]

Try util.getDisplayMonth

[jomis003 · Accepted solution]

You are calling importing *util, but you are constructing the date/month.

import * as util from "../common/utils";

const displayMonth = getDisplayMonth(Month);
const displayDate = getDisplayDate(Date);

Because your function for this in utils is being exported, the correct syntax would be:

util.getDisplayMonth(Month);

[markk100]

Hey Jomis, et al...

Thank you all so much for the input...yes, Jomis, you're correct.

I actually went back and re-factored a bunch of code...all is working now...

I fear the tough stuff is yet to come, lest I've got this ironed out.

I hope in the future I can add value to the forum, and not just take.  But, I'm a ways off I gather...

Be well,

Mark