JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Currency Converter</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
function loadXMLDoc(inp)
{
xhttp=new XMLHttpRequest();
var URL1 = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22"
var URL2=escape(inp);
var URL3 = "%22)&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
var URL=URL1+URL2+URL3;
xhttp.open("GET",URL,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<form class="sign-up" name="convert" method="GET" action="index.html">
<h1 class="sign-up-title">Convert Currencies</h1>
<input type="text" class="sign-up-input" placeholder="1" autofocus>
<div class="dropdown"><select name="one" class="dropdown-select"><option value="USD" selected="1">US Dollar</option><option value="EUR">Euro</option><option value="AFA">Afghan Afghani (1927–2002)</option><option value="ALL">Albanian Lek</option><option value="DZD">Algerian Dinar</option><option value="AOA">Angolan Kwanza</option><option value="ARS">Argentine Peso</option><option value="AMD">Armenian Dram</option><option value="AWG">Aruban Florin</option><option value="AUD">Australian Dollar</option><option value="AZN">Azerbaijani Manat</option><option value="BSD">Bahamian Dollar</option><option value="BHD">Bahraini Dinar</option><option value="BDT">Bangladeshi Taka</option><option value="BBD">Barbadian Dollar</option><option value="BYR">Belarusian Ruble</option><option...
CSS
table {
border: 1px solid;
}
td {
border: 1px solid;
}
JavaScript
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Currency Converter</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
function loadXMLDoc(inp)
{
xhttp=new XMLHttpRequest();
var URL1 = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22"
var URL2=escape(inp);
var URL3 = "%22)&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
var URL=URL1+URL2+URL3;
xhttp.open("GET",URL,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
</head>
<body>
<form class="sign-up" name="convert" method="GET" action="index.html">
<h1 class="sign-up-title">Convert Currencies</h1>
<input type="text" class="sign-up-input" placeholder="1" autofocus>
<div class="dropdown"><select name="one" class="dropdown-select"><option value="USD" selected="1">US Dollar</option><option value="EUR">Euro</option><option value="AFA">Afghan Afghani (1927–2002)</option><option value="ALL">Albanian Lek</option><option value="DZD">Algerian Dinar</option><option value="AOA">Angolan Kwanza</option><option value="ARS">Argentine Peso</option><option value="AMD">Armenian Dram</option><option value="AWG">Aruban Florin</option><option value="AUD">Australian Dollar</option><option value="AZN">Azerbaijani Manat</option><option value="BSD">Bahamian Dollar</option><option value="BHD">Bahraini Dinar</option><option value="BDT">Bangladeshi Taka</option><option value="BBD">Barbadian Dollar</option><option value="BYR">Belarusian Ruble</option><option...