Analog Clock With JavaScript And SCSS

Category: Date & Time , Javascript | November 8, 2018
Author: vishal-wadhwa
Views Total: 124
Official Page: Go to website
Last Update: November 8, 2018
License: MIT

Preview:

Analog Clock With JavaScript And SCSS

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;

Leave a Reply