From bb3c9cc706a2d31d4718e710fa4f320959dc093f Mon Sep 17 00:00:00 2001 From: kaiyumdev Date: Sun, 3 Nov 2024 23:44:31 +0600 Subject: [PATCH 1/2] feat(digital-clock): add digital clock with modern UI --- 33-Digital-Clock/Readme.md | 38 +++++++++++++++ 33-Digital-Clock/index.html | 32 +++++++++++++ 33-Digital-Clock/script.js | 36 ++++++++++++++ 33-Digital-Clock/style.css | 93 +++++++++++++++++++++++++++++++++++++ 4 files changed, 199 insertions(+) create mode 100644 33-Digital-Clock/Readme.md create mode 100644 33-Digital-Clock/index.html create mode 100644 33-Digital-Clock/script.js create mode 100644 33-Digital-Clock/style.css diff --git a/33-Digital-Clock/Readme.md b/33-Digital-Clock/Readme.md new file mode 100644 index 0000000..fdd71ef --- /dev/null +++ b/33-Digital-Clock/Readme.md @@ -0,0 +1,38 @@ +# Advanced UI/UX Digital Clock + +![Digital Clock Screenshot](https://api.placeholder.com/400/320) + +An elegant and feature-rich digital clock web application built with HTML, CSS, and JavaScript. This project demonstrates modern web development techniques and UI/UX principles. + +## Features + +- Real-time display of current time and date +- Dynamic greeting based on the time of day +- Week number and day of year information +- Light/dark theme toggle +- Responsive design for various device sizes +- Smooth animations and transitions + +### Prerequisites + +- A modern web browser (Chrome, Firefox, Safari, or Edge) + +## Usage + +- The clock will automatically display the current time and update every second. +- Click the theme toggle button (🌓) in the top-right corner to switch between light and dark modes. +- The greeting will change based on the time of day (morning, afternoon, evening). +- Additional information such as the current week number and day of year is displayed below the clock. + +## Customization + +You can easily customize the clock's appearance by modifying the CSS variables in the `