Giter Site home page Giter Site logo

vericlockengine's Introduction

VeriClockEngine use

Clone this repository or just download the clockengine.js. You do not need to have the .ts files in your final solution.

You will need to create an HTML file to hold your solution but that is probably clear now. After that, here is the code that I am using in my final clock solution to call and process the results from this clock engine.

   
   <script type="text/javascript" src="clockengine.js"></script>
    <script type="text/javascript">
        /*
            The following is simply an example for the purposes of testing the setSpecificTime() method of the ClockEngine - it is not necessary
        */
        Date.prototype.addHours = function(h) {
            this.setTime(this.getTime() + (h*60*60*1000));
            return this;
          }
        /*
            IIFE to contain the primary functionality for displaying the clock.  
            If you create your user interface with display ids #hour, #minute, #second (and #dayDisplay, #weekdayDisplay, #monthDisplay if doing the calendar)
            then this should work. I chose a circle of 600px radius.
        */
        const clockModule = (function () {
            let hourhand, minutehand, secondhand, dayDisplay, weekdayDisplay, monthDisplay, interval;
            let showClock = (hrPosition, minPosition, secPosition, day, weekday, month) => {
                dayDisplay.textContent = day;
                weekdayDisplay.textContent = weekday;
                monthDisplay.textContent = month;
                //Then we need to apply these numbers as degrees in the inline styles for transform on each of the objects.
                hourhand.style.transform = `rotate(${hrPosition}deg)`;
                minutehand.style.transform = `rotate(${minPosition}deg)`;
                secondhand.style.transform = `rotate(${secPosition}deg)`;
            };
            let clock = new ClockEngine(showClock);
            let startCallback = () => {
                hourhand = document.querySelector('#hour');
                minutehand = document.querySelector('#minute');
                secondhand = document.querySelector('#second');
                dayDisplay = document.querySelector("#dayDisplay");
                weekdayDisplay = document.querySelector("#weekdayDisplay");
                monthDisplay = document.querySelector("#monthDisplay");
                clock.startClock();
                /*The following is just an example, you can specify exact times with date strings, 
                this is useful for setting the exact positions of the minute markers*/
                //clock.setSpecificTime(new Date().addHours(1)); 
            };
            return {
                startCallback: startCallback
            }
        })();
        //This is a pure Javascript method of guaranteeing that the code starts to run after the DOM is loaded in different browsers
        (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ?
            clockModule.startCallback() : document.addEventListener("DOMContentLoaded", clockModule.startCallback));
    </script>
    ```

vericlockengine's People

Contributors

harvellm avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.