roneesh/gist:1d64cc9009281790496d

## gistfile1.txt
<html>

<head>
	<style>
		.hook {
			width: 200px;
			height: 200px;
			background-color: rgba(0,0,0, 0.5);
			border-radius: 15px;
			color: white;
			font-family: sans-serif;
			padding: 20px;
		}
	</style>
</head>
<body>
	<div id="hookOne" class="hook"></div>
	<script>
		var person = {
		name: 'Dude',
		age: '100',
		profession :'Welder'
	},
	hook = document.getElementById('hookOne');

function render(location, object) {
	location.innerHTML = '';
	var newBio = document.createElement('div');
	for (property in object) {
		var newBioTag = document.createElement('p'),
			newBioLine = document.createTextNode(property.toUpperCase() + ': ' + object[property])
		newBioTag.appendChild(newBioLine);
		newBio.appendChild(newBioTag);
	};
	location.appendChild(newBio);
}

Object.observe(person, function(changes) {
	render(hook, person);
});

render(hook, person);
	</script>
</body>

</html>
	<html>

	<head>
	<style>
	.hook {
	width: 200px;
	height: 200px;
	background-color: rgba(0,0,0, 0.5);
	border-radius: 15px;
	color: white;
	font-family: sans-serif;
	padding: 20px;
	}
	</style>
	</head>
	<body>
	<div id="hookOne" class="hook"></div>
	<script>
	var person = {
	name: 'Dude',
	age: '100',
	profession :'Welder'
	},
	hook = document.getElementById('hookOne');

	function render(location, object) {
	location.innerHTML = '';
	var newBio = document.createElement('div');
	for (property in object) {
	var newBioTag = document.createElement('p'),
	newBioLine = document.createTextNode(property.toUpperCase() + ': ' + object[property])
	newBioTag.appendChild(newBioLine);
	newBio.appendChild(newBioTag);
	};
	location.appendChild(newBio);
	}

	Object.observe(person, function(changes) {
	render(hook, person);
	});

	render(hook, person);
	</script>
	</body>

	</html>