Show Up Phone – Pure JavaScript to display a hidden phone number

Dynamic user interfaces are essential for creating engaging web experiences. One interesting effect you can implement on websites is the gradual reveal of a hidden phone number. In this article, we’ll dive into the ‘Show Up Phone’ mechanism – a pure JavaScript implementation that allows you to smoothly animate the appearance of a hidden phone number.

I’ll explain step-by-step how the code works below.

Show Up Phone


Purpose of implementation

The main idea is to slowly show the hidden parts of a phone number. At first, you only see some of the numbers, like 33X-XXX-XXX, but when you click on the right place, the hidden numbers appear with a cool animation.


HTML Structure

The HTML contains a container with the class .displayP, that serves as a ‘card’ displaying a masked phone number:

<div class="displayP card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" 
     style="background-image: url('https://img.freepik.com/free-photo/side-view-man-using-smartphone_23-2148793481.jpg');" 
     data-toshow="3,9,7,8,6,5,3">
    <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
        <h2 class="display-5">Orders:</h2>
        <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold block-heading">33X-XXX-XXX</h3>
        <ul class="d-flex list-unstyled mt-auto">
            <li class="me-auto">
                <i class="bi bi-phone-vibrate display-5"></i>
            </li>
            <li class="d-flex align-items-center">
                <i class="bi me-2 bi-calendar3"></i>
                <small>9AM - 7PM</small>
            </li>
        </ul>
    </div>
</div>

Attributes:

  1. data-toshow – contains hidden digits of the phone number in CSV format (e.g. 3,9,7,8,6,5,3).
  2. block-heading – an element displaying the phone number with masked digits.

JavaScript Logic

The JavaScript code handles the animation for revealing hidden digits. Below, I will discuss the key implementation elements.

1. Event Registration

We listen for a click event on .displayP elements:

document.querySelectorAll('.displayP').forEach(card => {
    card.addEventListener('click', displayP);
});

2. Click Handling (displayP)

The displayP function:

  • Checks if the element is already animating (isAnimating).
  • Verifies if the element has hidden digits in the data-toshow attribute.
  • Reveals or resets the number depending on the current state.

3. Digit Animation

We use the animateNumber function to smoothly transition the value from 0 to the hidden digit:

function animateNumber(element, targetNumber, callback) {
    let currentNumber = 0;
    let interval = setInterval(() => {
        element.textContent = currentNumber;
        if (currentNumber === targetNumber) {
            clearInterval(interval);
            callback();
        } else {
            currentNumber++;
        }
    }, 50); // Szybkość animacji
}

4. Revealing Digits (revealNextDigit)

We reveal hidden digits step by step:

  • Masked digits (X) are replaced with animated digits.
  • For revealed digits, they are copied without changes.
function revealNextDigit(index) {
    if (index >= defaultP.length) {
        phoneElement.setAttribute("data-revealed", "true");
        isAnimating = false;
        return;
    }

    if (defaultP[index] === 'X' && hiddenIndex < hiddenPhone.length) {
        let targetDigit = parseInt(hiddenPhone[hiddenIndex]);
        let span = document.createElement('span');
        span.textContent = "0";

        animateNumber(span, targetDigit, () => {
            span.textContent = targetDigit;
            hiddenIndex++;
            revealNextDigit(index + 1);
        });

        phoneElement.appendChild(span);
    } else {
        phoneElement.appendChild(document.createTextNode(defaultP[index]));
        revealNextDigit(index + 1);
    }
}

Operating Principle

  1. First Click:
    • Digits hidden under X are revealed in the order from the data-toshow attribute.
    • The revealing happens gradually thanks to the animation.
  2. Subsequent Clicks:
    • The number returns to its masked state.

Advantages of this approach

  1. Pure JavaScript: No dependencies on external libraries.
  2. Attractive Visual Effect: Gradual revealing of digits draws the user’s attention.
  3. Flexibility: Ability to customize the animation speed and styles.

Summary

The “Show Up Phone” mechanism is an excellent solution for websites that want to keep a phone number hidden until user interaction. Thanks to pure JavaScript, the implementation is lightweight, fast, and easy to customize.

Scroll to Top