Friday, May 8, 2020

Single Page Application

How to make a web app that has "sections" instead of pages. The app operates by making the various sections visible and invisible in response to changes in the hash in the URL.

The video: https://youtu.be/BrMY85a-V_g

I had some trouble with this video and I had to re-record the last four minutes. You'll notice a strange splice about four minutes before the end, where everything suddenly changes color.

For text, I just coped some paragraphs out of Wikipedia. The JavaScript code looks like this:
    function showSection(e) {
        if (document.location.hash == "#red") {
            get("red").style.display = "block";
            get("green").style.display = "none";
            get("yellow").style.display = "none";
            document.getElementsByTagName('body')[0].style.
                backgroundColor = "pink";
        }
        else if (document.location.hash == "#green") {
            get("red").style.display = "none";
            get("green").style.display = "block";
            get("yellow").style.display = "none";
            document.getElementsByTagName('body')[0].style.
                backgroundColor = "honeydew";
        }
        else if (document.location.hash == "#yellow") {
            get("red").style.display = "none";
            get("green").style.display = "none";
            get("yellow").style.display = "block";
            document.getElementsByTagName('body')[0].style.
                backgroundColor = "#ffc";
        }
        else {
            get("red").style.display = "block";
            get("green").style.display = "none";
            get("yellow").style.display = "none";
            document.getElementsByTagName('body')[0].style.
                backgroundColor = "pink";
        }
    }


No comments:

Post a Comment

Note: Only a member of this blog may post a comment.