Analog Clock With JavaScript And SCSS

Category: Date & Time , Javascript | November 8, 2018
Views Total:4,244 views
Official Page:Go to website
Last Update:November 8, 2018


Analog Clock With JavaScript And SCSS


A simple, lightweight analog clock built with JavaScript and CSS/SCSS.

How to use it:

Create the HTML for the analog clock.

<div class="clock">
  <div class="clock__hours-hand" id="hours-hand"></div>
  <div class="clock__minutes-hand" id="minutes-hand"></div>
  <div class="clock__seconds-hand" id="seconds-hand"></div>
  <span class="clock__hand-pivot" id="hand-pivot"></span>
  <span class="clock__dial-hour">1</span>
  <span class="clock__dial-hour">2</span>
  <span class="clock__dial-hour clock__dial-hour--main">3</span>
  <span class="clock__dial-hour">4</span>
  <span class="clock__dial-hour">5</span>
  <span class="clock__dial-hour clock__dial-hour--main">6</span>
  <span class="clock__dial-hour">7</span>
  <span class="clock__dial-hour">8</span>
  <span class="clock__dial-hour clock__dial-hour--main">9</span>
  <span class="clock__dial-hour">10</span>
  <span class="clock__dial-hour">11</span>
  <span class="clock__dial-hour clock__dial-hour--main">12</span>

Import the main JavaScript into the project.

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

Customize the analog clock in the SCSS.

$primary: black;
$primary-2: white;
$secondary: gray;
$accent: red;
$clock-border: 10px;

You Might Be Interested In:

Leave a Reply