Simple Responsive Analog Clock Using HTML, CSS & JavaScript ...

-

 Hello there, Let's create a simple responsive analog clock with the help of Html, CSS, and JS.

Working Link: Link

Created a simple HTML file containing a class container for the clock and that container consist of three divs for each hand. In the CSS file I used png image for clock structure, then set each hour, minute, and second hand at its correct position with the container with a position as relative. Now to make it real-time working I used the setInterval method [ The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds) ] which gonna execute for 1000 milliseconds. For each hand to find the angle of rotation use the following basic calculations and using transform CSS property we have to rotate them by origin as the bottom. 


         angle for hour hand==>  [ 360/12H+ 30/60M ] ==> 30h+0.5m 

         angle for minute hand==>   1min=6 degree 

         angle for second hand==>   1sec=6 degree 


A reference I used for this one: Video

To create clock without png image check out the following article: Link







Location: Maharashtra, India

Popular posts from this blog

"The Blogosphere Unleashed: ChatGPT's Insights into the Future of Blogging"

-
In recent years, the rise of AI tools and advancements in technology have significantly transformed various industries, including blogging. As bloggers continue to adapt and embrace these developments, it is essential to explore the future of bloggers in an AI-driven world. This blog post will delve into the potential impact of AI tools, the evolving role of bloggers, and how they can leverage these advancements to thrive in the digital landscape. AI's impact on the creativity of human beings is a topic of much debate and speculation. While some may argue that AI could potentially stifle human creativity, there are compelling arguments for the opposite viewpoint as well.  While the long-term impact of AI on human creativity is still unfolding, there is reason to believe that it can be a powerful ally rather than a threat. AI tools have the potential to inspire, streamline workflows, and unlock new forms of creativity. By embracing AI as a collaborative partner, human creators can h
Read more

Naval Ravikant : How to Get Rich ( Without Getting Lucky)

-
Image
 Naval Ravikant: Venture capitalist, Investor, Entrepreneur, Best-Selling Author, Angel Philosopher, YouTuber, PoadCaster...  He is an active angel investor, co-founder, and former CEO of  AngelList , Naval invested in more than 100 companies, some of which are unicorns right now."The Almanack Of Naval Ravikant": Book compiled by Eric Jorgenson talks about almost every aspect of life, which is a collection of some tweets, Podcasts, and essays over the time span of the last decade. Check out:  Naval   Youtube Channel:  Naval One of the Twitter threads of Naval is very famous: How to get rich ( without getting lucky), In this thread, he is talking about ways to create wealth, leverage, attaining specific knowledge, building relationships, and operating startups. Some of my favorite chunks of it : Seek wealth, not money or status. Wealth is having assets that earn while you sleep. Money is how we transfer time and wealth. Status is your place in the social hierarchy. Specific Kn
Read more