Custom HTML tag for Gravatar

by http://www.coding-dude.com

by codingdude

HTML

<script src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>
<!-- modify the email attribute here then Run to see the gravatar image change -->
<codingdude-gravatar email="[email protected]"></codingdude-gravatar><br/>
<a href="https://www.mockofun.com/tutorials/blur-photo/">Blur Photo Online</a>

JavaScript

var tagname = "codingdude-gravatar";
        document.createElement(tagname);
		//find all the tags occurrences (instances) in the document
		var tagInstances = document.getElementsByTagName(tagname);

		//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
		   codingdudeGravatar(tagInstances[i]);
		}
	
	function codingdudeGravatar(element){

		//code for rendering the element goes here
		if (element.attributes.email){

			//get the email address from the element's email attribute
			var email = element.attributes.email.value;
			var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png";
			element.innerHTML = "<img src='"+gravatar+"'>";
		}
	}