Animated-Clock

• Live Site URL: Click here to check it out!

• Table of contents

  • Overview
  • Features
  • Technologies Used
  • What I learned
  • Author

Overview

The "Animated Clock" project is a JavaScript application that creates an interactive and customizable analog clock displayed on an HTML5 canvas.With the prsence of animation frames, the clock's hands move smoothly to reflect the current time, providing an engaging and visually delightful experience for users. The project also provides users with the ability to adjust the clock's appearance and save it as an image.

Features

• Customizable Appearance: Users can choose colors for the clock face, border, hour lines, minute lines, hour hand, minute hand, and second hand. The real-time color updates give users full control over the clock's aesthetics.
• Save as Image: The "Save" button enables users to save their customized clock as an image file (PNG). When clicked, the clock's current state is converted into a data URL and made available for download.
• Real-Time Updates: The clock displays the current time in real-time, providing a functional timekeeping tool along with visual appeal.

Technologies Used

• HTML5 Canvas
• CSS3
• JavaScript (ES6+)

What I Learned

Through this project, I gained valuable experience in the following areas:

• Understanding and utilizing the requestAnimationFrame method for smooth animation.
• Working with the HTML5 canvas element to create interactive graphics and animations.
• Manipulating the 2D drawing context in JavaScript to draw shapes, lines, and custom designs.
• Utilizing the toDataURL method to convert the canvas content into a downloadable image.

Author

• Github -@thegirlcoderr

• Twitter - @thegirlcoder