JSFiddle - React, Tailwind, and code Playground

by Ty

HTML

<!DOCTYPE>
<html>
    
    <head>
        <meta charset="utf-8" />
        <title>mustache</title>
        <script src="jquery-1.10.2.min.js"></script>
        <script src="mustache.js" type="text/javascript"></script>
        <script src="mustache-exercise.js"></script>
    </head>
    
    <body>
        
<h1>Mustache Exercises</h1>

        <button id="btn-click">Exercise 1</button>
        <div id="exercise-content"></div>
        
<h2>Exercise 1</h2>

    </body>

</html>

CSS

button {
    color: red;
    background-color: blue;
}

JavaScript

//Mustache (first exercise)

$(document).ready(function () {
    $('#btn-click').click(renderExercise1);
});

var renderExercise1 = function () {
    var person = {
        fname: "Mike",
        lname: "Smith",
        cellnum: "01234 56789"
    };

    var template = "<h3>{{fname}} {{lname}}</h3><p>Cell: {{cellnum}}</p>";
    var html = Mustache.render(template, person);

    console.log(html);

    document.getElementById("exercise-content").innerHTML = html;
};