This project showcases a real-time digital clock and date display using Vue.js and Moment.js. The clock updates every second and shows the current time in hours, minutes, and seconds. The date is displayed below the clock in a stylized format.
- Real-time clock updating every second.
- Displays hours, minutes, and seconds.
- Shows the current date in a readable format.
- Responsive design for various screen sizes.
- Custom fonts for a unique look.
- Accessible for screen readers.
- Vue.js - JavaScript framework for building user interfaces.
- Moment.js - JavaScript library for parsing, validating, manipulating, and formatting dates.
- Bootstrap - CSS framework for responsive design.
- Spectrum Colorpicker - Color picker library.
-
Clone this repository:
git clone https://github.com/masdzub/clock.git
-
Navigate to the project directory:
cd clock -
Open
index.htmlin your preferred browser.
The project includes a simple HTML file that integrates Vue.js and Moment.js to display a real-time clock and date. The clock is updated every second using Vue's reactivity system, and the current date is formatted using Moment.js.
- Fonts: Custom fonts are used for the clock and date. If you want to change fonts, modify the
font-familyproperties in the CSS. - Styling: Adjust the styling of the clock and date by modifying the CSS rules in the
<style>section ofindex.html. - Date Format: Change the date format by modifying the
moment().format()function in the Vue.js script.
- HTML: Contains the structure of the clock and date display.
- CSS: Handles the styling and responsive design of the clock and date.
- JavaScript: Vue.js and Moment.js scripts for updating and displaying the time and date.
Feel free to open issues, submit pull requests, or contribute in any way. If you have suggestions or improvements, we welcome your feedback!
This project is licensed under the MIT License - see the LICENSE file for details.
For any questions or comments, please contact hello@masdzub.com.