Modern Mobile-first Clock UI In JavaScript

Preview:

Description:

A pretty clean, mobile-first, and Neumorphic style analog & digital clock UI with dark & light themes, built with JavaScript, CSS, and HTML.

How to use it:

1. The markup structure for the clock UI.

<section class="clock container">
  <div class="clock__container grid">
    <div class="clock__content grid">
      <div class="clock__circle">
        <span class="clock__twelve"></span>
        <span class="clock__three"></span>
        <span class="clock__six"></span>
        <span class="clock__nine"></span>
        <div class="clock__rounder"></div>
        <div class="clock__hour" id="clock-hour"></div>
        <div class="clock__minutes" id="clock-minutes"></div>
        <div class="clock__seconds" id="clock-seconds"></div>
        <!-- Dark/light button -->
        <div class="clock__theme">
          <i class='bx bxs-moon' id="theme-button"></i>
        </div>
      </div>
      <div>
        <div class="clock__text">
          <div class="clock__text-hour" id="text-hour"></div>
          <div class="clock__text-minutes" id="text-minutes"></div>
          <div class="clock__text-ampm" id="text-ampm"></div>
        </div>
        <div class="clock__date">
          <!-- <span id="date-day-week"></span> -->
          <span id="date-day"></span>
          <span id="date-month"></span>
          <span id="date-year"></span>
        </div>
      </div>
    </div>
  </div>
</section>

2. Load the necessary JavaScript and CSS files in the document. That’s it.

<link rel="stylesheet" href="assets/css/styles.css" />
<script src="assets/js/main.js"></script>

3. Customize the clock UI by overriding the default CSS variables.

:root {
  /*========== Colors ==========*/
  --hue-color: 240;
  --first-color: hsl(var(--hue-color), 53%, 49%);
  --title-color: hsl(var(--hue-color), 53%, 15%);
  --text-color: hsl(var(--hue-color), 12%, 35%);
  --text-color-light: hsl(var(--hue-color), 12%, 65%);
  --white-color: #FFF;
  --body-color: hsl(var(--hue-color), 24%, 94%);
  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 3rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  --tiny-font-size: .625rem;
  /*========== Font weight ==========*/
  --font-medium: 500;
  /*========== Margenes Bottom ==========*/
  --mb-0-25: .25rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2-5: 2.5rem;
  /*========== z index ==========*/
  --z-normal: 1;
  --z-tooltip: 10;
}