Try ShortPoint now

How can we help you today?

Details

How to Add a Birthday JavaScript to your SharePoint Site

Modified on: Wed, 5 Mar, 2025 at 12:10 PM

When creating your SharePoint page, user engagement is a must. To help you with that, we have created a JavaScript code that displays fireworks animations when your users visit the page on their birthday. This article will demonstrate how you can accomplish this using the ShortPoint Code Editor.


Sample page with firework animation

Quick Walkthrough

1. Navigate to the SharePoint page and click Edit.

2. Click the plus icon in the location where you want to insert your HTML code.

3. Search for ShortPoint Code in the web parts library and select it.

4. Copy CSS code:

.birthday-banner {
  display: none;
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
  color: white;
  padding: 20px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  text-align: center;
  font-family: Arial, sans-serif;
  z-index: 1000;
  animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
  from { top: -100px; opacity: 0; }
  to { top: 20px; opacity: 1; }
}

.firework {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: explode 1s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(30);
    opacity: 0;
  }
}

5. Paste CSS code into the Edit CSS field.

6. Copy JavaScript code:

/* Uncomment the next line to test the fireworks effect */
// showBirthdayBanner();

const getUserBirthday = async () => {
    try {
        // Get the user profile properties using SharePoint REST API
        const response = await fetch(`${_spPageContextInfo.webAbsoluteUrl}/_api/SP.UserProfiles.PeopleManager/GetMyProperties`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json;odata=verbose',
                'Content-Type': 'application/json;odata=verbose'
            },
            credentials: 'include'
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();

        // Find the birthday property in the user profile
        const birthdayProperty = data.d.UserProfileProperties.results.find(prop => prop.Key === "SPS-Birthday");

        if (birthdayProperty) {
            const birthday = new Date(birthdayProperty.Value);
            return birthday;
        } else {
            console.log("Birthday not found in user profile");
            return null;
        }
    } catch (error) {
        console.error("Error fetching user birthday:", error);
        throw error;
    }
};

getUserBirthday().then(birthday => {
    if (birthday) {
        console.log("User's birthday:", birthday.toLocaleDateString());
        console.log(birthday);
        window.userBirthday = birthday;

        // Example output: "User's birthday: 1/1/1990"

        checkBirthday();
    }
}).catch(error => {
    console.error("Failed to get birthday:", error);
});

function checkBirthday() {
    const today = new Date();
    const birthday = new Date(window.userBirthday);

    // Check if today matches birthday (month and day only) - show banner only once
    if (today.getMonth() === birthday.getMonth() &&
        today.getDate() === birthday.getDate() &&
        window.localStorage.getItem("showedBirthdayBanner") != "1") {
        window.localStorage.setItem("showedBirthdayBanner", "1");
        showBirthdayBanner();
    }
}

function showBirthdayBanner() {
    const banner = document.createElement('div');
    banner.className = 'birthday-banner';
    banner.innerHTML = `Happy birthday ${window._spPageContextInfo?.userDisplayName?.split(" ")[0]}! Wish you an awesome year ahead!`;
    document.body.appendChild(banner);
    banner.style.display = 'block';
    // Create fireworks
    createFireworks();
    setTimeout(function() {
        banner.remove();
    }, 6000)
}

function createFireworks() {
    const colors = ['#ff0', '#f0f', '#0ff', '#f00', '#0f0'];
    for (let i = 0; i < 50; i++) {
        setTimeout(() => {
            const firework = document.createElement('div');

            firework.className = 'firework';
            firework.style.left = Math.random() * window.innerWidth + 'px';
            firework.style.top = Math.random() * window.innerHeight + 'px';
            firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            document.body.appendChild(firework);

            // Remove firework element after animation
            setTimeout(() => firework.remove(), 1000);
        }, Math.random() * 2000);
    }
}

7. Paste your Javascript code into the Edit Javascript field.

8. Delete default HTML code.

9. Disable Contain CSS Styles.

10. Click the close icon to leave the ShortPoint Code Editor window.

11. Republish the page.

TABLE OF CONTENTS

Prerequisite

Step-by-step Tutorial

Follow the steps below to add the birthday JavaScript:


Step 1: Add the ShortPoint Code Web Part

  • Go to the SharePoint page where you want to add the Birthday JavaScript 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 [1] search bar to look for ShortPoint Code and click [2] ShortPoint Code:

ShortPoint Code

Step 2: Edit the ShortPoint Code Web Part

  • Click the Edit Properties icon:


Edit properties icon

Step 3: Copy and paste the CSS Code

  • Copy the CSS Code below:
.birthday-banner {
  display: none;
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
  color: white;
  padding: 20px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  text-align: center;
  font-family: Arial, sans-serif;
  z-index: 1000;
  animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
  from { top: -100px; opacity: 0; }
  to { top: 20px; opacity: 1; }
}

.firework {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: explode 1s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(30);
    opacity: 0;
  }
}
  • Paste it in the Edit CSS field:

paste code

Step 4: Copy and Paste the JavaScript Code

  • Copy the JavaScript below:
/* Uncomment the next line to test the fireworks effect */
// showBirthdayBanner();

const getUserBirthday = async () => {
    try {
        // Get the user profile properties using SharePoint REST API
        const response = await fetch(`${_spPageContextInfo.webAbsoluteUrl}/_api/SP.UserProfiles.PeopleManager/GetMyProperties`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json;odata=verbose',
                'Content-Type': 'application/json;odata=verbose'
            },
            credentials: 'include'
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();

        // Find the birthday property in the user profile
        const birthdayProperty = data.d.UserProfileProperties.results.find(prop => prop.Key === "SPS-Birthday");

        if (birthdayProperty) {
            const birthday = new Date(birthdayProperty.Value);
            return birthday;
        } else {
            console.log("Birthday not found in user profile");
            return null;
        }
    } catch (error) {
        console.error("Error fetching user birthday:", error);
        throw error;
    }
};

getUserBirthday().then(birthday => {
    if (birthday) {
        console.log("User's birthday:", birthday.toLocaleDateString());
        console.log(birthday);
        window.userBirthday = birthday;

        // Example output: "User's birthday: 1/1/1990"

        checkBirthday();
    }
}).catch(error => {
    console.error("Failed to get birthday:", error);
});

function checkBirthday() {
    const today = new Date();
    const birthday = new Date(window.userBirthday);

    // Check if today matches birthday (month and day only) - show banner only once
    if (today.getMonth() === birthday.getMonth() &&
        today.getDate() === birthday.getDate() &&
        window.localStorage.getItem("showedBirthdayBanner") != "1") {
        window.localStorage.setItem("showedBirthdayBanner", "1");
        showBirthdayBanner();
    }
}

function showBirthdayBanner() {
    const banner = document.createElement('div');
    banner.className = 'birthday-banner';
    banner.innerHTML = `Happy birthday ${window._spPageContextInfo?.userDisplayName?.split(" ")[0]}! Wish you an awesome year ahead!`;
    document.body.appendChild(banner);
    banner.style.display = 'block';
    // Create fireworks
    createFireworks();
    setTimeout(function() {
        banner.remove();
    }, 6000)
}

function createFireworks() {
    const colors = ['#ff0', '#f0f', '#0ff', '#f00', '#0f0'];
    for (let i = 0; i < 50; i++) {
        setTimeout(() => {
            const firework = document.createElement('div');

            firework.className = 'firework';
            firework.style.left = Math.random() * window.innerWidth + 'px';
            firework.style.top = Math.random() * window.innerHeight + 'px';
            firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            document.body.appendChild(firework);

            // Remove firework element after animation
            setTimeout(() => firework.remove(), 1000);
        }, Math.random() * 2000);
    }
}
  • Paste the code in the Edit HTML field:

paste code

Step 5: Delete Default Code

  • Click the Edit HTML field, delete the default code inside it, and click Save:

delete default codes

Step 6: Disable Contain CSS Styles

  • Make sure to disable Contain CSS Styles to ensure that the code works properly:

disable Contain CSS Styles

Step 7: Republish


close icon

  • Republish the page:

Republish


Congratulations! You now have an amazing birthday JavaScript on your SharePoint page that can facilitate engagement. You can also try out the tutorials below for more ways to improve your intranet:


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

Visit our dedicated courses on ShortPoint Academy

Click Here!

World's best intranet sites are designed using ShortPoint

Get started today! Learn more

Visit our dedicated courses on ShortPoint Academy

Click Here!
See all 24 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more