Untitled

--HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
</head>
<body>
<header>
    <img class="logo" src="https://images.unsplash.com/photo-1479722842840-c0a823bd0cd6?ixlib=rb-1.2.1&w=1000&q=80" height="399" width="600">
    <h1 class="site-title">Christmas</h1>
    <p class="site-description">Is coming</p>
  </header>
  <nav>
    <ul>
      <li><a href="https://www.calendar-12.com/holidays/christmas/2019">Christmas calendar</a></li>
      <li><a href="https://en.wikipedia.org/wiki/Christmas">About Christmas</a></li>
      <li><a href="https://www.timeanddate.com/holidays/common/christmas-day">Christmas day</a></li>
      <li><a href="https://en.wikipedia.org/wiki/Santa_Claus">Santa Claus</a></li>
    </ul>
  </nav>
  <main>
    <section class="about-me">
      <h1>About me</h1>
      <img src="https://i.pinimg.com/originals/cb/d5/a2/cbd5a2bf6c01c249be35eeb3539fb5c7.jpg">
      <p class="name">My name is Alex</p>
      <p class="description">I like Christmas</p>
    </section>
    <section class="contact">
      <h1>Contact</h1>
      <form>
        <label for="firstname">First name:</label>
        <input id="firstname" type="text" name="firstname"><br>
        <laber for="lastname">Last name:</label>
        <input id="lastname" type="text" name="lastname">
      </form>
    </section>
    <aside>
      <h1>Clock:</h1>
      <article class="clock">
      </article>
    </aside>
  </main>
</body>
</html>

--JS

showClock();
setInterval(showClock, 1000);

function showClock() {
  //document.querySelector('.clock').innerText = new Date();
  const date = new Date();
  const h = date.getHours();
  const m = date. getMinutes();
  const s =  date.getSeconds();
  if(s<10) {
    time = h + ':' + m + ':' + '0' + s;
  }
  else {
    time = h + ':' + m + ':' + s;
  }
  document.querySelector('.clock').innerText = time;
}