atomic-function-solution.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>JS Review Practice Sheet</title>
        <script
	    src="https://code.jquery.com/jquery-3.3.1.min.js"
	    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	    crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chota@0.5.2/dist/chota.min.css">
        <link rel="stylesheet" href="style.css">
        <script src="./atomic-data.js"></script>
    </head>
    <body>
        <header id="page-header">
            <h1>Card Deck</h1>
        </header>
        <main id="page-main">
        </main>
        <footer id="page-footer">That's the end of the page</footer>

        <script>
         function letsTag ( content, tagName, attrs={}) {
             output = `<${tagName} `;
             for (a in attrs) {
                 output+=`${a}=${attrs[a]} `;
             }
             output += `>${content}</${tagName}>`;
             return output;
         }
         function headMe (titleText) {
             output=letsTag(titleText, 'h1');
             output=letsTag(output, 'header');
             return(output);
         }
         function footMe () {
             let link = letsTag('A Project of HIS393', 'a', {href: 'https://digitalhistory.github.io/dh-website/'});
             return letsTag(link, 'footer');
         }

         function mainMe (blurb) {
             let p = letsTag(blurb, 'p');
             return letsTag(p, 'main');
         }

         function cardMe (person) {
             let header = headMe(person.name);
             let main = mainMe(person.blurb);
             let footer = footMe();
             return letsTag(header + main + footer, 'card', {class: 'card'});
         }

         function makeAllTheCards (people) {
             output = '';
             for (p of people) {
                 output += cardMe (p);
             }
             
             return $('main#page-main').append(output); 
         }

         makeAllTheCards(allEntries);
        </script>
    </body>
</html>