August 14, 2022

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 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 class="clock__date">
          <!-- <span id="date-day-week"></span> -->
          <span id="date-day"></span>
          <span id="date-month"></span>
          <span id="date-year"></span>

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 usage, please go to the official website.


You may also like...

Leave a Reply

Your email address will not be published.