All About Analog Clocks

#javascript

I create an animated Analog Clock when at the beginning of my JavaScript journey. I was excited to get started and I knew that I could add my own personal style.

The first step was to set up the HTML code in different class attributes from 1 to 12.

     <div class="clock">
                <div class="hand hour" data-hour></div>
                <div class="hand minute" data-minute></div>
                <div class="hand second" data-second></div>
                <div class="number number1">1</div>
                <div class="number number2">2</div>
                <div class="number number3">3</div>
                <div class="number number4">4</div>
                <div class="number number5">5</div>
                <div class="number number6">6</div>
                <div class="number number7">7</div>
                <div class="number number8">8</div>
                <div class="number number9">9</div>
                <div class="number number10">10</div>
                <div class="number number11">11</div>
                <div class="number number12">12</div>
            </div>

            <script src="clock.js"></script>     
        </body>

JavaScript

I created an array with a variety of colors, then implemented that array in the randomColor() function to change the color on each second, as shown below
.

let colorArray = ["#71b8bd", "#6ebcbe", "#6cc1be", "#6bc5be", "#6ac9bd", "#6bcdbb", "#6dd1b9", "#71d5b6", "#75d8b2", "#7bdcae", "#82dfa9", "#8ae2a4", "#93e59f", "#9de899", "#a7ea93", "#b2ed8d", "#beef87", "#caf082", "#d6f27c", "#e3f377"]

function changeColor() {
  let randomColor = colorArray[Math.floor(Math.random() * colorArray.length)];
    document.getElementById('bg-color').style.backgroundColor = randomColor;
}