Teochew Thunder: Web Tutorial: The Lucky Number Generator, redux (Part 1/2)

Wishing you, dear readers, a fortituous Year of the Tiger!

Back in 2019 during the Year of the Pig, I released this web tutorial that took you through how to create a JavaScript library that created a lucky number generator. Today, I will be expanding on it. We will add code to draw a tiger... but at the same time we will amend the code to display the appropriate animal for the year.

You can get the original code from this GitHub repository.

We will first make this code less specific to 2019. First, change the name of the file tt_cny2019.html. Maybe to tt_cny2022.html, or something. I'm just going to change the title, and the name of the JavaScript file.

tt_cny2022.html

<title>CNY Test</title>

<style>
   body
   {
       background-color: #444400;
       color: #AAAA00;
       font-family: verdana;
   }

   p
   {
       width:80%;
       text-align: justify;
   }
</style>

<script charset="UTF-8" src="cny.js">
</script>

At the body tag's onload attribute, we change the function name from cny2019() to just cny(). And then we pass in "2019" as an argument. The idea here is to render the animal based on the year passed in.

tt_cny2022.html

Now, we are going to take a look at the JavaScript file. We want to preserve the drawing of the pig, while allowing for other animals to be drawn. Most of the functionality existing here can be preserved, with just a few modifications.

As before, we change the function name. And we make sure it has a parameter, year.

cny.js

function cny(year)
{

In the function, replace all mentions of "pig" with the more generic "animal". Also, we want to remove all mentions of "2019".

cny.js

function cny(year)
{
   var overlay = createOverlay();
   var caption = createCaption();
   var animal = createAnimal();
   var body = document.getElementsByTagName("body");

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

   animal.onclick = function()
   {

Now, we want a mechanism to determine which animal to draw. First, we define an array, animalNames. In it, we put in all the animals of the Chinese zodiac. We'll start with the Year of the Pig, just for simplicity.

cny.js

function cny(year)
{
   var animalNames = ["pig", "rat", "ox", "tiger", "rabbit", "dragon", "snake", "horse", "goat", "monkey", "rooster", "dog"];

   var overlay = createOverlay();
   var caption = createCaption();
   var animal = createAnimal();
   var body = document.getElementsByTagName("body");

Now, declare yearStart and set it to 2019. That's our starting year, the Year of the Pig.

cny.js

function cny(year)
{
   var animalNames = ["pig", "rat", "ox", "tiger", "rabbit", "dragon", "snake", "horse", "goat", "monkey", "rooster", "dog"];
   var yearStart = 2019;

   var overlay = createOverlay();
   var caption = createCaption();
   var animal = createAnimal();
   var body = document.getElementsByTagName("body");

The next variable to declare is yearIndex. This will act as a pointer into animalNames. To determine its value, we first take year and subtract yearStart. Normally, that should be enough to give us an animal. If we input 2022, the current year, the value of this with 2019 subtracted would be 3. If we take the element number 3 of animalNames, that's the tiger!

cny.js

function cny(year)
{
   var animalNames = ["pig", "rat", "ox", "tiger", "rabbit", "dragon", "snake", "horse", "goat", "monkey", "rooster", "dog"];
   var yearStart = 2019;
   var yearIndex = (year - yearStart);

   var overlay = createOverlay();
   var caption = createCaption();
   var animal = createAnimal();
   var body = document.getElementsByTagName("body");

But what if it's, say, ten years later? What if we input 2032 as year into the cny() function? Then, we follow up by dividing the result by the length of animalNames, which is 12, and taking the remainder! That's where the modulus operator comes in.

cny.js

function cny(year)
{
   var animalNames = ["pig", "rat", "ox", "tiger", "rabbit", "dragon", "snake", "horse", "goat", "monkey", "rooster", "dog"];
   var yearStart = 2019;
   var yearIndex = (year - yearStart) % animalNames.length;

   var overlay = createOverlay();
   var caption = createCaption();
   var animal = createAnimal();
   var body = document.getElementsByTagName("body");

Then we take yearIndex, use it to reference animalNames, and pass it into the createAnimal() function as an argument.

cny.js

function cny(year)
{
   var animalNames = ["pig", "rat", "ox", "tiger", "rabbit", "dragon", "snake", "horse", "goat", "monkey", "rooster", "dog"];
   var yearStart = 2019;
   var yearIndex = (year - yearStart) % animalNames.length;

   var overlay = createOverlay();
   var caption = createCaption();
   var animal = createAnimal(animalNames[yearIndex]);
   var body = document.getElementsByTagName("body");

There is a piece of animation code further down, which was used to animate the pig. We will enclose it within a conditional block which checks if the animal to be drawn is the pig.

cny.js

if (animalNames[yearIndex] == "pig")
{
   setInterval
   (
       function()
       {
           var eyes = document.getElementsByClassName("cny_eyes");

           eyes[0].innerHTML = "-  -";

           setTimeout
           (
               function()
               {
                   eyes[0].innerHTML = "•  •";
               },
               500
           );
       },
       5000
   );

   setInterval
   (
       function()
       {
           var tail = document.getElementsByClassName("cny_tail");

           tail[0].style.transform = "rotate(-185deg)";

           setTimeout
           (
               function()
               {
                   tail[0].style.transform = "rotate(-175deg)";
               },
               500
           );
       },
       1000
   );
}

We will do the same in the function that is now called createAnimal().

cny.js

What we need to do next is remove that delightful pun from the couplet in the createCaption() function and replace it with something more generic.

cny.js

leftcol.innerHTML = "祝<br />你<br />恭<br />喜<br />发<br />财<br />!<br />";

And there, the code still works as before.

Now with all the prep done, we will go on ahead to draw that tiger.

Drawing the tiger using CSS.

Teochew Thunder

Pages

Wednesday 26 January 2022

Web Tutorial: The Lucky Number Generator, redux (Part 1/2)

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews