O Christmas Tree – JavaScript Challenge

I have seen my fair share of Christmas tree coding posts this holiday season. They look cool and I was inspired to give it a try. I turned to javascript again since I am trying to learn more about it. Especially since I ran across cypress.io, but I digress.

Contents hide

1 What We’re Building

2 Styles.css

3 Index.html

4 Index.js

5 Day 1: December 31, 2019 Monday

6 Related

What We’re Building

Here’s a look at the final(ish) version. I may come back to do a bit more formatting and add a few embellishments.

You can see from the screenshot above that it is a very simple application. A title, the tree, and a form to set the number of rows to be generated. It was quite easy to generate the tree to the console, but the html version was a bit tricky. I needed to find a way to push the console content to the web page.

Styles.css

The Christmas tree css is criminally simple. It is only there to apply a mono space font.

h1,
h2,
h3 {
    font-family: monospace;
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 24px;
}

Index.html

Here again we have a simple tml file for the Christmas tree.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <h2>Christmas Tree</h2>
    <h3 id="star"></h3>
    <h3 id="tree"></h3>
    <div>
        <form action="/" method="get">
            <p>How many rows tall should the tree be?</p>
            <input type="text" name="size" id="size"> <input type="button" id="create" value="Create" onclick="printtree">
        </form>
    </div>
    <script src="index.js"></script>
</body>
</html>

Index.js

This is the heart of the Christmas tree app. First is the function to overwrite the default console logging. Arun Johny had the perfect implementation on stackexchange. I added the console.clear so the user does not have to see a christmas tree forest on their screen.

(function () {
    var old = console.log;
    var logger = document.getElementById('tree');
    console.log = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }
    console.clear = function () {
        logger.innerHTML = "";
    }
})();

Next is the function to print the Christmas tree. I pass in the number of rows as the tree height. I had a hard time with the white space, so I used hex value instead of . Some simple padding within the for loop gives all of the formatting.

function printtree(n) {
    for (i = 0; i < n; i++) {
        if (i === 0) {
            console.log("*".padStart(n, '\xa0'));
        } else {
            str1 = "/".padStart(n - i, '\xa0');
            fill = (i % 3) === 0 ? "O" : "V";
            str2 = "\\".padStart((i + i), fill);
            console.log(str1.concat('', str2));
        }
    }
}

The last little bit of code is there to handle the create button action.

var createButton = document.querySelector("#create");
createButton.onclick = function () {
    console.clear();
    //should really check that there is a valid value here.
    var n = document.getElementById("size").value;
    printtree(n);
};

That’s it for the Christmas tree implementation. There is plenty of room to improve it. Hopefully this will give you a great starting place. I would love to see how much further you can take it. Be sure to check out some of my other posts.

Day 1: December 31, 2019 Monday

Today’s Progress: I have jumped on the Christmas Tree generation bandwagon.

Thoughts 100 consecutive days of coding is tough. Life finds a way to get in the way. I plan on figuring out a way to set aside 100 hours in the first quarter.

Link(s) to work Christmas Tree