Digital Clock Script

1

You are repeating condition ? '0' + integer : integer 3 times.

This can be reduced with const zeroPad = (num, places) => 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

<script src = "script.js"></script>

Usually, there are no spaces around the equals sign:

<script src="script.js"></script>

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 "returns the first Element within the document that matches the specified selector".

I would suggest using <div id="..."></div> and document.getElementById

I assume, that you are exercising formatting and handling time correctly, so I won't mention, that you could do it in a "oneliner" using the existing api (for the options see here):

  let options = {
    hour12: true,
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
  };

  function showTime() {
    container.textContent = (new Date()).toLocaleTimeString("en-US", options);
  }
setInterval(showTime, 1000);

Another way to format a number by is again to use the existing api instead of String.padStart():

  let x = 42;
  console.log(x.toLocaleString("en-US", { minimumIntegerDigits: 3 }));

Here the option speaks for itself, and the output is "042".

The other answers address the most to be said about your code. One thing not mentioned is, that your watch potentially can be as much as nearly one second behind the actual time, if it is started somewhere in between two seconds. To align with the system time, you could do the following:

setTimeout(() => setInterval(showTime, 1000), 1000 - (new Date()).getMilliseconds());

Here setTimeout() is waiting for the next system's second to occur, and then starting the watch by calling setInterval().

It's looking good and it works. A few remarks within the code

function showTime() {
  const date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  let session = (hours < 12) ? "AM" : "PM";
  // You can stringify the minutes and seconds using a template string, 
  // for later zero padding (see snippet).

  if (hours === 0) {
    hours = 12;
  } else if (hours > 12) {
    hours -= 12;
  }
  // ^ this can be a bit shorter using a ternary operator
  // or you can even do without it using hours % 12 (see snippet)
  hours = (hours < 10) ? '0' + hours : hours;
  minutes = (minutes < 10) ? '0' + minutes : minutes;
  seconds = (seconds < 10) ? '0' + seconds : seconds;
  // ^ modern es20xx knows a native string method called 'padStart'

  const time = `${hours} : ${minutes} : ${seconds} ${session}`;
  document.querySelector('div').innerHTML = time;
  //                            ^ you may want to use textContent 
  // ^ if there's more in your document you may want to use an identifier 
  // (e.g. id or a data-attribute)

  setTimeout(showTime,1000)
  //                       ^ do not forget semicolons
}

showTime()
//        ^ do not forget semicolons

A note for the html within the snippet: you do not need a complete html document in code review snippets, your html will be automatically wrapped in a document.

For the rationale to use semicolons, see this article.

Why textContent? From MDN

It is not uncommon to see innerHTML used to insert text into a web page. There is potential for this to become an attack vector on a site, creating a potential security risk.

function showTime() {
  const date = new Date();
  // converting hour/minutes/seconds to zero padded strings right away
  const hours = `${(date.getHours() % 12) || 12}`.padStart(2, 0);
  // ^ hours: if the value is 0, js considers it to be 'falsy'
  // that's why we can use this 'short-circuit evaluation`
  const minutes = `${date.getMinutes()}`.padStart(2, 0);
  const seconds = `${date.getSeconds()}`.padStart(2, 0);
  const session = date.getHours() < 12 ? "AM" : "PM";
  //            ^ because hours now is a string (and < 12)
  const time = `${hours} : ${minutes} : ${seconds} ${session}`;
    
  // use an identifier (data-attribute), and use textContent
  document.querySelector('div[data-isclock]').textContent = time;

  setTimeout(showTime,1000);
}

showTime();

<!-- added data-isclock -->
<div data-isclock="1"></div>

The clock method may even be shorter:

const currentTime = date => 
  `${`${(date.getHours() % 12) || 12}`.padStart(2, 0)} : ${
    `${date.getMinutes()}`.padStart(2, 0)} : ${
      `${date.getSeconds()}`.padStart(2, 0)} ${
        date.getHours() < 12 ? "AM" : "PM"}`;
setInterval(() => 
  document.querySelector("div[data-isclock]")
    .textContent = currentTime(new Date()), 1000);

<div data-isclock></div>