hmphry html generator

by Emily Humphrey

HTML

<div data-js-hook="display-content"></div>
<button data-js-hook="add-large-header">Add Large Header</button>
<button data-js-hook="add-paragraph">Add Paragraph</button>

CSS

textarea{
    border: none;
    font-size: inherit;
    font-weight: inherit;
    width: auto;
    height: auto;
    outline: none;
}
h1{
    font-size: 20px;
    font-weight: bold;
}
}

JavaScript

function htmlGenerator(){
    var display = $("div[data-js-hook='display-content']");
    var addBtns = {};
    addBtns.largeHeader = {
        element: $("button[data-js-hook='add-large-header']"),
        template: "<h1>"+"<textarea>Enter text</textarea>"+"</h1>"
    };
    addBtns.paragraph = {
        element: $("button[data-js-hook='add-paragraph']"),
        template: "<p>"+"<textarea>Enter text</textarea>"+"</p>"
    };
    
    addBtns.paragraph.element.on("click", function(){
        display.append(addBtns.paragraph.template);
    });
    
    addBtns.largeHeader.element.on("click", function(){
        display.append(addBtns.largeHeader.template);
    });
}

htmlGenerator();