Skip to content

Responsive Analog Clock Ui Design Using HTML CSS & JavaScript , Light & Dark Theme

Notifications You must be signed in to change notification settings

AbdullahButt2611/AnalogClock

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Analog Clock

HTML CSS & JavaScript | Light & Dark Theme



This repository contains an interactive analog clock built with HTML, CSS, and JavaScript. The clock provides an accurate representation of the current time, with animated hands that move dynamically based on the time. The clock face and hands have been styled with CSS to give it the traditional look of an analog clock. The clock is fully customizable, allowing users to change its appearance and functionality to meet their specific needs. This clock provides a visually appealing and interactive experience for users, making it a great addition to any website or application.
An analog clock made with HTML, CSS, and JavaScript is a digital clock that imitates the appearance and functionality of a traditional analog clock. It consists of HTML elements to create the clock face, CSS for styling, and JavaScript for controlling the clock's movements and displaying the time accurately. The clock is animated using JavaScript, and the hands of the clock move dynamically based on the current time. The clock can be customized to change the appearance and functionality to meet specific needs. This type of clock provides a visually appealing and interactive experience for users.



Features


Following are some of the new features and learning encountered while creating this amazing project:
  • This site is theme supported and the user can maintain one for its use.



Resources


Follwing resources have been used in maintaining this project:
  • Box Icons is used to import the icons into the project
  • Google Fonts is used to import the font family of Poppins
  • W3 Schools to find the hSL value for the theme customization
  • Remove BG to remove the background of the image to make it a logo.



Demo

The Demo of this working project can be found on
https://rebrand.ly/AnalogClock_MABCORP



Video

You can exclusively watch the video on this project from the making to deploying on my channel with the link given below

Video Link

If you like my video then do Like the Video and share it with others.



Graphical User Interface

GUI for this Project GUI for this Project



Technology Stack


Follwing technologies have been used at the core of this application to make it stand in the market place:
  • HTML
  • CSS
  • JavaScript



Advancement

Nothing Recommended Yet



Deployment Details

The website is deployed using the free hosting provided by Vercel



Later on the link was customized using the well-known URL shortener and customizer **Rebrandly**:



Developer

Muhammad Abdullah Butt
abdullahbutt12292210@gmail.com

Instagram
FaceBook
YouTube
Portfolio
Project Displayer

About

Responsive Analog Clock Ui Design Using HTML CSS & JavaScript , Light & Dark Theme

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published