JSFiddle - React, Tailwind, and code Playground

by DMSChris

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Chris Pena | Constructors</title>

	<!-- CSS -->
	<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


</head>
<body>

	<div class="container">
		<div class="row">
			<div class="col-md-offset-3 col-md-6">
				<h1 class="text-center">My Friends</h1>

				<a href="#" class="btn btn-info btn-md center-block" onclick="appendFriends()">Append Friends</a>
                <a style="margin-top: 10px" href="#" class="btn btn-warning btn-md center-block" onclick="showFriendsList()">Real Friends List</a>
				<div id="friendsList">
					
				</div>
			</div>
		</div>
	</div>

	<!-- Javascript -->
	<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>

JavaScript

function friends(name, age, city) {
	this.name = name;
	this.age = age;
	this.city = city;
	this.sayFriends = function() {
		console.log(this.name + " " + this.age + " " + this.city);
	}
}

var friendsList = [];

var friend1 = new friends("Matt", 22, "Houston");

var friend2 = new friends("Tommy", 23, "Katy");

var friend3 = new friends("Hunter", 20, "Dallas");

var friend4 = new friends("Tricia", 21, "Tomball");

var friend5 = new friends("Daniel", 21, "Cypress");

var friend6 = new friends("Harry", 21, "Cypress");


friendsList.push(friend1, friend2, friend3, friend4, friend5, friend6);

function showFriendsList() {
    alert("Actually... it looks like Chris has no friends.");
}

function appendFriends() {
	for(var i = 0; i < friendsList.length; i++){
		$( "#friendsList" ).append( "<h4 style='margin-top: 30px' class='text-center'>"  + " Name: " + friendsList[i].name + "<br /> Age: " +friendsList[i].age + "<br /> City: " + friendsList[i].city +"</h4>" );
	}
}