Digital Clock Widget (#1599)

- Created a simple digital clock widget with black background and white text.
- Displays current time in HH:MM:SS format, updating every second.
- Added HTML structure for time display.
- Applied CSS for styling with centered alignment, black background, and white font.
- Implemented JavaScript to update time every second using $interval.
- Included README.md for setup and customization instructions.

Author: Southpaw09

Service Portal Widgets/Digital Clock/README.md

@@ -0,0 +1,15 @@
+# Digital Clock Widget for ServiceNow Portal
+This widget displays a simple digital clock with a black background and white text. It shows the current time in hours, minutes, and seconds and updates every second.
+
+## Features
+Displays the current time in HH:MM:SS format.
+Black background with white text for easy readability.
+Automatic time update every second.
+
+## Usage
+Add this widget to any ServiceNow Portal page where you want to display the digital clock.
+The clock automatically updates every second without requiring any additional configuration.
+
+## Customization
+Background Color: You can change the background-color property in CSS to a different color if desired.
+Font Color: Modify the color property to set a custom text color.

Service Portal Widgets/Digital Clock/index.html

@@ -0,0 +1,3 @@
+<div class="digital-clock">
+    <span>{{ currentTime }}</span>
+</div>

Service Portal Widgets/Digital Clock/script.js

@@ -0,0 +1,12 @@
+api.controller = function($scope, $interval) {
+    function updateTime() {
+        var now = new Date();
+        $scope.currentTime = now.toLocaleTimeString();
+    }
+
+    // Initialize the clock on load
+    updateTime();
+
+    // Update the clock every second
+    $interval(updateTime, 1000);
+};

Service Portal Widgets/Digital Clock/style.css

@@ -0,0 +1,13 @@
+.digital-clock {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    width: 200px;
+    margin: auto;
+    background-color: #000;
+    color: #fff;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 2em;
+    border-radius: 5px;
+}