"Landing" page using Javascript without editing the index.html file? - ♺ ∙ Web Crafting Materials

You wouldn't need Javascript at all, unless you want it all on one page!

You would have an index.html, and a home.html or some sort of equivalent. On your index.html, you would just have an a tag be the link to redirect to the home.html page.

If you'd want it all on one page, however, you would use javascript. My website does this, and it works flawlessly.

You would use CSS to define a class, like so:

Code

.hide {
    display: none;
}

the display: none tells the browser to simply not display any element with this class (hide, in this case) applied - it will simply not show it at all!

Your code showing the home page content (contained in a div) by default has the .hide class applied to it, and the landing content by default has no class:

Code

<body>
    <div class="hide" id="content">
         ... home content ....
    </div>

    <div id="landing">
        ... landing content ...
    </div>
</body>

In order to make it so the landing page hides and the content shows, inside the landing div you would have a button of some kind, it can be any element (a button, and image, anything really)

The javascript, in this case, would simply remove the "hide" class from the "content" div, and add the "hide" class to the "landing" div:

Code

<body>
    <div class="hide" id="content">
         ... home content ....
    </div>

    <div id="landing">
        ... landing content ...
        <img src="/assets/some/image.jpg" id="enter" />
    </div>

    <script>
         let contentDiv = document.getElementById("content")
         let landingDiv = document.getElementById("landing")
         document.getElementById("enter").addEventListener("click", function() {
             contentDiv.setAttribute("class", "");
             landingDiv.setAttribute("class", "hide");
         });
    </script>
</body>

Now, this is great and all, but what about if the user visits the home page again? They would be re-prompted to re-enter despite already having done so - every time they visit the home page! We can fix this in two ways, one is to define a client-side cookie, or the other is to use local storage. To keep things simple, we'll use local storage.

In our script tag, we would simply do this instead:

Code

let contentDiv = document.getElementById("content")
let landingDiv = document.getElementById("landing")

let hasEntered = localStorage.getItem("entered")

function enter() {
    contentDiv.setAttribute("class", "");
    landingDiv.setAttribute("class", "hide");

    if (!hasEntered) {
        localStorage.setItem("entered", true)
    }
}

if (hasEntered == true) {
    enter()
}

document.getElementById("enter").addEventListener("click", enter);

Using localStorage is great, since it persists between visits, and also when the browser is closed. You can use cookies, however to keep this example simple, I decided to use localStorage instead.

Keep in mind, the downside to doing this with javascript is that the user can have javascript turned off in their browser. If you are worried about that, you should stick to using just HTML and have a separate page for the home page.

If you want to read more into this, I'd suggest the following resources:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
https://developer.mozilla.org/
https://web.dev

There are also books on this topic, some of these books were used in my college courses:
"HTML and CSS: Design and Build Websites" and "JavaScript & jQuery: Interactive Front-End Web Development" - both by Jon Duckett