Hello, World!

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Hello, World!</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

/*font (Glass TTY VT220) created by Viacheslav Slavinsky*/
		@font-face {
		    font-family: 'glass_tty_vt220medium';
		    src: url('glass_tty_vt220_1-webfont.eot');
		    src: url('glass_tty_vt220_1-webfont.eot?#iefix') format('embedded-opentype'),
		         url('glass_tty_vt220_1-webfont.woff2') format('woff2'),
		         url('glass_tty_vt220_1-webfont.woff') format('woff'),
		         url('glass_tty_vt220_1-webfont.ttf') format('truetype'),
		         url('glass_tty_vt220_1-webfont.svg#glass_tty_vt220medium') format('svg');
		    font-weight: normal;
		    font-style: normal;

}

body {
		    background-color: black;
		    font-family: "glass_tty_vt220medium";
		    margin-left: 40px;
		    margin-right: 60px;
		    margin-top: 20px;

}

html {
			font-family: "glass_tty_vt220medium";
			color: limegreen;
			font-size: 20px;
		}

.dropdown {
			display: inline;
			font-family: "glass_tty_vt220medium";
			background: black;
			color:limegreen;
			font-size: 20px;
			-webkit-appearance: none;
			appearance:none;
			-moz-appearance:none;
		}

select {
			/*display: inline;*/
			font-family: "glass_tty_vt220medium";
			background: black;
			color:limegreen;
			font-size: 20px;
			border: 1px solid limegreen;
			-webkit-appearance: none;
			appearance:none;
			-moz-appearance:none;
		}

p {
			font-size: 20px;
			color: limegreen;
			margin-bottom: 0px;
			margin-top: 0px;
		}

pre {
			font-size: 20px;
			font-family: "glass_tty_vt220medium";
			color: limegreen;
			margin-bottom: 0px;
			margin-top: 0px;
			margin-left: 80px;
			margin-right: 60px;
			white-space: pre-wrap;
		}

pre.head {
			font-size: 20px;
			font-family: "glass_tty_vt220medium";
			color: limegreen;
			margin-bottom: 0px;
			margin-top: 0px;
			margin-left: 0px;
			margin-right: 60px;
			white-space: pre-wrap;
		}

hr {
		    border: 2px dotted limegreen;
		    border-style: none none dashed; 
		    color: limegreen; 
		    background-color: black;
		}

hr.style2 {
			height: 4px;
		    border: 2px double dotted limegreen;
		    border-style: dashed; 
		    color: limegreen; 
		    background-color: black;
		}

a {
			font-family: "glass_tty_vt220medium";
			color: limegreen;
			margin-bottom: 0px;
			border-bottom: 1px solid limegreen;
			text-decoration: none;
		}

div.cursor {
		  display: inline-block;
		  background: #111;
		  margin-left: 1px;

-webkit-animation: blink 1s linear 0s infinite;
		  -moz-animation: blink 1s linear 0s infinite;
		  -ms-animation: blink 1s linear 0s infinite;
		  -o-animation: blink 1s linear 0s infinite;
		}

@-webkit-keyframes blink {
		  0%   { background: #0a0 }
		  47%  { background: #090 }
		  50%  { background: #000 }
		  97%  { background: #000 }
		  100% { background: #090 }
		}

@-moz-keyframes blink {
		  0%   { background: #0a0 }
		  47%  { background: #090 }
		  50%  { background: #000 }
		  97%  { background: #000 }
		  100% { background: #090 }
		}

@-ms-keyframes blink {
		  0%   { background: #0a0 }
		  47%  { background: #090 }
		  50%  { background: #000 }
		  97%  { background: #000 }
		  100% { background: #090 }
		}

@-o-keyframes blink {
		  0%   { background: #0a0 }
		  47%  { background: #090 }
		  50%  { background: #000 }
		  97%  { background: #000 }
		  100% { background: #090 }
		}

</style>
	</head>
	<body>
		<hr class="style2">
		<br>
		<pre class="head">
#     #                                    #     #                             ### 
#     # ###### #      #       ####         #  #  #  ####  #####  #      #####  ### 
#     # #      #      #      #    #        #  #  # #    # #    # #      #    # ### 
####### #####  #      #      #    # ###    #  #  # #    # #    # #      #    #  #  
#     # #      #      #      #    # ###    #  #  # #    # #####  #      #    #     
#     # #      #      #      #    #  #     #  #  # #    # #   #  #      #    # ### 
#     # ###### ###### ######  ####  #       ## ##   ####  #    # ###### #####  ### 
		</pre>	
		<p>Learn how to say "Hello, World!" in 479 different programming languages. Warning: esoteric languages are included. I kept the comments when provided, so you can also see how comments are made in each language.</p>
		<br>
		<p>Choose the language: <span id="opt"></span></p>
		<br>
		<div id="language"><p>This is the code for "Hello, World!" in:</p></div>
		<hr>
		<br>
		<div id="hello"></div>
		<p><pre><div class="cursor"> </div></pre></p>
		<br>
		<br>
		<hr>
		<p>Source of (almost) all the codes: <a href="https://www.roesler-ac.de/wolfram/hello.htm">The Hello World Collection</a>. Created by Gerardo Furtado.</p>

d3.csv("hello.csv", function(data) {

var hellocode = d3.select("#hello")
								.append("pre");

//creating the dorpdown menu
				var dropdown = d3.select("#opt")
					.append("div")
					.attr("class","dropdown") //for positioning menu with css
					.append("select");
			
				//creating each option element within the dropdown
				dropdown.selectAll("option")
					.data(data)
					.enter()
					.append("option")
					.attr("value", function(d){ return d.language })
					.text(function(d) {
						return d.language
					});

//Show the code after selecting
				dropdown.on("change", function(){

var tv = this.value;

var result = data.filter(function(d) {
					  return d.language == tv;
					});

var thistext = result[0].code;

//this shows the code letter by letter
					hellocode.text(result[0].code)
					.transition()
			        .duration(10*(thistext.length))
			        .ease("linear")
			        .tween("text", function () {
			        	// var thistext = result[0].code;
			            var textLength = thistext.length;
			            return function (t) {
			                this.textContent = thistext.slice(0, 
			                                   Math.round( t * textLength) );
			            };
			        });

//showing the language selected
					if (tv != "Language ▼") {
					d3.select("#language").html("This is the code for \"Hello, World!\" in: " + tv)
					} else {
					d3.select("#language").html("This is the code for \"Hello, World!\" in: ")
					};

});

</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js