Analog Clock With JavaScript And SCSS

Preview:

Description:

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>
</div>

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;