Digital Clock Script While learning JavaScript I thought it was a good idea to make a digital clock program. I followed a youtube tutorial (with some tweaks to my preference) and came up with my final code that I have. I came to CodeReview to get the script reviewed, and to ask is there anything wrong with the script and/or any way to improve it as a whole. Ways to make the script shorter (yet also high in performance) are also accepted. I am also curious on if I have any 'red flags' currently. I will be giving the best answers the green checkmark. Thanks!


function showTime() {
  const date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  let session = (hours &lt; 12) ? "AM" : "PM";

  if (hours === 0) {
    hours = 12;
  } else if (hours &gt; 12) {
    hours -= 12;
  }
  hours = (hours &lt; 10) ? '0' + hours : hours;
  minutes = (minutes &lt; 10) ? '0' + minutes : minutes;
  seconds = (seconds &lt; 10) ? '0' + seconds : seconds;

  const time = `${hours} : ${minutes} : ${seconds} ${session}`;
  document.querySelector('div').innerHTML = time;

  setTimeout(showTime,1000)
}

showTime()
&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Digital Clock&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;script src = "script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;



TL;DR: I am a JavaScript programmer, and CSS currently isn't my suite, therefore I know that the clock can use some styling. How can the JavaScript code be improved?
1
You are repeating condition ? '0' + integer : integer 3 times.
This can be reduced with const zeroPad = (num, places) =&gt; String(num).padStart(places, '0')
and doing
  hours = zeroPad(hours, 2);
  minutes = zeroPad(minutes, 2);
  seconds = zeroPad(seconds, 2);

The 2 is now a repeated magic number and you may wish to store it in a variable with a descriptive name.
2
&lt;script src = &quot;script.js&quot;&gt;&lt;/script&gt;
Usually, there are no spaces around the equals sign:
&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
3
I'm not familiar with JavaScript, but I would replace the nested setTimeout:
function showTime() {
  // ...
  setTimeout(showTime, 1000)
}

with a setInterval:
setInterval(showTime, 1000);
I would also place a space after the comma.
4
For formatting the time, take a look at this answer which suggests using:
hours = hours % 12;
hours = hours ? hours : 12;

5
You use document.querySelector('div') but this &quot;returns the first Element within the document that matches the specified selector&quot;.
I would suggest using &lt;div id=&quot;...&quot;&gt;&lt;/div&gt; and document.getElementById