xxxxxxxxxx<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> <script type="text/javascript"> 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