Press "Enter" to skip to content

Responsive Analog Clock Ui Design Using HTML CSS & JavaScript

Responsive Clock UI is a very clean Neumorphic style analog and digital user interface, mobile-first, with dark and light themes, built using JavaScript, CSS and HTML.

javascript digital clock with date, javascript analog clock code free download, javascript world clock, html5 digital clock code, javascript clock

How to make use of 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 required JavaScript and CSS files within the doc.

<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;
}

Modern Mobile-first Clock UI, Responsive Clock Ui Plugin/Github, analog clock javascript, bootstrap clock, html5 clock


See Demo And Download

Official Website(bedimcode): Click Here

This superior jQuery/javascript plugin is developed by bedimcode. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *