Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
Next Chapter

Challenge #1 of 1


Q: 

On our site, there is one section that is very special: We expose the secrets to creating the world's most perfect pizza. But not all users are ready for this earth-shattering information. And so, I've decided to hide the entire page with a button and open a big dialog on the front page of that section...

Here's how it looks!

<html>
<head>
    ...
</head>
<body>
    <p id="page_warning">
        This page has been hidden for security reasons. Please click

        <button
            class="btn btn-primary"
            onclick="javascript:document.getElementById('my_great_modal').style.display: block"
        >
            here
        </button>

        if you are ready to uncover some true secrets!
    <p>

    <div id="my_great_modal" style="display: none">
        <h1>Welcome to our Pizza Section!</h1>

        <p>Proceed only if you are ready for pizza to change your life!</p>

        <button
            class="btn btn-primary"
            onclick="javascript:hideDialogAndShowPage()"
        >
            Proceed
        </button>
    </div>

    <div id="the_rest_of_my_page" style="display: none">
        ...
    </div>

    <script>
        window.hideDialogAndShowPage = () => {
            document.getElementById('my_great_modal').style.display='none';
            document.getElementById('page_warning').style.display='none';
            document.getElementById('the_rest_of_my_page').style.display='block';
        }
    </script>
</body>
</html>

This works as expected, but I'm a bit nervous about leaving too much time for our users to decide. They should be quick! So I've added a timeout on the main JavaScript of the page to force users away after a certain amount of time.

window.setTimeout(() => {
    window.location.href = '/';
}, 10000);

How can we use Turbo Drive (instead of just window.location.href=) to perform a page visit without doing a full refresh?

userVoice