Clock |@Simplified

├── script.js ├── index.html ├── style.css ├── LICENSE └── Readme.md /script.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | setInterval(updateTime, 1000) 3 | }; 4 | 5 | function updateTime() { 6 | const format = number => `${ +!(number < 10) && '' }${number}`; 7 | 8 | let date = new Date(); 9 | 10 | document.querySelector("#hour") .innerHTML = format( date.getHours() ); 11 | document.querySelector("#minute").innerHTML = format( date.getMinutes() ); 12 | document.querySelector("#second").innerHTML = format( date.getSeconds() ); 13 | 14 | document.querySelector("#date").innerHTML = ( 15 | [ 16 | date.getDate(), 17 | ++date.getMonth(), 18 | date.getFullYear() 19 | ] 20 | .map(format) 21 | .join('/') 22 | ); 23 | 24 | const week = [ 25 | "Sunday", "Monday", "Tuesday", "Wednesday", 26 | "Thursday", "Friday", "Saturday" 27 | ]; 28 | 29 | document.querySelector("#day").innerHTML = week[ date.getDay() ]; 30 | } 31 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Clock |@Simplified_Learner 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

17 | 00:00:00 19 |

20 |

21 | 25/07/2022, 22 | Sunday 23 |

24 |

25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | font-family: 'Inconsolata', monospace; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | background: #020100; 13 | } 14 | .container { 15 | border: 10px solid rgb(0, 240, 0); 16 | width: 450px; 17 | height: 450px; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | flex-direction: column; 22 | color:#fff; 23 | font-size: 32px; 24 | border-radius: 50%; 25 | background: rgb(0, 0, 0); 26 | box-shadow: 27 | 0 0 5px rgb(0, 240, 0), 28 | 0 0 10px rgb(0, 240, 0), 29 | 0 0 15px rgb(0, 240, 0); 30 | } 31 | .time { 32 | font-size: 2em; 33 | color:rgb(0, 240, 0); 34 | } 35 | .blink-colon { 36 | animation: blink 1s infinite linear; 37 | } 38 | @keyframes blink { 39 | 0%, 100% { 40 | opacity: 1; 41 | } 42 | 30% { 43 | opacity: 0.4; 44 | } 45 | } 46 | .date-container { 47 | margin-top: 6px; 48 | font-size: 24px; 49 | color: rgba(255,255,255,0.8) 50 | } 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Dhruv Sharma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | Digital Clock 2 | This project is a simple and customizable digital clock built entirely with HTML, CSS, and JavaScript. 3 | 4 | Features: 5 | Clean and modern design: The clock displays the time in a clear and easy-to-read format. 6 | Fully customizable: You can easily adjust the clock's appearance by modifying the CSS styles. 7 | Lightweight and efficient: This project uses minimal code, making it fast and efficient to run. 8 | 9 | How to Use: 10 | Clone or download the repository: You can clone this repository using Git or simply download the zip file containing the HTML, CSS, and JavaScript files. 11 | Open the index.html file: Open the index.html file in your web browser to view the digital clock. 12 | Customization: 13 | Font and color: Modify the font family and color styles defined in the style.css file to change the clock's appearance. 14 | Background: Change the background color or image in the style.css file to personalize the clock further. 15 | Size: Adjust the size of the clock elements by modifying the width and height properties in the style.css file. 16 | Dependencies: 17 | This project does not require any external libraries or frameworks. It relies solely on HTML, CSS, and JavaScript for its functionality. 18 | 19 | Contributing: 20 | Feel free to fork this repository and make your own modifications! You can add new features, improve the design, or simply play around with the code. If you have any significant improvements, consider creating a pull request to contribute back to the project. 21 | 22 | License: 23 | This project is licensed under the MIT License. You are free to use, modify, and distribute this code for any purpose, commercial or non-commercial. 24 | 25 | Enjoy using your new digital clock! 26 | --------------------------------------------------------------------------------