├── README.md ├── index.html ├── preview.png ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pradip Banjara || Date & Time 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bpradiip/Date_and_Time/cb0e6c2000e76217523aabbfb17ba8cb4df8eb7a/preview.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const localeList = [ 2 | { key: "en-US", value: "English (US)" }, 3 | { key: "af-ZA", value: "Afrikaans" }, 4 | { key: "sq-AL", value: "Albanian" }, 5 | { key: "ar-AR", value: "Arabic" }, 6 | { key: "hy-AM", value: "Armenian" }, 7 | { key: "ay-BO", value: "Aymara" }, 8 | { key: "az-AZ", value: "Azeri" }, 9 | { key: "eu-ES", value: "Basque" }, 10 | { key: "be-BY", value: "Belarusian" }, 11 | { key: "bn-IN", value: "Bengali" }, 12 | { key: "bs-BA", value: "Bosnian" }, 13 | { key: "bg-BG", value: "Bulgarian" }, 14 | { key: "ca-ES", value: "Catalan" }, 15 | { key: "ck-US", value: "Cherokee" }, 16 | { key: "hr-HR", value: "Croatian" }, 17 | { key: "cs-CZ", value: "Czech" }, 18 | { key: "da-DK", value: "Danish" }, 19 | { key: "nl-NL", value: "Dutch" }, 20 | { key: "nl-BE", value: "Dutch (Belgi?)" }, 21 | { key: "en-GB", value: "English (UK)" }, 22 | { key: "en-UD", value: "English (Upside Down)" }, 23 | { key: "en-US", value: "English (US)" }, 24 | { key: "eo-EO", value: "Esperanto" }, 25 | { key: "et-EE", value: "Estonian" }, 26 | { key: "fo-FO", value: "Faroese" }, 27 | { key: "tl-PH", value: "Filipino" }, 28 | { key: "fi-FI", value: "Finnish" }, 29 | { key: "fb-FI", value: "Finnish (test)" }, 30 | { key: "fr-CA", value: "French (Canada)" }, 31 | { key: "fr-FR", value: "French (France)" }, 32 | { key: "gl-ES", value: "Galician" }, 33 | { key: "ka-GE", value: "Georgian" }, 34 | { key: "de-DE", value: "German" }, 35 | { key: "el-GR", value: "Greek" }, 36 | { key: "gn-PY", value: "Guaran?" }, 37 | { key: "gu-IN", value: "Gujarati" }, 38 | { key: "he-IL", value: "Hebrew" }, 39 | { key: "hi-IN", value: "Hindi" }, 40 | { key: "hu-HU", value: "Hungarian" }, 41 | { key: "is-IS", value: "Icelandic" }, 42 | { key: "id-ID", value: "Indonesian" }, 43 | { key: "ga-IE", value: "Irish" }, 44 | { key: "it-IT", value: "Italian" }, 45 | { key: "ja-JP", value: "Japanese" }, 46 | { key: "jv-ID", value: "Javanese" }, 47 | { key: "kn-IN", value: "Kannada" }, 48 | { key: "kk-KZ", value: "Kazakh" }, 49 | { key: "km-KH", value: "Khmer" }, 50 | { key: "tl-ST", value: "Klingon" }, 51 | { key: "ko-KR", value: "Korean" }, 52 | { key: "ku-TR", value: "Kurdish" }, 53 | { key: "la-VA", value: "Latin" }, 54 | { key: "lv-LV", value: "Latvian" }, 55 | { key: "fb-LT", value: "Leet Speak" }, 56 | { key: "li-NL", value: "Limburgish" }, 57 | { key: "lt-LT", value: "Lithuanian" }, 58 | { key: "mk-MK", value: "Macedonian" }, 59 | { key: "mg-MG", value: "Malagasy" }, 60 | { key: "ms-MY", value: "Malay" }, 61 | { key: "ml-IN", value: "Malayalam" }, 62 | { key: "mt-MT", value: "Maltese" }, 63 | { key: "mr-IN", value: "Marathi" }, 64 | { key: "mn-MN", value: "Mongolian" }, 65 | { key: "ne-NP", value: "Nepali" }, 66 | { key: "se-NO", value: "Northern S?mi" }, 67 | { key: "nb-NO", value: "Norwegian (bokmal)" }, 68 | { key: "nn-NO", value: "Norwegian (nynorsk)" }, 69 | { key: "ps-AF", value: "Pashto" }, 70 | { key: "fa-IR", value: "Persian" }, 71 | { key: "pl-PL", value: "Polish" }, 72 | { key: "pt-BR", value: "Portuguese (Brazil)" }, 73 | { key: "pt-PT", value: "Portuguese (Portugal)" }, 74 | { key: "pa-IN", value: "Punjabi" }, 75 | { key: "qu-PE", value: "Quechua" }, 76 | { key: "ro-RO", value: "Romanian" }, 77 | { key: "rm-CH", value: "Romansh" }, 78 | { key: "ru-RU", value: "Russian" }, 79 | { key: "sa-IN", value: "Sanskrit" }, 80 | { key: "sr-RS", value: "Serbian" }, 81 | { key: "zh-CN", value: "Simplified Chinese (China)" }, 82 | { key: "sk-SK", value: "Slovak" }, 83 | { key: "sl-SI", value: "Slovenian" }, 84 | { key: "so-SO", value: "Somali" }, 85 | { key: "es-LA", value: "Spanish" }, 86 | { key: "es-CL", value: "Spanish (Chile)" }, 87 | { key: "es-CO", value: "Spanish (Colombia)" }, 88 | { key: "es-MX", value: "Spanish (Mexico)" }, 89 | { key: "es-ES", value: "Spanish (Spain)" }, 90 | { key: "es-VE", value: "Spanish (Venezuela)" }, 91 | { key: "sw-KE", value: "Swahili" }, 92 | { key: "sv-SE", value: "Swedish" }, 93 | { key: "sy-SY", value: "Syriac" }, 94 | { key: "tg-TJ", value: "Tajik" }, 95 | { key: "ta-IN", value: "Tamil" }, 96 | { key: "tt-RU", value: "Tatar" }, 97 | { key: "te-IN", value: "Telugu" }, 98 | { key: "th-TH", value: "Thai" }, 99 | { key: "zh-HK", value: "Traditional Chinese (Hong Kong)" }, 100 | { key: "zh-TW", value: "Traditional Chinese (Taiwan)" }, 101 | { key: "tr-TR", value: "Turkish" }, 102 | { key: "uk-UA", value: "Ukrainian" }, 103 | { key: "ur-PK", value: "Urdu" }, 104 | { key: "uz-UZ", value: "Uzbek" }, 105 | { key: "vi-VN", value: "Vietnamese" }, 106 | { key: "cy-GB", value: "Welsh" }, 107 | { key: "xh-ZA", value: "Xhosa" }, 108 | { key: "yi-DE", value: "Yiddish" }, 109 | { key: "zu-ZA", value: "Zulu" }]; 110 | 111 | 112 | const select = document.querySelector("#locales"); 113 | const hud = document.querySelector("#hud"); 114 | 115 | const populateSelectBox = () => 116 | select.innerHTML = localeList. 117 | map(({ key, value }) => ` 118 | 121 | `). 122 | join(""); 123 | 124 | 125 | const updateHud = () => { 126 | const locale = select.value || "en-US"; 127 | const now = new Date(); 128 | hud.innerHTML = new Intl.DateTimeFormat(locale, { 129 | weekday: 'long', 130 | year: 'numeric', 131 | month: 'long', 132 | day: 'numeric', 133 | hour: 'numeric', 134 | minute: 'numeric', 135 | second: 'numeric' }). 136 | format(now); 137 | }; 138 | 139 | 140 | const init = () => { 141 | populateSelectBox(); 142 | window.setInterval(updateHud, 1000); 143 | }; 144 | 145 | 146 | init(); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font: normal normal normal 18px/1.15 sans-serif; 3 | } 4 | 5 | body { 6 | padding: 1.0rem; 7 | } 8 | 9 | time { 10 | background-color: rgb(248, 152, 168); 11 | border: 1px solid rgb(123, 63, 184); 12 | border-radius: 2px; 13 | display: block; 14 | font-size: 2rem; 15 | padding: 1rem; 16 | margin-top: 1rem; 17 | } 18 | 19 | small { 20 | display: flex; 21 | justify-content: flex-end; 22 | margin-top: .5rem; 23 | } --------------------------------------------------------------------------------