diff --git a/Service Portal Widgets/Digital Clock/README.md b/Service Portal Widgets/Digital Clock/README.md new file mode 100644 index 0000000000..edd2228013 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/Service Portal Widgets/Digital Clock/index.html b/Service Portal Widgets/Digital Clock/index.html new file mode 100644 index 0000000000..afb9ce6c59 --- /dev/null +++ b/Service Portal Widgets/Digital Clock/index.html @@ -0,0 +1,3 @@ +
+ {{ currentTime }} +
diff --git a/Service Portal Widgets/Digital Clock/script.js b/Service Portal Widgets/Digital Clock/script.js new file mode 100644 index 0000000000..25b3c4f390 --- /dev/null +++ b/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); +}; diff --git a/Service Portal Widgets/Digital Clock/style.css b/Service Portal Widgets/Digital Clock/style.css new file mode 100644 index 0000000000..39eb8f51af --- /dev/null +++ b/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; +}