How to Add an Online Digital Clock to a SharePoint Site : ShortPoint Support

Looking for a Sharepoint time tracking web part? We’ve got the next big thing! With the ShortPoint Code Web Part, you can add an online digital clock to your SharePoint page. Follow the quick walkthrough or go through the detailed guide to learn how.

page with microsoft time clock

Quick Walkthrough

1. Copy the code below to add the online digital clock:

<div id="pastelClock" style="font-family: 'Arial Black', sans-serif; font-size: 3em; text-align: center; background: linear-gradient(135deg, #FFD1DC, #C8A2C8, #B19CD9, #ADD8E6); color: white; padding: 30px; border-radius: 15px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);"></div>

|||||

#pastelClock {
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

#pastelClock:hover {
  transform: scale(1.03);
}

|||||

function updatePastelClock() {
  const now = new Date();
  let hours = now.getHours();
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  const ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12;
  const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
  document.getElementById('pastelClock').textContent = timeString;
}

updatePastelClock();
setInterval(updatePastelClock, 1000);

2. Go to your SharePoint page and add the ShortPoint Code Web Part.

3. Click the Edit Properties icon of the ShortPoint Code to edit it.

4. Click Import Code.

5. Customize the code according to your needs.

6. Close the ShortPoint Code window.

7. Republish the page.

TABLE OF CONTENTS

Prerequisite
Step-by-step Tutorial

Prerequisite

You must already have the ShortPoint Code Web Part installed on your SharePoint page. To learn how to do this, check out How to Install ShortPoint Code Editor in SharePoint.

Step-by-step Tutorial

Follow the steps below to learn how to add an online digital clock to your SharePoint page:

Step 1: Copy the Code

Copy the code below. This code will be the basis for the online digital clock that will be added to your page:

<div id="pastelClock" style="font-family: 'Arial Black', sans-serif; font-size: 3em; text-align: center; background: linear-gradient(135deg, #FFD1DC, #C8A2C8, #B19CD9, #ADD8E6); color: white; padding: 30px; border-radius: 15px; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);"></div>

|||||

#pastelClock {
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

#pastelClock:hover {
  transform: scale(1.03);
}

|||||

function updatePastelClock() {
  const now = new Date();
  let hours = now.getHours();
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  const ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12;
  const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
  document.getElementById('pastelClock').textContent = timeString;
}

updatePastelClock();
setInterval(updatePastelClock, 1000);

Step 2: Add the ShortPoint Code Web Part

Go to the SharePoint page where you want to add the online digital clock and click Edit:

edit

Click the close icon to leave the Toolbox:

close icon

Select the plus icon to add a web part:

plus icon

Use the search bar to look for ShortPoint Code, or scroll down until you see the Advanced section. Click ShortPoint Code:

ShortPoint Code

Step 3: Edit the ShortPoint Code Web Part

Click the Edit Properties icon:

Edit Properties icon

Step 4: Paste the Code

Click Import Code:

Import Code

Step 5: Customize the Code

Customize the code according to your needs. Simply select the field you want to customize, then, once done, click Save:

customize code

Once satisfied, click the close icon to leave the ShortPoint Code window:

close icon

Step 6: Republish Page

Click Republish once you’re ready to make your changes live:

Republish

Congratulations! You've successfully added an online digital clock to your SharePoint page. Explore more ways to use the ShortPoint Code Editor web part. Check out the articles below:

How to Add an Online Digital Clock to a SharePoint Site

Quick Walkthrough

Prerequisite