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>
	<script id="exercise2-template" type="text/template">
		<h3>{{fname}} {{lname}}</h3>
		<p>Cell: {{cellnum}}</p>
	</script>
	<script id="exercise3-template" type="text/template">
	<h3>{{fname}} {{lname}}<h3>
	<p>Cell: {{cellnum}}</p>
	<p>Skills:</p>
	<ul>
	{{#skills}}
	<li>{{.}}</li>
	{{/skills}}
	</ul>
	</script>
	
</head>

<body>

<h1>Mustache Exercises</h1>


<h2>Exercise 1</h2>

<button id="btn-click1">Exercise 1</button> <button id="btn-click2">Exercise 2</button>
<button id="btn-click3">Exercise 3</button>

<div id="exercise-content"></div>








</body>

</html>

JavaScript

$(document).ready(function(){
	$('#btn-click1').click(renderExercise1);
	$('#btn-click2').click(renderExercise2);
	$('#btn-click3').click(renderExercise3);
});

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;
}

	
	
	
	
	var renderExercise2 = function(){
		var person = {
			fname: "Joe",
			lname: "Smith",
			cellnum: "07123 456789"
		}
	var template = $('#exercise2-template').html();
	var html = Mustache.render(template, person);	
	document.getElementById("exercise-content").innerHTML = html;
	
	}
	
	var renderExercise3 = function(){
		var person = {
			fname: "Joe",
			lname: "Smith",
			cellnum: "07123 56789",
			skills: ["PHP", "Python", "jQuery", "CSS"]
		}
		
		var template =$('#exercise3-template').html();
		var html = Mustache.render(template, person);
		document.getElementById("exercise-content").innerHTML = html;
	}