hmphry html generator 2.0

by Emily Humphrey

HTML

<div class="post-display" data-js-hook="display-content"></div>
<button data-js-hook="add-display-btn" data-DB-name="large header" data-DB-tag="h1">Add Large Header</button>
<button data-js-hook="add-display-btn" data-DB-name="small header" data-DB-tag="h2">Add Small Header</button>
<button data-js-hook="add-display-btn" data-DB-name="paragraph" data-DB-tag="p">Add Paragraph</button>

CSS

body{
    font-family: sans-serif;
    margin: 20px;
    text-align: center;
}
h1{
    font-size: 20px;
    font-weight: bold;
}
h2{
    font-weight: bold;
    color: red;
}
.post-display{
    margin-bottom: 20px;
    text-align: left;
}
.editable-content:hover{
    box-shadow: 0 0 4px blue;
}

JavaScript

function htmlGenerator(){
    var addbtns = $("*[data-js-hook='add-display-btn']");
    var display = $("div[data-js-hook='display-content']");
    DisplayBtn.prototype = {
        getText: function(name){
            return prompt("What would you like your "+name+" to say?", "");
        },
        addDisplay: function(){
            var tag = this.tag;
            this.text = this.getText(this.name);
            var text = this.text;
            this.element = display.append("<div class='editable-content'><"+tag+">"+text+"</"+tag+"></div>");
        },
        editText: function(){
            return prompt("What would you like your "+name+" to say?", name);
        }
    };
    function DisplayBtn(btn, tag, name){
        this.btn = btn;
        this.tag = tag;
        this.name = name;
    }
    addbtns.each(function(){
        var obj = $(this);
        var btn = new DisplayBtn(obj, obj.attr("data-DB-tag"), obj.attr("data-DB-name"));
        btn.btn.on("click", function(){
            btn.addDisplay();
        });
        
    });
}
htmlGenerator();