Author: | vishal-wadhwa |
---|---|
Views Total: | 4,244 views |
Official Page: | Go to website |
Last Update: | November 8, 2018 |
License: | MIT |
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;