Some functional stuff

Share
Screen capture

function buildAttrs(obj) {
    let result = [];
    for (prop in obj) {
        result.push(`${prop}="${obj[prop]}"`);
    }
    return result.join(" ");
}

function createOutput(tag, attrs = {}) {
    return function outputTag(content = "") {
        return `<${tag || "div"} ${buildAttrs(attrs)}>${content}</${tag || "div"}>`;
    };
}

function outputToDom(el, tag, attrs = {}) {
    return function outputToContainer(content = "") {
        getTargetContainer(el).innerHTML += createOutput(tag, attrs)(content);
    };

    function getTargetContainer(id) {
        return document.getElementById(id) || addDiv(id);
    }

    function addDiv(id) {
        const targetDiv = document.createElement("div");
        targetDiv.id = id;
        return document.body.appendChild(targetDiv);
    }
}

function pipe(...fns) {
    return function piped(result) {
        for (let i = 0; i < fns.length; i++) {
            result = fns[i](result);
        }
        return result;
    };
}

const heading = createOutput("h1", { style: "margin: 0" });

const paragraph = createOutput("p");

const article = createOutput("article");

const output = outputToDom("js-output", "section", {
    style: "outline: 1px dotted red; padding: 10px; margin: 10px"
});

const capitalize = i => i.replace(i.charAt(0), i.charAt(0).toUpperCase());

const capitalizeHeading = pipe(capitalize, heading);

const capitalizeParagraph = pipe(capitalize, paragraph);

const buildArticle = i =>
    article(`${capitalizeHeading(i.heading)} ${capitalizeParagraph(i.body)}`);

const buildArticles = i => i.map(buildArticle);

const joinArticles = arr => arr.join("");

const content = [
    {
        heading:
            "A lot of people cry when they cut onions. The trick is not to form an emotional bond.",
        body:
            "Go Speed Racer. Go Speed Racer. Go Speed Racer go. we might as well say... Would you be mine? Could you be mine? Won't you be my neighbor? Baby if you've ever wondered - wondered whatever became of me. I'm living on the air in Cincinnati. Cincinnati WKRP. It's time to put on makeup. It's time to dress up right. It's time to raise the curtain on the Muppet Show tonight."
    },
    {
        heading:
            "I wrote a song about a tortilla. Well actually, it’s more of a wrap.",
        body:
            "Boy the way Glen Miller played. Songs that made the hit parade. Guys like us we had it made. Those were the days. Then one day he was shootin' at some food and up through the ground came a bubblin' crude. Oil that is. They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family."
    },
    {
        heading:
            "Some people just have a way with words, and other people ... oh ... not have way.",
        body:
            "In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Sunday Monday Happy Days. Tuesday Wednesday Happy Days. Thursday Friday Happy Days.Saturday what a day. Groovin' all week with you. If you have a problem if no one else can help and if you can find them maybe you can hire The A-Team. And when the odds are against him and their dangers work to do. You bet your life Speed Racer he will see it through. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour. Now were up in the big leagues getting' our turn at bat. In a freak mishap Ranger 3 and its pilot Captain William Buck Rogers are blown out of their trajectory into an orbit which freezes his life support systems and returns Buck Rogers to Earth five-hundred years later."
    }
];

const headingStyles = { style: "font-family: sans-serif" };

outputToDom("js-headings", "h1", headingStyles)(
    "Functional JS"
);

outputToDom("js-headings", "h2", headingStyles)(
    "AKA This is wickedly cool shit!"
);

pipe(buildArticles, joinArticles, output)(content);
Share