Two Simple Clock Faces - Merging into single clock face with AOD

[Wrocky]

Hello Fitbit Dev World,

I am know barely anything about coding, and if you've seen the Office which I hope everyone has, I need people to explain this to me like an 8 year-old, and then a 5 year-old.

I'm a simple person, I've created with the help of some coding found on Github threads, two very simple clock faces. The first is the main one, time in the middle, steps top left, battery top right, heart rate bottom right and the date bottom left. Simple and effect.

I also used some coding of a fancier analog clock face and paired it down to literally just the hour/minute hand, and minute markers that go in a circle, which I want to be the always on display.

I understand the AOD approval process takes a long time, especially for someone like myself, but I'd like to get this working and at least try to put it in the queue so I can use it myself and obviously publish this for anyone to use for free.

My problems, at least what I think they are: 1) I've tried to add the AOD clock face into the main clock face index.js, index.view and styles.css. I've gotten so far as both working at the same time, on top of each other. I assume from there I can add the AOD language I found on the Fitbit website, but then I must make some things hidden, like the markers and clock face when the normal display is on.

I've been able to figure out how to hide the hours, minute and dots I had with the analog clock. I'm having trouble being able to make the minute marker go away as they're in the index.view section of the code. Is it possible to hide them from the index.js section somehow?

I don't know, I feel like I'm close but also really far away and would like any input any of you all would have. I created a Github account, and posted the coding for each of the faces individiually, and then also the merged face that seems to run on top of each other. (https://github.com/wrouquie?tab=repositories

Thanks

[Pietero]

I only read one question in your topic. How to hide and show elements from javascript.

//Show the element with id="minutemarker"
getElementById('minutemarker').style.display = "inline";

//Hide the element with id="minutemarker"
getElementById('minutemarker').style.display = "none";

[Wrocky]

thank you Pietero, I was able to do that with the minute and hour hands, I think that's the case because they were defined. On my index.view tab, I've below is a snip of the language to make the markers. Within the index.js, I tried getElementByClass('maindialtwelve markercolour').style.display="none" thinking maybe that would work but no go. Again, I'm five when it comes to this. I promise if I wanted to do anything more than these simple watch faces I'd actually take some Java courses.

<defs>
<symbol id="maindial">
<rect x="-3" class="maindialtwelve markercolour"/>
<rect x="2" class="maindialtwelve markercolour"/>

<g transform="rotate(90)"><rect class="maindialquarter markercolour"/></g>
<g transform="rotate(180)"><rect class="maindialquarter markercolour"/></g>
<g transform="rotate(270)"><rect class="maindialquarter markercolour"/></g>

[Pietero]

Wrocky,

Hmm. I see you have to learn some basic principles.

First of all, you have classes and ID's. Classes should be used multiple times on different elements and ID's are unique and are used once. Search the web for more info about this. I think this forum is not the place to ask very basic javascript questions. Search the web for your solutions or take an online javascript class.

Your JS should be: getElementsByClassName('maindialtwelve')

const  elements = document.getElementsByClassName("maindialtwelve");
  for (var i = 0; i < elements.length; i++) {
    //add magic here
  }

getElementsByClassName returns a list of objects since you regulary find more elements then one.