How to Insert a Digital Clock into SharePoint Using the ShortPoint Code Design Element

The ShortPoint Code Design Element allows you to add a digital clock to your SharePoint page. Follow the step-by-step guide to learn how.

Quick Walkthrough

1. Copy the codes in step 1 of the Step-by-step Tutorial.
2. Go to the SharePoint page you want to use and edit the ShortPoint Web Part.
3. Insert the Code Design Element.
4. Paste the codes in their respective fields.
5. Click the green check mark.
6. Save your changes.

TABLE OF CONTENTS

• Quick Walkthrough
• Prerequisite
• Step-by-step Tutorial
  • Step 1: Copy the Code
  • Step 2: Edit the ShortPoint Web Part
  • Step 3: Insert the Code Design Element
  • Step 4: Paste the Code
  • Step 5: Save

Prerequisite

• You must already have the latest version of ShortPoint SPFx installed in your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

Step-by-step Tutorial

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

Step 1: Copy the Code

1. Copy the codes below.

HTML Code:

<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);
}

JavaScript Code:

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);

TIP:You can also use ChatGPT to generate codes like the one above. To learn how, check out Coding in SharePoint: How to Code with ChatGPT.

Step 2: Edit the ShortPoint Web Part

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

• Close the Toolbox:

• Click the ShortPoint tag:

• Select the Edit Properties icon:

ShortPoint's Three steps to a custom intranet site
Copy. Paste. Design.

Try it for free

Step 3: Insert the Code Design Element

• Click the plus icon to open the library of Design Elements:

• Search for Code and select it:

Step 4: Paste the Code

• Paste the HTML, CSS, and JavaScript codes in their corresponding fields: 

• Customize the code according to your preferences and click the green check mark:

NOTE:Make sure that the Sandbox mode is disabled. You can find this option in the Design tab:

Step 5: Save

• Click Save to apply all your changes:

Amazing! You now have a digital clock on your SharePoint page.

Visit our dedicated courses on ShortPoint Academy

Click Here!

Related articles:

• How to Insert a Web Page Animation into SharePoint Using the ShortPoint Code Design Element
• How to Insert a Stock Widget to a SharePoint Page Using the ShortPoint Code Design Element
• How to Add Canva Designs into a SharePoint Site Using the ShortPoint Code Design Element
• How to Embed a Viva Engage Custom Feed to the SharePoint Page Using ShortPoint Code Design Element
• The Value of Motion Design: How to Use CodePen Codes in Modern SharePoint Pages
• How to Add Lottie Animations in the ShortPoint Code Design Element