API tools faq
paste
Advertisement
dev017

time app.

dev017
Dec 28th, 2024
178
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.93 KB | Source Code | 0 0
raw download clone embed print report
  1. <html><head><base href="https://example.com">
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>World Clock</title>
  5.     <style>
  6.         body {
  7.             font-family: 'Arial', sans-serif;
  8.             margin: 0;
  9.             background-color: #f7f7f7;
  10.             color: #333;
  11.             display: flex;
  12.             flex-direction: column;
  13.             align-items: center;
  14.             padding: 20px;
  15.             transition: background-color 0.3s, color 0.3s;
  16.         }
  17.  
  18.         body.dark-mode {
  19.             background-color: #333;
  20.             color: #f7f7f7;
  21.         }
  22.  
  23.         #header {
  24.             text-align: center;
  25.             margin-bottom: 20px;
  26.         }
  27.  
  28.         h1 {
  29.             color: #333;
  30.             margin: 0;
  31.             transition: color 0.3s;
  32.         }
  33.  
  34.         body.dark-mode h1 {
  35.             color: #f7f7f7;
  36.         }
  37.  
  38.         #header-details {
  39.             text-align: center;
  40.             color: #777;
  41.             font-size: 14px;
  42.             margin-bottom: 10px;
  43.             transition: color 0.3s;
  44.         }
  45.  
  46.         body.dark-mode #header-details {
  47.             color: #bbb;
  48.         }
  49.  
  50.         #search-container {
  51.             margin-bottom: 20px;
  52.             width: 80%;
  53.             max-width: 600px;
  54.             display: flex;
  55.             gap: 10px;
  56.         }
  57.  
  58.         #search-bar {
  59.             padding: 12px;
  60.             border: 1px solid #ddd;
  61.             border-radius: 8px;
  62.             font-size: 16px;
  63.             width: calc(100% - 24px);
  64.             outline: none;
  65.             box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  66.             flex-grow: 1;
  67.             background-color: #fff;
  68.             color: #333;
  69.             transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  70.         }
  71.  
  72.         body.dark-mode #search-bar {
  73.             background-color: #444;
  74.             color: #eee;
  75.             border-color: #555;
  76.         }
  77.  
  78.         #settings-button {
  79.             padding: 12px 16px;
  80.             border: 1px solid #ddd;
  81.             border-radius: 8px;
  82.             background-color: #fff;
  83.             color: #333;
  84.             cursor: pointer;
  85.             font-size: 14px;
  86.             box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  87.             transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  88.         }
  89.  
  90.         body.dark-mode #settings-button {
  91.             background-color: #444;
  92.             color: #eee;
  93.             border-color: #555;
  94.         }
  95.  
  96.         #settings-button:hover {
  97.             background-color: #f0f0f0;
  98.         }
  99.  
  100.         body.dark-mode #settings-button:hover {
  101.             background-color: #555;
  102.         }
  103.  
  104.         #countries-container {
  105.             width: 80%;
  106.             max-width: 800px;
  107.             background-color: #fff;
  108.             border-radius: 12px;
  109.             box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  110.             overflow: hidden;
  111.             transition: background-color 0.3s;
  112.         }
  113.  
  114.         body.dark-mode #countries-container {
  115.             background-color: #444;
  116.         }
  117.  
  118.         .country-item {
  119.             display: flex;
  120.             justify-content: space-between;
  121.             align-items: center;
  122.             padding: 16px 20px;
  123.             border-bottom: 1px solid #eee;
  124.             transition: background-color 0.3s ease, border-color 0.3s;
  125.         }
  126.  
  127.         body.dark-mode .country-item {
  128.             border-bottom-color: #555;
  129.         }
  130.  
  131.         .country-item:last-child {
  132.             border-bottom: none;
  133.         }
  134.  
  135.         .country-item:hover {
  136.             background-color: #f9f9f9;
  137.         }
  138.  
  139.         body.dark-mode .country-item:hover {
  140.             background-color: #555;
  141.         }
  142.  
  143.         .country-name {
  144.             font-weight: bold;
  145.             color: #333;
  146.             transition: color 0.3s;
  147.         }
  148.  
  149.         body.dark-mode .country-name {
  150.             color: #eee;
  151.         }
  152.  
  153.         .country-details {
  154.             display: flex;
  155.             align-items: center;
  156.         }
  157.  
  158.         .country-time {
  159.             font-size: 18px;
  160.             color: #555;
  161.             margin-right: 10px;
  162.             position: relative;
  163.             display: flex;
  164.             align-items: center;
  165.             transition: color 0.3s;
  166.         }
  167.  
  168.         body.dark-mode .country-time {
  169.             color: #ccc;
  170.         }
  171.  
  172.         .country-date {
  173.             font-size: 14px;
  174.             color: #777;
  175.             margin-right: 10px;
  176.             transition: color 0.3s;
  177.         }
  178.  
  179.         body.dark-mode .country-date {
  180.             color: #bbb;
  181.         }
  182.  
  183.         .country-timezone {
  184.             font-size: 14px;
  185.             color: #999;
  186.             transition: color 0.3s;
  187.         }
  188.  
  189.         body.dark-mode .country-timezone {
  190.             color: #999;
  191.         }
  192.  
  193.         .loading-spinner {
  194.             width: 16px;
  195.             height: 16px;
  196.             border: 2px solid rgba(0, 0, 0, 0.1);
  197.             border-left-color: #007BFF;
  198.             border-radius: 50%;
  199.             animation: spin 1s linear infinite;
  200.             margin-left: 8px;
  201.         }
  202.  
  203.         @keyframes spin {
  204.             to { transform: rotate(360deg); }
  205.         }
  206.  
  207.         .hidden {
  208.             display: none;
  209.         }
  210.  
  211.         .clock-icon {
  212.             width: 16px;
  213.             height: 16px;
  214.             margin-right: 4px;
  215.             fill: currentColor;
  216.         }
  217.  
  218.         #settings-container {
  219.             width: 80%;
  220.             max-width: 800px;
  221.             background-color: #fff;
  222.             border-radius: 12px;
  223.             box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  224.             overflow: hidden;
  225.             margin-top: 20px;
  226.             padding: 20px;
  227.             transition: background-color 0.3s;
  228.         }
  229.  
  230.         body.dark-mode #settings-container {
  231.             background-color: #444;
  232.         }
  233.  
  234.         #settings-container h2 {
  235.             color: #333;
  236.             margin-top: 0;
  237.             margin-bottom: 15px;
  238.             transition: color 0.3s;
  239.         }
  240.  
  241.         body.dark-mode #settings-container h2 {
  242.             color: #eee;
  243.         }
  244.  
  245.         .setting-item {
  246.             display: flex;
  247.             justify-content: space-between;
  248.             align-items: center;
  249.             padding: 10px 0;
  250.             border-bottom: 1px solid #eee;
  251.             transition: border-color 0.3s;
  252.         }
  253.  
  254.         body.dark-mode .setting-item {
  255.             border-bottom-color: #555;
  256.         }
  257.  
  258.         .setting-item:last-child {
  259.             border-bottom: none;
  260.         }
  261.  
  262.         .setting-label {
  263.             font-weight: bold;
  264.             color: #555;
  265.             transition: color 0.3s;
  266.         }
  267.  
  268.         body.dark-mode .setting-label {
  269.             color: #ccc;
  270.         }
  271.  
  272.         .timezone-details {
  273.             font-size: 12px;
  274.             color: #666;
  275.             margin-top: 4px;
  276.             transition: color 0.3s;
  277.         }
  278.  
  279.         body.dark-mode .timezone-details {
  280.             color: #999;
  281.         }
  282.  
  283.         .utc-offset {
  284.             font-size: 12px;
  285.             color: #888;
  286.             margin-left: 8px;
  287.             transition: color 0.3s;
  288.         }
  289.  
  290.         body.dark-mode .utc-offset {
  291.             color: #777;
  292.         }
  293.  
  294.         .country-population {
  295.             font-size: 12px;
  296.             color: #666;
  297.             margin-top: 2px;
  298.             transition: color 0.3s;
  299.         }
  300.  
  301.         body.dark-mode .country-population {
  302.             color: #999;
  303.         }
  304.  
  305.         .last-updated {
  306.             font-size: 11px;
  307.             color: #999;
  308.             margin-top: 4px;
  309.             font-style: italic;
  310.             transition: color 0.3s;
  311.         }
  312.  
  313.         body.dark-mode .last-updated {
  314.             color: #777;
  315.         }
  316.     </style>
  317. </head>
  318. <body>
  319.     <div id="header">
  320.         <h1>World Clock</h1>
  321.         <div id="header-details">
  322.             <span id="local-date"></span> - <span id="local-time"></span>
  323.         </div>
  324.     </div>
  325.     <div id="search-container">
  326.         <input type="text" id="search-bar" placeholder="Search for a country...">
  327.         <button id="settings-button">
  328.             <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0 1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
  329.         </button>
  330.     </div>
  331.     <div id="countries-container">
  332.         <!-- Country items will be added here by JavaScript -->
  333.     </div>
  334.     <div id="settings-container" class="hidden">
  335.         <h2>Settings</h2>
  336.         <div class="setting-item">
  337.             <span class="setting-label">Show Seconds</span>
  338.             <input type="checkbox" id="show-seconds">
  339.         </div>
  340.         <div class="setting-item">
  341.             <span class="setting-label">Dark Mode</span>
  342.             <input type="checkbox" id="dark-mode-toggle">
  343.         </div>
  344.     </div>
  345.  
  346.     <script>const body = document.body;
  347. const countriesContainer = document.getElementById('countries-container');
  348. const searchBar = document.getElementById('search-bar');
  349. const settingsContainer = document.getElementById('settings-container');
  350. const settingsButton = document.getElementById('settings-button');
  351. const localDateElement = document.getElementById('local-date');
  352. const localTimeElement = document.getElementById('local-time');
  353. const showSecondsCheckbox = document.getElementById('show-seconds');
  354. const darkModeToggle = document.getElementById('dark-mode-toggle');
  355. let showSeconds = false;
  356. let darkMode = localStorage.getItem('darkMode') === 'enabled';
  357. if (darkMode) {}
  358. const countryPopulations = {
  359.   "United States": "331 million",
  360.   "China": "1.4 billion",
  361.   "India": "1.38 billion",
  362.   "Japan": "125.7 million",
  363.   "Iceland": "364,134",
  364.   "Greenland": "56,421",
  365.   "Faroe Islands": "48,863",
  366.   "Svalbard": "2,667",
  367.   "Jan Mayen": "18"
  368. };
  369. function getUTCOffset(timezone) {
  370.   const now = new Date();
  371.   const tzOffset = new Date().toLocaleTimeString('en-US', {
  372.     timeZone: timezone,
  373.     timeZoneName: 'longOffset'
  374.   }).split(' ').pop();
  375.   return tzOffset;
  376. }
  377. showSecondsCheckbox.addEventListener('change', () => {
  378.   showSeconds = showSecondsCheckbox.checked;
  379.   renderCountries(countriesTimezones);
  380. });
  381. darkModeToggle.addEventListener('change', () => {
  382.   darkMode = darkModeToggle.checked;
  383.   body.classList.toggle('dark-mode', darkMode);
  384.   localStorage.setItem('darkMode', darkMode ? 'enabled' : 'disabled');
  385. });
  386. settingsButton.addEventListener('click', () => {
  387.   settingsContainer.classList.toggle('hidden');
  388. });
  389. const countriesTimezones = [{
  390.   name: "United States",
  391.   timezone: "America/New_York"
  392. }, {
  393.   name: "Canada",
  394.   timezone: "America/Toronto"
  395. }, {
  396.   name: "Brazil",
  397.   timezone: "America/Sao_Paulo"
  398. }, {
  399.   name: "United Kingdom",
  400.   timezone: "Europe/London"
  401. }, {
  402.   name: "France",
  403.   timezone: "Europe/Paris"
  404. }, {
  405.   name: "Germany",
  406.   timezone: "Europe/Berlin"
  407. }, {
  408.   name: "Japan",
  409.   timezone: "Asia/Tokyo"
  410. }, {
  411.   name: "China",
  412.   timezone: "Asia/Shanghai"
  413. }, {
  414.   name: "Australia",
  415.   timezone: "Australia/Sydney"
  416. }, {
  417.   name: "India",
  418.   timezone: "Asia/Kolkata"
  419. }, {
  420.   name: "South Africa",
  421.   timezone: "Africa/Johannesburg"
  422. }, {
  423.   name: "Argentina",
  424.   timezone: "America/Argentina/Buenos_Aires"
  425. }, {
  426.   name: "Mexico",
  427.   timezone: "America/Mexico_City"
  428. }, {
  429.   name: "Russia",
  430.   timezone: "Europe/Moscow"
  431. }, {
  432.   name: "Italy",
  433.   timezone: "Europe/Rome"
  434. }, {
  435.   name: "Spain",
  436.   timezone: "Europe/Madrid"
  437. }, {
  438.   name: "Egypt",
  439.   timezone: "Africa/Cairo"
  440. }, {
  441.   name: "Nigeria",
  442.   timezone: "Africa/Lagos"
  443. }, {
  444.   name: "New Zealand",
  445.   timezone: "Pacific/Auckland"
  446. }, {
  447.   name: "South Korea",
  448.   timezone: "Asia/Seoul"
  449. }, {
  450.   name: "Singapore",
  451.   timezone: "Asia/Singapore"
  452. }, {
  453.   name: "Ireland",
  454.   timezone: "Europe/Dublin"
  455. }, {
  456.   name: "Sweden",
  457.   timezone: "Europe/Stockholm"
  458. }, {
  459.   name: "Norway",
  460.   timezone: "Europe/Oslo"
  461. }, {
  462.   name: "Denmark",
  463.   timezone: "Europe/Copenhagen"
  464. }, {
  465.   name: "Finland",
  466.   timezone: "Europe/Helsinki"
  467. }, {
  468.   name: "Switzerland",
  469.   timezone: "Europe/Zurich"
  470. }, {
  471.   name: "Netherlands",
  472.   timezone: "Europe/Amsterdam"
  473. }, {
  474.   name: "Belgium",
  475.   timezone: "Europe/Brussels"
  476. }, {
  477.   name: "Austria",
  478.   timezone: "Europe/Vienna"
  479. }, {
  480.   name: "Poland",
  481.   timezone: "Europe/Warsaw"
  482. }, {
  483.   name: "Ukraine",
  484.   timezone: "Europe/Kiev"
  485. }, {
  486.   name: "Greece",
  487.   timezone: "Europe/Athens"
  488. }, {
  489.   name: "Turkey",
  490.   timezone: "Europe/Istanbul"
  491. }, {
  492.   name: "Saudi Arabia",
  493.   timezone: "Asia/Riyadh"
  494. }, {
  495.   name: "United Arab Emirates",
  496.   timezone: "Asia/Dubai"
  497. }, {
  498.   name: "Indonesia",
  499.   timezone: "Asia/Jakarta"
  500. }, {
  501.   name: "Thailand",
  502.   timezone: "Asia/Bangkok"
  503. }, {
  504.   name: "Vietnam",
  505.   timezone: "Asia/Ho_Chi_Minh"
  506. }, {
  507.   name: "Philippines",
  508.   timezone: "Asia/Manila"
  509. }, {
  510.   name: "Malaysia",
  511.   timezone: "Asia/Kuala_Lumpur"
  512. }, {
  513.   name: "Portugal",
  514.   timezone: "Europe/Lisbon"
  515. }, {
  516.   name: "Hungary",
  517.   timezone: "Europe/Budapest"
  518. }, {
  519.   name: "Czech Republic",
  520.   timezone: "Europe/Prague"
  521. }, {
  522.   name: "Romania",
  523.   timezone: "Europe/Bucharest"
  524. }, {
  525.   name: "Bulgaria",
  526.   timezone: "Europe/Sofia"
  527. }, {
  528.   name: "Croatia",
  529.   timezone: "Europe/Zagreb"
  530. }, {
  531.   name: "Serbia",
  532.   timezone: "Europe/Belgrade"
  533. }, {
  534.   name: "Slovakia",
  535.   timezone: "Europe/Bratislava"
  536. }, {
  537.   name: "Lithuania",
  538.   timezone: "Europe/Vilnius"
  539. }, {
  540.   name: "Latvia",
  541.   timezone: "Europe/Riga"
  542. }, {
  543.   name: "Estonia",
  544.   timezone: "Europe/Tallinn"
  545. }, {
  546.   name: "Iceland",
  547.   timezone: "Atlantic/Reykjavik"
  548. }, {
  549.   name: "Greenland",
  550.   timezone: "America/Godthab"
  551. }, {
  552.   name: "Faroe Islands",
  553.   timezone: "Atlantic/Faroe"
  554. }, {
  555.   name: "Svalbard",
  556.   timezone: "Arctic/Longyearbyen"
  557. }, {
  558.   name: "Jan Mayen",
  559.   timezone: "Arctic/Longyearbyen"
  560. }, {
  561.   name: "Cyprus",
  562.   timezone: "Asia/Nicosia"
  563. }, {
  564.   name: "Malta",
  565.   timezone: "Europe/Malta"
  566. }, {
  567.   name: "Luxembourg",
  568.   timezone: "Europe/Luxembourg"
  569. }, {
  570.   name: "Monaco",
  571.   timezone: "Europe/Monaco"
  572. }, {
  573.   name: "Liechtenstein",
  574.   timezone: "Europe/Vaduz"
  575. }, {
  576.   name: "San Marino",
  577.   timezone: "Europe/San_Marino"
  578. }, {
  579.   name: "Vatican City",
  580.   timezone: "Europe/Vatican"
  581. }, {
  582.   name: "Andorra",
  583.   timezone: "Europe/Andorra"
  584. }, {
  585.   name: "Albania",
  586.   timezone: "Europe/Tirane"
  587. }, {
  588.   name: "North Macedonia",
  589.   timezone: "Europe/Skopje"
  590. }, {
  591.   name: "Bosnia and Herzegovina",
  592.   timezone: "Europe/Sarajevo"
  593. }, {
  594.   name: "Montenegro",
  595.   timezone: "Europe/Podgorica"
  596. }, {
  597.   name: "Kosovo",
  598.   timezone: "Europe/Belgrade"
  599. }, {
  600.   name: "Belarus",
  601.   timezone: "Europe/Minsk"
  602. }, {
  603.   name: "Moldova",
  604.   timezone: "Europe/Chisinau"
  605. }, {
  606.   name: "Georgia",
  607.   timezone: "Asia/Tbilisi"
  608. }, {
  609.   name: "Armenia",
  610.   timezone: "Asia/Yerevan"
  611. }, {
  612.   name: "Azerbaijan",
  613.   timezone: "Asia/Baku"
  614. }, {
  615.   name: "Kazakhstan",
  616.   timezone: "Asia/Almaty"
  617. }, {
  618.   name: "Uzbekistan",
  619.   timezone: "Asia/Tashkent"
  620. }, {
  621.   name: "Turkmenistan",
  622.   timezone: "Asia/Ashgabat"
  623. }, {
  624.   name: "Tajikistan",
  625.   timezone: "Asia/Dushanbe"
  626. }, {
  627.   name: "Kyrgyzstan",
  628.   timezone: "Asia/Bishkek"
  629. }, {
  630.   name: "Afghanistan",
  631.   timezone: "Asia/Kabul"
  632. }, {
  633.   name: "Pakistan",
  634.   timezone: "Asia/Karachi"
  635. }, {
  636.   name: "Bangladesh",
  637.   timezone: "Asia/Dhaka"
  638. }, {
  639.   name: "Nepal",
  640.   timezone: "Asia/Kathmandu"
  641. }, {
  642.   name: "Sri Lanka",
  643.   timezone: "Asia/Colombo"
  644. }, {
  645.   name: "Myanmar",
  646.   timezone: "Asia/Yangon"
  647. }, {
  648.   name: "Cambodia",
  649.   timezone: "Asia/Phnom_Penh"
  650. }, {
  651.   name: "Laos",
  652.   timezone: "Asia/Vientiane"
  653. }, {
  654.   name: "Brunei",
  655.   timezone: "Asia/Brunei"
  656. }, {
  657.   name: "Timor-Leste",
  658.   timezone: "Asia/Dili"
  659. }, {
  660.   name: "Fiji",
  661.   timezone: "Pacific/Fiji"
  662. }, {
  663.   name: "Papua New Guinea",
  664.   timezone: "Pacific/Port_Moresby"
  665. }, {
  666.   name: "Nauru",
  667.   timezone: "Pacific/Nauru"
  668. }, {
  669.   name: "Maldives",
  670.   timezone: "Indian/Maldives"
  671. }];
  672. function updateLocalTime() {
  673.   const now = new Date();
  674.   const dateString = now.toLocaleDateString('en-US', {
  675.     weekday: 'short',
  676.     month: 'short',
  677.     day: 'numeric'
  678.   });
  679.   const timeOptions = {
  680.     hour: 'numeric',
  681.     minute: 'numeric',
  682.     second: showSeconds ? 'numeric' : undefined
  683.   };
  684.   const timeString = now.toLocaleTimeString('en-US', timeOptions);
  685.   localDateElement.textContent = dateString;
  686.   localTimeElement.textContent = timeString;
  687. }
  688. function updateCountryTime(countryItem, timezone) {
  689.   const timeElement = countryItem.querySelector('.country-time span');
  690.   const dateElement = countryItem.querySelector('.country-date');
  691.   const timezoneElement = countryItem.querySelector('.country-timezone');
  692.   const now = new Date();
  693.   const timeOptions = {
  694.     hour: 'numeric',
  695.     minute: 'numeric',
  696.     second: showSeconds ? 'numeric' : undefined,
  697.     timeZone: timezone,
  698.     hour12: true
  699.   };
  700.   const dateOptions = {
  701.     weekday: 'short',
  702.     month: 'short',
  703.     day: 'numeric',
  704.     year: 'numeric',
  705.     timeZone: timezone
  706.   };
  707.   const timeString = now.toLocaleTimeString('en-US', timeOptions);
  708.   const dateString = now.toLocaleDateString('en-US', dateOptions);
  709.   const timezoneAbbr = Intl.DateTimeFormat('en-US', {
  710.     timeZone: timezone,
  711.     timeZoneName: 'short'
  712.   }).format(now).split(' ')[2];
  713.   timeElement.textContent = timeString;
  714.   dateElement.textContent = dateString;
  715.   timezoneElement.textContent = timezoneAbbr;
  716. }
  717. function renderCountries(countries) {
  718.   countriesContainer.innerHTML = '';
  719.   countries.forEach(country => {
  720.     const countryItem = document.createElement('div');
  721.     countryItem.classList.add('country-item');
  722.     const utcOffset = getUTCOffset(country.timezone);
  723.     const population = countryPopulations[country.name] || "Population data unavailable";
  724.     countryItem.innerHTML = `
  725.       <div class="country-info">
  726.         <span class="country-name">${country.name}</span>
  727.         <div class="timezone-details">Timezone: ${country.timezone}</div>
  728.         <div class="country-population">Population: ${population}</div>
  729.       </div>
  730.       <div class="country-details">
  731.         <span class="country-date"></span>
  732.         <div class="country-time">
  733.           <svg class="clock-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
  734.           <span></span>
  735.           <div class="loading-spinner"></div>
  736.         </div>
  737.         <span class="country-timezone"></span>
  738.         <span class="utc-offset">${utcOffset}</span>
  739.       </div>
  740.       <div class="last-updated">Last updated: ${new Date().toLocaleTimeString()}</div>
  741.     `;
  742.     countriesContainer.appendChild(countryItem);
  743.     updateCountryTime(countryItem, country.timezone);
  744.     setInterval(() => {
  745.       updateCountryTime(countryItem, country.timezone);
  746.       countryItem.querySelector('.last-updated').textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
  747.     }, 1000);
  748.   });
  749. }
  750. function filterCountries(searchTerm) {
  751.   const filteredCountries = countriesTimezones.filter(country => country.name.toLowerCase().includes(searchTerm.toLowerCase()));
  752.   renderCountries(filteredCountries);
  753. }
  754. searchBar.addEventListener('input', event => {
  755.   filterCountries(event.target.value);
  756. });
  757. setInterval(updateLocalTime, 1000);
  758. updateLocalTime();
  759. renderCountries(countriesTimezones);</script>
  760. </body>
  761. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!