Web Tutorial: The Lucky Number Piggy Widget (Part 2/2)

We've done the first part, rendering a cute little pig on the page. Let's get to displaying a "Happy Chinese New Year" message and some lucky numbers.

Create a new variable, caption, and set it to the returned result of the createCaption() function. We will append caption before appending pig to overlay.

cny2019.js

    var overlay = createOverlay();
    var caption = createCaption();
    var pig = createPig();
    var body = document.getElementsByTagName("body");

    overlay.appendChild(caption);
    overlay.appendChild(pig);
    body[0].appendChild(overlay);

Now create the function createCaption(). In the function, you will declare another variable, caption, setting its value to a newly created div. And then, at the end of the function, return caption.

cny2019.js

    function createLeg()
    {
        var leg = document.createElement("div");
        leg.style.position = "relative";
        leg.style.width = "8px";
        leg.style.height = "15px";
        leg.style.borderRadius = "50%";
        leg.style.backgroundColor = "rgba(255, 100, 100, 1)";

        return leg;
    }

    function createCaption()
    {
        var caption = document.createElement("div");

        return caption;
    }

Here, we set caption's width, position and margin properties. The 50 pixels is to put some distance between caption and the pig. Again,  we give caption a green outline.
cny2019.js

    function createCaption()
    {
        var caption = document.createElement("div");
        caption.style.position = "relative";
        caption.style.width = "60%";
        caption.style.margin = "0 auto 50px auto";
        caption.style.outline = "1px solid #00FF00";

        return caption;
    }

See that green line over the pig? That's because we haven't defined the height of caption. But that's OK, we don't need to. It's just a marker and doesn't need to be more than that.

Now define another variable, leftcol, and make it another created div. Set its position property to relative, make it float left, and give it a width of, say, 40%. Then append it to caption.

cny2019.js

    function createCaption()
    {
        var caption = document.createElement("div");
        caption.style.position = "relative";
        caption.style.width = "60%";
        caption.style.margin = "0 auto 50px auto";
        caption.style.outline = "1px solid #00FF00";

        var leftcol = document.createElement("div");
        leftcol.style.position = "relative";
        leftcol.style.float = "left";
        leftcol.style.width = "40%";
       
        caption.appendChild(leftcol);

        return caption;
    }

Next, set its color to a brilliant orange and use  the textShadow property to give it a jazzy red glow. I'll leave font size, bolding and alignment to you. (Here's some info on the text-shadow CSS property.)

Its content will be Chinese characters. It reads from top to bottom (hence all the break tags) and is basically a pun on the Chinese word for "pig".

cny2019.js

    function createCaption()
    {
        var caption = document.createElement("div");
        caption.style.position = "relative";
        caption.style.width = "60%";
        caption.style.margin = "0 auto 50px auto";
        caption.style.outline = "1px solid #00FF00";

        var leftcol = document.createElement("div");
        leftcol.style.position = "relative";
        leftcol.style.float = "left";
        leftcol.style.width = "40%";
        leftcol.style.color = "#FF9900";
        leftcol.style.fontSize = "30px";
        leftcol.style.textAlign = "center";
        leftcol.fontWeight = "bold";
        leftcol.style.textShadow = "2px 2px 20px #FF0000, 0px 0px 20px #FF0000, 0px 2px 20px #FF0000, 2px 0px 20px #FF0000";
        leftcol.innerHTML = "猪<br />你<br />恭<br />喜<br />发<br />财<br />!<br />";
       
        caption.appendChild(leftcol);

        return caption;
    }

Yep. Beautiful!

Now, repeat the process for a new variable, rightcol. Set its position property to relative, make it float right, and give it a width of 40%. Append it to caption after leftcol.

cny2019.js

        var leftcol = document.createElement("div");
        leftcol.style.position = "relative";
        leftcol.style.float = "left";
        leftcol.style.width = "40%";
        leftcol.style.color = "#FF9900";
        leftcol.style.fontSize = "30px";
        leftcol.style.textAlign = "center";
        leftcol.fontWeight = "bold";
        leftcol.style.textShadow = "2px 2px 20px #FF0000, 0px 0px 20px #FF0000, 0px 2px 20px #FF0000, 2px 0px 20px #FF0000";
        leftcol.innerHTML = "猪<br />你<br />恭<br />喜<br />发<br />财<br />!<br />";

        var rightcol = document.createElement("div");
        rightcol.style.position = "relative";
        rightcol.style.float = "right";
        rightcol.style.width = "40%";

        caption.appendChild(leftcol);
        caption.appendChild(rightcol);

For contrast, we'll make its font size smaller, though we'll use the same text color for leftcol. Again, I'm gonna bold it and set alignment to center. This part is up to you. I've also elected to put the same red glow there. You won't see anything if you refresh, because we haven't put in any content yet.

cny2019.js

        var rightcol = document.createElement("div");
        rightcol.style.position = "relative";
        rightcol.style.float = "right";
        rightcol.style.width = "40%";
        rightcol.style.color = "#FFFF00";
        rightcol.style.fontSize = "20px";
        rightcol.style.textAlign = "center";
        rightcol.fontWeight = "bold";
        rightcol.style.textShadow = "2px 2px 20px #FF0000, 0px 0px 20px #FF0000, 0px 2px 20px #FF0000, 2px 0px 20px #FF0000";
       
        caption.appendChild(leftcol);
        caption.appendChild(rightcol);

Let's get to some lucky number generation!

Give rightcol a class name, cny2019_numbers.

cny2019.js

        var rightcol = document.createElement("div");
        rightcol.className = "cny2019_numbers";
        rightcol.style.position = "relative";
        rightcol.style.float = "right";
        rightcol.style.width = "40%";
        rightcol.style.color = "#FFFF00";
        rightcol.style.fontSize = "20px";
        rightcol.style.textAlign = "center";
        rightcol.fontWeight = "bold";
        rightcol.style.textShadow = "2px 2px 20px #FF0000, 0px 0px 20px #FF0000, 0px 2px 20px #FF0000, 2px 0px 20px #FF0000";

Also, set caption's visibility property to hidden.
cny2019.js

    function createCaption()
    {
        var caption = document.createElement("div");
        caption.style.visibility = "hidden";
        caption.style.position = "relative";
        caption.style.width = "60%";
        caption.style.margin = "0 auto 50px auto";
        caption.style.outline = "1px solid #00FF00";

In the main function, add this block. Basically, it means that if you click on pig, it toggles caption's visibility on and off.

cny2019.js

    var overlay = createOverlay();
    var caption = createCaption();
    var pig = createPig();
    var body = document.getElementsByTagName("body");

    overlay.appendChild(caption);
    overlay.appendChild(pig);
    body[0].appendChild(overlay);

    pig.onclick = function()
    {
        if (caption.style.visibility == "hidden")
        {
            caption.style.visibility = "visible";
        }
        else
        {
            caption.style.visibility = "hidden";
        }
    }

Now refresh. Have the Chinese character's disappeared? Cool. When you click on the pig, do they reappear? This little feature is important because we don't want the pig to distract viewers from the page too much. It's meant as extra content, not the content itself.

Also, while caption is invisible, it still takes up space on the page, thus the pig is still at the bottom of the white box.

Now, add a call to the getNumbers() function here.

cny2019.js

    pig.onclick = function()
    {
        if (caption.style.visibility == "hidden")
        {
            caption.style.visibility = "visible";
            getNumbers();
        }
        else
        {
            caption.style.visibility = "hidden";
        }
    }

And let's create that function. In that function, we declare an array, numbers, with four elements. Each element is the returned result of the generateRandomNo() function, passing in 0 and 9 as arguments. Basically, each element is a random number between 0 and 9.

cny2019.js

        caption.appendChild(leftcol);
        caption.appendChild(rightcol);

        return caption;
    }

    function getNumbers()
    {
        var numbers =
        [
            generateRandomNo(0, 9),
            generateRandomNo(0, 9),
            generateRandomNo(0, 9),
            generateRandomNo(0, 9)
        ];
    }

Here's the generateRandomNo() function.

cny2019.js

    function getNumbers()
    {
        var numbers =
        [
            generateRandomNo(0, 9),
            generateRandomNo(0, 9),
            generateRandomNo(0, 9),
            generateRandomNo(0, 9)
        ];
    }

    function generateRandomNo(varmin, varmax)
    {
        return Math.floor((Math.random() * (varmax-varmin+1)) + varmin);
    }

Now this final line creates a string consisting of the Chinese characters for "lucky numbers" (again, hence all the break tags) and the four elements of numbers, in one vertical row into rightcol!

cny2019.js

    function getNumbers()
    {
        var numbers =
        [
            generateRandomNo(0, 9),
            generateRandomNo(0, 9),
            generateRandomNo(0, 9),
            generateRandomNo(0, 9)
        ];

        var rightcol = document.getElementsByClassName("cny2019_numbers");
        rightcol[0].innerHTML = "幸<br />运<br />号<br />码<br />" + numbers[0] + "<br />" + numbers[1] + "<br />" + numbers[2] + "<br />" + numbers[3];
    }

Refresh! Click! Do you see numbers? Better yet, all the numbers regenerate each time you toggle the display on and off!

Ahem, did you forget something?

Cleanup time! Get rid of all the green and white outlines.

cny2019.js

    function createOverlay()
    {
        var div = document.createElement("div");
        //div.style.outline = "1px solid #FFFFFF";
        div.style.width = "100px";
        div.style.height = "400px";
        div.style.position = "fixed";
        div.style.padding = "10px";
        div.style.right = "0";
        div.style.bottom = "0";
        return div;
    }

cny2019.js

        var caption = document.createElement("div");
        caption.style.visibility = "hidden";
        caption.style.position = "relative";
        caption.style.width = "60%";
        caption.style.margin = "0 auto 50px auto";
        //caption.style.outline = "1px solid #00FF00";

Now it's all presentable!

Congratulations and Happy Lunar New Year!

You've got a piggy widget, and much joy and fortune may it bring you...

Won't hog any more of your time. Have a great festival!
T___T