Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Vipul-Gejage/Disney-Hotstar-Clone/llms.txt

Use this file to discover all available pages before exploring further.

Every movie card in both the Latest Releases and Recommended For You rows contains a .watchlist-btn button with an onclick="showFullscreenAlert()" inline handler. Clicking the button dynamically creates a fullscreen overlay element, appends it to document.body, and fades it in. The overlay displays a confirmation message — Added Successfully! — along with a Close button that triggers the complementary closeFullscreenAlert() function, which fades the overlay out and removes it from the DOM.

​
The Add to watchlist Button

In Hotstar.html, every watchlist button is written as: 
<button class="watchlist-btn" onclick="showFullscreenAlert()">Add to watchlist</button>
The .watchlist-btn::before pseudo-element renders an add.png icon to the left of the button label using a background image scaled to 40% of a 35px square: 
.watchlist-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    height: 35px;
    width: 35px;
    background-image: url(images/add.png);
    background-size: cover;
    transform: scale(0.4);
}

​
How showFullscreenAlert() Works

showFullscreenAlert() builds the overlay entirely in JavaScript using createElement and innerHTML, then attaches it to document.body. A setTimeout of 10ms sets opacity: 1 on the newly appended element, which triggers the CSS transition: opacity 0.3s for a smooth fade-in. The overlay <div> is created with id="fullscreen-alert". Its inner HTML contains a .alert-content wrapper holding:
  • An <h2> — Added Successfully!
  • A <p> — The show has been added to your watchlist.
  • A <button> with onclick="closeFullscreenAlert()" — Close

​
How closeFullscreenAlert() Works

closeFullscreenAlert() retrieves the overlay by its id (fullscreen-alert) and sets opacity back to 0. The same CSS transition handles the fade-out. After 300ms — enough time for the 0.3s transition to finish — a setTimeout calls overlay.remove() to fully detach the element from the DOM.

​
JavaScript Source

function showFullscreenAlert() {
    // Create the overlay div
    const overlay = document.createElement('div');
    overlay.id = 'fullscreen-alert';
    overlay.innerHTML = `
        <div class="alert-content">
            <h2>Added Successfully!</h2>
            <p>The show has been added to your watchlist.</p>
            <button onclick="closeFullscreenAlert()">Close</button>
        </div>
    `;
    document.body.appendChild(overlay);

    // Show the alert with a fade-in effect
    setTimeout(() => {
        overlay.style.opacity = '1';
    }, 10);
}

function closeFullscreenAlert() {
    const overlay = document.getElementById('fullscreen-alert');
    overlay.style.opacity = '0';
    setTimeout(() => {
        overlay.remove();
    }, 300);
}

​
CSS

The overlay starts at opacity: 0 and transitions to opaque on demand. It is position: fixed and covers the full viewport. The .alert-content card is centered using flex on the parent and styled with the same dark background color (#0c111b) used throughout the page: 
#fullscreen-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1000;
}

.alert-content {
    background: #0c111b;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: white;
    max-width: 400px;
    width: 80%;
}

.alert-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.alert-content p {
    font-size: 18px;
    margin-bottom: 20px;
}

.alert-content button {
    background: #1f80e0;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
}
The watchlist is purely visual — no data is stored anywhere. Clicking Add to watchlist only triggers the confirmation overlay; nothing is saved to memory, localStorage, or a server. Refreshing the page resets the UI entirely with no record of previously added titles.

​
Extending with localStorage

To persist watchlist selections across page refreshes, you can read and write a JSON array from localStorage inside showFullscreenAlert(): 
function showFullscreenAlert(title) {
    // Persist the title
    const watchlist = JSON.parse(localStorage.getItem('watchlist') || '[]');
    if (!watchlist.includes(title)) {
        watchlist.push(title);
        localStorage.setItem('watchlist', JSON.stringify(watchlist));
    }

    // Existing overlay logic ...
    const overlay = document.createElement('div');
    overlay.id = 'fullscreen-alert';
    overlay.innerHTML = `
        <div class="alert-content">
            <h2>Added Successfully!</h2>
            <p>${title} has been added to your watchlist.</p>
            <button onclick="closeFullscreenAlert()">Close</button>
        </div>
    `;
    document.body.appendChild(overlay);
    setTimeout(() => { overlay.style.opacity = '1'; }, 10);
}
Then update each button in Hotstar.html to pass the title: 
<button class="watchlist-btn" onclick="showFullscreenAlert('Mission Mangal')">Add to watchlist</button>

Build docs developers (and LLMs) love

Get started for freeTalk to us