Why does innerHtml return undefined?

Question

css

Hello. I'm learning js, I'm making a countdown timer until a certain date. It is necessary to substitute 0 for numbers if one is unambiguous. I put it in like this:

function formatTime(time) {
    if (time < 10){
      time = '0'+time;
    }
    result =time;
  }

and put it on the page with the following line:

var sec = document.querySelector('#sec');
        sec.innerHTML = formatTime(secondsNumber);;

In span c id="sec" "undefined" is displayed, what's the problem, tell me? On result, the output shows the string type, no "undefined".

Answer 1

All in one picture is not universal, especially since it is not difficult to make up.
The first example is one circle with a gradient, the second is white, on top.
The second example is the same circle with a gradient, and overlap half of it. In my opinion, options with a large number of border-radii can break the brain, but here the taste and color ...

Answer 2

The semicircle is very easy to do with pure css:

.radius {
  display: block;
  width: 50px;  /* ширина в два раза меньше высоты, иначе получится полуовал */
  height: 100px;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  background: linear-gradient( rgb(101,220,167) 0%, rgb(53,112,94) 100%)
}

And you can either make a stroke using SVG, or two circles, the background one with a gradient, and the front one with a white fill and a couple of pixels smaller, for example, a picture of a clock and two pseudo-elements
UPD:
here is an option with SVG, either inline, or make SVG in advance -picture and substitute in CSS to the background of the element

Answer 3

result =time;
// replace to
return time;

Your formatTime function does not return a value